Cocoonを利用したスタイルガイド

スタイル拡張例

以下は、表示サンプルとコードです。

太字

文章内を太字にする

赤字

文章内を赤字にする

太い赤字

文章内を太い赤字にする

赤アンダーライン

文章内を赤アンダーラインにする

黄色マーカー

文章内を黄色マーカーにする

黄色アンダーラインマーカー

文章内を黄色アンダーラインマーカーにする

打ち消し線

文章に打消し線を入れる

キーボードキー

コピーのショートカットは Ctrl + C です

アイコンボックス

補足情報(i)

補足情報1

補足情報(?)

補足情報2

補足情報(!)

注意喚起文

メモ

メモボックス

コメント

コメントボックス

案内ボックス

プライマリー

プライマリー

サクセス

サクセス

インフォ

インフォ

ワーニング

ワーニング

デンジャー

デンジャー

スタイル拡張例

以下は、表示サンプルとコードです。

バッジ(オレンジ)

参考

バッジ(レッド)

参照

バッジ(ピンク)

サイト

バッジ(パープル)

公式

バッジ(ブルー)

出典

バッジ(グリーン)

おすすめ

バッジ(イエロー)

ピックアップ

バッジ(ブラウン)

関連

バッジ(グレー)

PR

スタイル拡張例

以下は、表示サンプルとコードです。

レッド

ボタンテキスト

ボタンテキスト

ボタンテキスト

ピンク

ボタンテキスト

ボタンテキスト

ボタンテキスト

パープル

ボタンテキスト

ボタンテキスト

ボタンテキスト

ディープパープル

ボタンテキスト

ボタンテキスト

ボタンテキスト

インディゴ[紺色]

ボタンテキスト

ボタンテキスト

ボタンテキスト

ブルー

ボタンテキスト

ボタンテキスト

ボタンテキスト

ライトブルー

ボタンテキスト

ボタンテキスト

ボタンテキスト

シアン

ボタンテキスト

ボタンテキスト

ボタンテキスト

ティール[緑色がかった青]

ボタンテキスト

ボタンテキスト

ボタンテキスト

グリーン

ボタンテキスト

ボタンテキスト

ボタンテキスト

ライトグリーン

ボタンテキスト

ボタンテキスト

ボタンテキスト

ライム

ボタンテキスト

ボタンテキスト

ボタンテキスト

イエロー

ボタンテキスト

ボタンテキスト

ボタンテキスト

アンバー[琥珀色]

ボタンテキスト

ボタンテキスト

ボタンテキスト

オレンジ

ボタンテキスト

ボタンテキスト

ボタンテキスト

ディープオレンジ

ボタンテキスト

ボタンテキスト

ボタンテキスト

ブラウン

ボタンテキスト

ボタンテキスト

ボタンテキスト

グレー

ボタンテキスト

ボタンテキスト

ボタンテキスト

リンクは自前で

上記のように、このボタン拡張スタイル機能は、href属性やtarget属性を持ちません。

ですので、テキストエディター側で以下のように属性を入力する必要があります。


これを実際に表示させると、以下のようになります。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

© 2019 ~いまどきワードプレスデザイン研究所 by Ganapati