ワードプレスで説明ボックスを記事に挿入する方法！便利な『AddQuicktag』プラグインを使用
記事を書いていると文字だけでは寂しいということってありますよね。
斉藤もそう感じたので今回はワードプレスでできる、記事内にボックスを挿入する方法をまとめたいと思います。
尚、斉藤は無料ブログテーマの『ルクセリタス』を使用しています。
CSSで説明ボックスの形式を決める
説明ボックスのCSSはいろいろな方がサンプルを作成してCSSを公開してくれていますのでグーグル検索で調べて自分の好みのものを見つけてみてください。
ちなみに斉藤はこちらのサイトを利用させていただきました。
好きなボックスのCSSを見つけたら『Luxeritas』→『子テーマの編集』→『style.css』で『style.css』にコピペします。
本当はこれだけで、あとは記事のテキストエディタにHTMLと書かれた方のコードを入力して”ここに文章”のところにボックス内に書きたい文章を入れれば終了なのですが、たくさんボックスを用意すると毎回HTMLを入力するのが面倒なのでもっと簡単に使える方法を説明していきたいと思います！
『プラグイン』から『AddQuicktag』をダウンロードすればワンタッチで説明ボックスを挿入できる
この『AddQuicktag』というプラグインは『投稿』からワンタッチで説明ボックスを挿入することができるプラグインなので非常に便利です。
「たくさんの説明ボックスのテンプレートを用意したい！」
「頻繁に説明ボックスを利用したい！」
という方は是非ここもやっておいてください。
いろんな説明ボックスをすぐ使えるので設定したほうがいいよ！（これも説明ボックスです）
『AddQuicktag』をダウンロードしてプラグインを有効にする
まずはプラグインを有効にしてください。
プラグインのダウンロードは管理画面の左側でできます。
プラグインを有効にしたら『AddQuicktag』を設定する
AddQuicktagの設定方法は以下の画像を参考にしつつ説明します。
- 赤い囲いにその説明ボックスの名前を記入する
- オレンジ色の囲いの上部記入欄に『<div class="box1″> <p>ここに文章</p>』と記入する。
（ボックス上部にタイトルがつくパターンの場合は『<div class="box1″> <span class="box-title">ここにタイトル</span> <p>ここに文章</p>』と記入する。）※ - オレンジ色の囲いの下部記入欄に『</div>』と記入する。（これは共通です）
- 緑色のチェックボックをクリックしてチェックを入れる
※"box1″のところは『Luxeritas』→『子テーマの編集』→『style.css』で『style.css』にコピペした時に入力した名前を入れてください。
以上です。
これで説明ボックスを使う準備ができました。
実際に説明ボックスを使って記事を書いてみる
AddQuicktagのプラグインを有効にしていると以下のボックスが出てきます。
ここに、先ほど作成した説明ボックスのタイトルが表示されるのでクリックします。
すると『ここに文章』（タイトルがある場合は『ここにタイトル』『ここに文章』）と表示さえます。
あとは『ここにタイトル』を表示させたいタイトル名に変更し、『ここに文章』を表示させたいボックス内文章にするだけです！
※ここで、ビジュアルエディタで記事を書いている人には文字しか出現しないので分かりずらいのですが、プレビューをしてみるとちゃんと説明ボックスになっているので確認してみてください。
注意！プレビューしないとボックスは表示されないよ！
色のバリエーションを好みにする
ボックスのテンプレートができたので、あとは好みの色にしていきましょう。
ボックスを構成している各部分のコードは以下のようになっているので、変えたい色の部分を探して色コードを変えましょう。
- color…文字
- background…背景
- border…枠線
色コードはこちらのサイトでまとめてあり、サンプルもあるので非常にわかりやすいです。
https://ironodata.info/
まとめ 一度設定すれば簡単にすぐ使える
いかがでしたか？
ボックスが記事にあると目を引きますし、文字だけよりも分かりやすく見やすい記事になりますよね！
カスタマイズも簡単にできるので、色や形を変えてオリジナルなボックスを作ってみてはいかがでしょうか！？
ルクセリタスのカスタマイズ記録はこちらでまとめています。
【WordPress】ルクセリタステーマのカスタマイズ。ブログ更新でやったものまとめ