Simplicityでは、デフォルト状態で、文字装飾に使えるCSSの拡張クラスをいくつか用意しています。
以下では、それら拡張クラスの使い方について説明したいと思います。
文字装飾
まずは、文字装飾用に以下のようなクラスがあります。
太字
|
1 |
文字を<span class="bold">太字</span>にします。 |
文字を太字にします。
赤字
|
1 |
文字を<span class="red">赤字</span>にします。 |
文字を赤字にします。
太い赤字
|
1 |
文字を<span class="bold-red">太い赤字</span>にします。 |
文字を太い赤字にします。
赤のアンダーライン
|
1 |
文字に<span class="red-under">赤のアンダーライン</span>を引きます。 |
文字に赤のアンダーラインを引きます。
※Simplicity2.1.0より
黄色のマーカー
|
1 |
文字に<span class="marker">黄色のマーカー</span>を引きます。 |
文字に黄色のマーカーを引きます。
黄色のアンダーラインマーカー
|
1 |
<span class="marker-under">黄色のアンダーラインマーカー</span>を引きます。 |
文字に黄色のアンダーラインマーカーを引きます。
※Simplicity2.1.0より
打ち消し線
|
1 |
文字に<span class="strike">打ち消し線</span>を引きます。 |
文字に打ち消し線を引きます。
参考情報用のバッジ
参照情報用のバッジは、sankou、sanko、feffer、refのどれを利用しても同じです。
|
1 2 3 4 5 6 7 |
<span class="sankou">参考</span> 参考情報のリンク <span class="sanko">引用</span> 引用元のリンク <span class="reffer">サイト</span> サイトへのリンク <span class="ref">出典</span> 出典元のリンク |
参考 参考情報のリンク
引用 引用元のリンク
サイト サイトへのリンク
出典 出典元のリンク
キーボードキー
|
1 2 3 |
コピーをするには<span class="keyboard-key">Ctrl</span> + <span class="keyboard-key">C</span>を押します。 貼り付けをするには<span class="keyboard-key">Ctrl</span> + <span class="keyboard-key">V</span>を押します。 |
コピーをするにはCtrl + Cを押します。
貼り付けをするにはCtrl + Vを押します。
メッセージ表示用装飾
メッセージ表示用装飾としては、以下のようなものがあります。
補足情報を表示
|
1 2 3 |
<div class="information">補足説明を入力する。</div> <div class="question">疑問を持たれそうな内容に関する補足説明を入力する。</div> |
詳細は以下を参照してください。
Bootstrap風メッセージ
Bootstrapのメッセージ表示欄のような5つのスタイルに対応したクラスがあります。
|
1 2 3 4 5 6 7 8 9 |
<p class="sp-primary">.sp-primaryクラスを使用</p> <p class="sp-success">.sp-successクラスを使用</p> <p class="sp-info">.sp-infoクラスを使用</p> <p class="sp-warning">.sp-warningクラスを使用</p> <p class="sp-danger">.sp-dangerクラスを使用</p> |
.sp-primaryクラスを使用
.sp-successクラスを使用
.sp-infoクラスを使用
.sp-warningクラスを使用
.sp-dangerクラスを使用
詳しくは以下を参照してください。
LINE風メッセージ
一応、以下のようなLINE風スタイルもあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="line_back"> <p class="left_balloon">負うた子に助けられたか</p> <p class="right_balloon">この谷はいい、いつ来ても心が和む</p> <p class="left_balloon">今度の旅はどうじゃった？</p> <p class="right_balloon">うーん ひどいものだ</p> <p class="right_balloon">南でまた２つの国が腐海にのまれてしまった<img alt="" src="http://wp-simplicity.com/wp-content/uploads/2014/12/1724.png" /></p> <div class="clear_balloon"></div> <div class="clear_balloon"></div> </div> |
負うた子に助けられたか
この谷はいい、いつ来ても心が和む
今度の旅はどうじゃった？
うーん ひどいものだ
南でまた２つの国が腐海にのまれてしまった
詳しくは以下を参照してください。
まとめ
これらの、拡張クラウスを利用すれば、より見やすく文章を書くことができるかもしれません。
そして、WordpressプラグインのAddQuicktagに登録して利用することにより、より手軽に利用できるかと思います。
というわけで、これまで拡張クラスの利用方法を書こう書こうと思っていつつも、面倒くさくて書いていなかったのをようやく書くことができました。
