今回の記事は、

  • ワードプレスの文章を枠(ボックス)で囲みたい
  • ポイントやメリットをボックスとして表示したい

という方に向けた記事です。

文章を枠で囲むとメリハリがついて読みやすくなります。

例えば、上のように、ポイントやメリットをリスト上にしたり、ターゲティングをするときに使うと、何を伝えたい記事なのかを瞬時に把握できるため便利です。

この枠は、HTMLタグの追加でできるんですが、毎度、入力するのは面倒くさい。なので、プラグインを使って簡単にできる方法を見つけました。

今回は、そのプラグインと手順を紹介したいと思います。

枠のHTMLタグはコチラ

枠のHTMLタグは、以下のサイトを参考にしました。

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

上記のサイトは、枠のデザインが30個もあります。また、CSSへの追加方法やHTMLタグを紹介しているので、好みのものを選ぶといいでしょう。

なお、好みのデザインを選んだら、以下のプラグインをインストールして、設定を行うと便利に使えますよ。僕は今回、青色の枠をしたものを選びました。

青色の枠のタグです。
引用:https://saruwakakun.com/html-css/reference/box

使うプラグインは2つ

ワードプレスの文章を枠で囲むには、プラグインを使います。すると簡単に枠を作ることができます。枠を囲むためのプラグインは2つあります。

  • AddQuicktag
  • Simple Custom CSS

これらをインストールします。

そして各種設定を行えば、簡単に枠を追加できますよ。

なお、プラグインのインストールについては以下の記事を参考にしてください。

プラグインのインストール方法

プラグインをインストールする方法

では、これら2つのプラグインの設定方法を解説していきます。

AddQuicktagの設定方法

AddQuicktagをインストールしたら、ワードプレス管理画面の設定から「AddQuicktag」を選択します。

AddQuicktagを設定する

AddQuicktagの設定画面に移行したら、順番に入力していきましょう。

AddQuicktagの設定方法です。タグを入力します。

入力する箇所は、4箇所で、チェック項目が1箇所です(以下の画像を参照してください)。

  • ①と②は任意で名前を決めます。今回僕は「ボックス」として名付けました。
  • ③は、選んだHTMLタグの初めの部分を入力します。僕が選んだタグは「<div class=”box2″> 」ですので、③に入力しました。
  • 次に④は、先ほど選んだHTMLタグの最後の部分を入力します。僕は「</div>」と入力しました。
  • ⑤はチェックを入れてください。
  • ここまできたら⑥の「変更を保存」をクリックします。

以上で、AddQuicktagの設定は完了です。

次は、上で入力したタグを使うためのCSSの設定を行います。その前にプラグイン「Simple Custom CSS」はインストールしておいてください。

Simple Custom CSSの設定方法

Simple Custom CSSをインストールしたら、ワードプレスの管理画面の外観から「カスタム CSS」を選択します。

Simple Custom CSSの設定方法です。

次に、CSSを入力します。

Simple Custom CSSにCSSタグを入力します。

  • ①に選んだ枠のデザインのCSSを入力します。
  • ②の「カスタムCSSの更新」をクリックします。

以上で、Simple Custom CSSの設定は完了です。

実際に文章を枠で囲んでみる

2つのプラグインを設定したら、実際に文章を枠で囲んでみましょう。

やり方は簡単です。

まず、枠で囲みたい文章を指定し、メニューバーにある「Quicktags」をクリック、そして設定したものをクリックするだけです(僕の場合は「ボックス」)

実際に文章を枠で囲んでみる。

これだけで文章を枠で囲むことができます。

プラグインを2つ使って、設定を行えば、わざわざHTMLタグを入力しなくても、簡単に文章を枠で囲むことができます。

まとめ

いかがだったでしょうか。

プラグインを使えば、タグの入力なしに作業が時短できるのでおすすめです。本当に便利な設定ですので、文章を枠で囲みたい方は是非、実践してみてください。

関連記事はこちら