【初心者向け】記事内に囲み枠を入れる方法【WordPress】

記事を書いていくうえで、協調したい時に枠で囲みたいと思うことがあるかと思います。
実際に色々な方のブログを見ていると、重要な部分については囲み枠（囲い枠）を使用して見やすく工夫されている方が多いように感じます。
そこで、私も囲み枠を簡単に使えるように設定してみましたので、その方法をご紹介します。

今回用意したのは以下3種類の囲み枠です。
同時にコードも記載しておきますので、使用したい方はコピペして使用してください。

囲み枠のサンプル

①一本枠

コード
<div style=”border: 5px solid #ffa500; padding: 10px; border-radius: 0px; background: ##ffffff;”>ここに文字を入力</div>

②点線枠

コード
<div style=”border: 3px dashed #ffa500; padding: 10px; border-radius: 0px; background: ##ffffff;”>ここに文字を入力</div>

③タイトル付き囲み枠

コード
<div style=”height: 12px;”><span style=”background: #ffa500; padding: 6px 10px; border-radius: 5px; color: #ffffff; font-weight: bold; margin-left: 10px;”>□タイトル</span></div>
<div style=”padding: 30px 15px 10px; border-radius: 5px; border: 2px solid #ffa500;”>ここに文字を入力</div>

今回ご紹介しているのはいずれもオレンジ色になっていますが、色を変更したい場合はコード内の色コードを変更してください。（#から始まる7桁のコードです）
色コードの一覧についてはこちらのサイトをご覧ください。

使用方法

使用方法としては2種類ご紹介します。

① AddQuicktagを使用する
② 記事に直接書き込む

あまり多用しないという方であれば②でも良いかもしれませんが
①のAddQuicktagというプラグインを入れておくと
一度設定すれば直接書き込まなくてもボタンを押すだけで使用できるようになりますので、こちらをおすすめします。

①AddQuicktagを使用する

まずはプラグインのAddQuicktagをインストールし、有効にしてください。



その後、[設定]＜[AddQuicktag]より設定画面に入ります。



この画面で必要な設定は赤枠部のみになります。

このように設定し終えたら、ページ下部で設定を保存します。

そして投稿画面に行くと


このようなボタンが表示されていますので、先ほど設定したものをクリックすると以下のように表示されます。

あとは初期表示されているタイトル等を消して、実際に文字入力して終了です。

②記事に直接書き込む

こちらの方法は①と違い、使用する度に毎回ソースコードを書き込む必要があるのであまりおすすめしませんが、紹介します。

こちらのツールからソースコードエディタを呼び出します。

あとはエディタ内に直接ソースコードを入力して終わりです。
手順としては非常に簡単ですが、使用する度に毎回この手順を行う必要がありますので、プラグインで制御する方をおすすめします。

よろしければクリックお願いします(*´▽｀*)