Simplicity デフォルト装飾タグのレイアウト見本

当ブログは、Simplicityという無料テーマを利用させていただいています。シンプルかつ高機能で、デフォルトで様々な機能が備わっています。プラグインなども必要最低限で良いですし、非常に助かっています。

Simplicityには拡張クラス指定のスタイルシートが入っています。そのレイアウト見本をここに紹介します。上に表示見本、下にソースコードという順序で書いていきます。

Simplicity 拡張クラスのレイアウト見本

参照・参考表示

十勝地方の帯広はゴールデンウィークが始まる4月29日に開花すると予報が出てました。あと5日、、、待ち遠しいです。本州の方にしてみたら「今更桜？」って話でしょうが、北海道の春は今からです！

<p class="sankou">十勝地方の帯広はゴールデンウィークが始まる4月29日に開花すると予報が出てました。あと5日、、、待ち遠しいです。本州の方にしてみたら「今更桜？」って話でしょうが、北海道の春は今からです！</p>

文字の装飾クラス指定

今日の北海道 十勝地方は曇り空です。少々肌寒いですが、春らしい天気です。先日、札幌で桜が開花して、今週末から花見シーズンスタートです。北海道の花見と言えばジンギスカンです。コンロを持ち込んで桜の下でジンギスカンするのが北海道的花見なんですよ～。

今日の北海道 <span class="bold">十勝地方は曇り空</span>です。少々肌寒いですが、<span class="red">春らしい天気</span>です。先日、札幌で桜が開花して、今週末から<span class="bold-red">花見シーズンスタート</span>です。北海道の花見と言えば<span class="marker">ジンギスカン</span>です。コンロを持ち込んで桜の下でジンギスカンするのが<span class="strike">北海道的花見</span>なんですよ～。

キーボードキーのスタイル

Ctrl + C

Ctrl + V

<span class="keyboard-key">Ctrl</span> + <span class="keyboard-key">C</span>

<span class="keyboard-key">Ctrl</span> + <span class="keyboard-key">V</span>

ブートストラップのインフォメーション的な囲み表示

.sp-primaryクラスを使用

.sp-successクラスを使用

.sp-infoクラスを使用

.sp-warningクラスを使用

.sp-dangerクラスを使用

<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>

LINEの背景っぽい装飾

<div class="line_back">
<p class="left_balloon">北海道の4月は寒いですか？</p>

<p class="right_balloon">まだ雪が降ってもおかしくないけど、温かい日は20度超えます。</p>

<p class="left_balloon">服装選びが難しいですね。</p>

<p class="right_balloon">確かに、、、</p>

<p class="right_balloon">アウターはウィンドブレーカーがあった方が良いです。4月は風が強いから。</p>

<div class="clear_balloon"></div>
</div>