ワードプレスで説明ボックスを記事に挿入する方法！便利な『AddQuicktag』プラグインを使用

2018年7月8日ブログ

記事を書いていると文字だけでは寂しいということってありますよね。

斉藤もそう感じたので今回はワードプレスでできる、記事内にボックスを挿入する方法をまとめたいと思います。

注目！これがボックスです！

尚、斉藤は無料ブログテーマの『ルクセリタス』を使用しています。

CSSで説明ボックスの形式を決める

説明ボックスのCSSはいろいろな方がサンプルを作成してCSSを公開してくれていますのでグーグル検索で調べて自分の好みのものを見つけてみてください。

ちなみに斉藤はこちらのサイトを利用させていただきました。

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30

好きなボックスのCSSを見つけたら『Luxeritas』→『子テーマの編集』→『style.css』で『style.css』にコピペします。

本当はこれだけで、あとは記事のテキストエディタにHTMLと書かれた方のコードを入力して”ここに文章”のところにボックス内に書きたい文章を入れれば終了なのですが、たくさんボックスを用意すると毎回HTMLを入力するのが面倒なのでもっと簡単に使える方法を説明していきたいと思います！

この『AddQuicktag』というプラグインは『投稿』からワンタッチで説明ボックスを挿入することができるプラグインなので非常に便利です。

「たくさんの説明ボックスのテンプレートを用意したい！」

「頻繁に説明ボックスを利用したい！」

という方は是非ここもやっておいてください。

いろんな説明ボックスをすぐ使えるので設定したほうがいいよ！（これも説明ボックスです）

まずはプラグインを有効にしてください。

プラグインのダウンロードは管理画面の左側でできます。

AddQuicktagの設定方法は以下の画像を参考にしつつ説明します。

赤い囲いにその説明ボックスの名前を記入する
オレンジ色の囲いの上部記入欄に『<div class=”box1″> <p>ここに文章</p>』と記入する。
（ボックス上部にタイトルがつくパターンの場合は『<div class=”box1″> <span class=”box-title”>ここにタイトル</span> <p>ここに文章</p>』と記入する。）※
オレンジ色の囲いの下部記入欄に『</div>』と記入する。（これは共通です）
緑色のチェックボックをクリックしてチェックを入れる

※”box1″のところは『Luxeritas』→『子テーマの編集』→『style.css』で『style.css』にコピペした時に入力した名前を入れてください。

以上です。

これで説明ボックスを使う準備ができました。