【WordPress】LION MEDIAのボックスをカスタマイズ

【WordPress】LION MEDIAのボックスをカスタマイズ

【Wordpress】LION BLOGのボックスをカスタマイズ

 

こんにちは。今回はボックスのカスタマイズ方法を書いていこうと思います。

LION BLOGデフォルトのボックス

LION BLOGだとデフォルトで以下のようなボックスが入っています。

XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
 
 
以上がデフォルトのボックスになります。
ボックスを使用することで記事を読みやすくしたり、サイトの見栄えをよくできます。
ただ、デフォルトのボックスはバリエーションが少ないと感じている方も多いと思います。
今回はボックスのカスタマイズ方法について説明します。
いろんなボックスを作って他のブロクと差別化を図りましょう。
 

今回のカスタマイズでの目標

今回のボックスをカスタマイズして以下のようなボックスを作成することを目標にしましょう。

 
 
 

 

カスタマイズ手順

 

Step1. プラグイン「AddQuickTag」をダウンロードしよう

 
まずはプラグインをダウンロードしましょう。
オススメは「AddQuickTag」です。
下図のようにダッシュボードからプラグインのダウンロード画面に行ったら、検索画面に「AddQuickTag」と入力して入手しましょう。
 
 

Step2.「追加CSS」にボックス情報を追加しよう

「外観」→「カスタマイズ」→「追加CSS」にいきましょう。

 

次に追加CSSに

.redbox{background:#f90b0b26;}

と入力してください。

Step3.「AddQuickTag」に登録しよう

「設定」→「AddQuickTag」から下記画面まで行って下さい。

ボタン名*:赤のボックス
開始タグ*:<div class=redbox>
終了タグ(s):</div>

と入力してください。これでひとまず設定は完了です。
早速、投稿画面に行ってみましょう。

Step4. 投稿で新しいボックスを使ってみよう

投稿の編集するとき、テキスト画面にて「赤のボックス」が追加されていることがわかります。

ボックスに入れたいテキストをカーソルでくくってから「赤のボックス」をクリックすれば、
出来上がりです!

以上、ボックスのカスタマイズ方法でした。
同じ要領で追加CSSに使いたいボックスを入力して、AddQuickTagに登録すれば、
もっと色々なボックスを使うことができます。

追加CSSに追加するサンプルコードはネットから入手することもできますし、
自分で作成することでオリジナルボックスを作ることもできます。

色んなボックスを使って、記事を見やすく、そして、はなやかにしていきましょう。