拡張スタイル「アイコンボックス」と「案内ボックス」の表示サンプル。

当テーマには、デフォルトでボックス型の装飾が行えるように拡張スタイルは用意してあります。

ビジュアルエディターの「スタイル」ドロップダウンリストから「ボックス」とたどって入力すれば、サクサク入力できます。

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

アイコンボックス

補足情報（i）

<div class="information-box">補足情報1</div>

補足情報（?）

<div class="question-box">補足情報2</div>

補足情報（!）

<div class="alert-box">注意喚起文</div>

メモ

<div class="memo-box">メモボックス</div>

コメント

<div class="comment-box">コメントボックス</div>

案内ボックス

プライマリー

<div class="primary-box">プライマリー</div>

セカンダリー

<div class="secondary-box">セカンダリー</div>

サクセス

<div class="success-box">サクセス</div>

インフォ

<div class="info-box">インフォ</div>

ワーニング

<div class="warning-box">ワーニング</div>

デンジャー

<div class="danger-box">デンジャー</div>

ライト

<div class="light-box">ライト</div>

ダーク

<div class="dark-box">ダーク</div>

まとめ

これらの拡張スタイルは、すべてビジュアルエディターの「スタイル」ドロップダウンリストからマウスクリックのみで利用することができます。

ブログの場合、ちょっと文章を装飾するだけで、読みやすくできるので、よかったら試してみてください。