今回は、WordPressで文章に囲み枠をつける方法をわかりやすく解説します。

 

WordPress(ワードプレス)で記事を書いていると、色々と文字の装飾をしたくなるものです。

文字の装飾については、WordPressプラグイン『TinyMCE Advanced』があれば簡単にできるのですが、実は記事内の文章に囲み枠をつけるにはHTMLタグによる記述が必要です。

 

といっても、囲み枠はコピペで簡単につけることができますし、簡単な囲み枠をつけるだけでも強調したい部分に装飾を施すことができるので積極的に使っていきたいものです。

ではこれから、WordPressで文章に囲み枠をつける方法と、コピペだけですぐに使える囲み枠のテンプレートコードを紹介していきましょう。

WordPressに囲み枠をつける方法

WordPressの囲み枠イメージ

記事内にある囲み枠と言えば、よく記事の注釈やお客様の声を掲載する時に使われていますよね。

囲み枠

 

記事に囲み枠を使いたい時は、”囲み枠用のhtmlコード”をテキストエディタに貼り付けることでビジュアルエディタに反映させることができます。

たとえば、下のような囲み枠を記事内で使いたい場合、以下のコードをテキストエディタにコピペすればOKです。

<div style=”background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>

 

では早速、上のコードを使いながら、順を追って解説していきましょう。

 

囲み枠のつけ方(基本)

①まずは上記枠内の囲み枠のコードをコピーしましょう。

囲み枠のコードをコピー

 

 

②テキストエディタに画面を切り替えましょう。

テキストエディタに画面を変更

 

 

③囲み枠をつけたい場所に入力カーソルを移動させます。

囲み枠をつけたい場所

 

 

④コピーしたコードを貼り付けた状態です。

コピーした囲み枠のコードを貼り付けた状態

 

囲み枠のコードがうまく貼れたら、再び『テキストエディタ』から『ビジュアルエディタ』に画面を切り替えましょう。

 

 

⑤うまく囲み枠が反映されてますね。

囲み枠がちゃんと表示されている状態

 

 

基本的な囲み枠のつけ方は以上です。

囲み枠のつけ方(テキストに合わせる)

基本的に囲み枠はレスポンシブ対応なので、自動的に画面サイズに調整されます。

ここでは囲み枠のサイズを画面に合わせるのではなく、テキスト(文章)の長さに合わせる方法について見ていきましょう。

 

通常、囲み枠を表示させるタグは以下のようなものでした。

<div style=”background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>

 

 

囲み枠をテキストに合わせる時は、『display:inline-block;』というコードを付け足します。

<div style=”display:inline-block;background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>

 

 

すると、以下のように枠の長さがテキストの長さに合うようになります。

ここに文章

 

 

非常に簡単なので、枠の長さが気になった方は参考にしてみてください。

枠線の色を変更する

ここでは枠線の色を変更してみましょう。

囲み枠の枠線の色を変えるには、以下の赤文字の部分『#◯◯◯◯◯◯』を好きな配色コードに変えればOKです。

<div style=”background: #ffffea; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>

 

 

実際にやってみましょう。

配色コードは⇒WEB色見本を参考にすると良いでしょう。

 

 

①上記の囲み枠コードをコピーして、テキストエディタに切り替えます。

テキストエディタに画面を変更

枠線のコードを変更

 

 

②WEB色見本から、好きな配色コードを選んでコピペします。

⇒WEB色見本

配色コードをコピー

今回は『#ff00cc』というコードをコピーしました。

 

 

③配色コードを貼り付けます。

配色コードを貼り付ける

 

 

④ビジュアルエディタで確認してみると、枠線の色が変更になっています。

枠線の色の変更が反映されている

 

 

以上が枠線の色の変え方となります。

背景色と枠線の太さの変更

背景色と枠線の太さは、コードの以下の部分を変更してテキストエディタに貼り付けます。

背景色と枠線の太さの変更

 

 

背景色の変更

<div style=”background: #e0ffe0; padding: 15px; border: 2px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>

 

 

枠線の太さの変更

<div style=”background: #ffffea; padding: 15px; border: 5px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>

 

 

ちなみにコードが意味は以下の通り。

 

padding:文字と枠の余白

border-radius:角の丸みの大きさ

 

すぐ横の数値を変えると効果が反映されるので、色々と試してみてくださいね。

使える囲み枠コードを紹介

使える囲み枠コード11選

ここではコピペだけで使える囲み枠コードを、幾つか紹介していきたいと思います。

 

枠その①
<div style=”background: #ffffea; padding: 15px; border: double 4px #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>
枠その②
<div style=”background: #ffffea; padding: 15px; border: dotted 3px #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>
枠その③
<div style=”background: #ffffff; padding: 10px; border: double 10px #0099ff;”>ここに文章</div>
枠その④
<div style=”background: #ffffff; padding: 10px; border: ridge 10px #cccccc;”>ここに文章</div>
枠その⑤
見出しタイトル
<div style=”background: #ff9900; padding: 5px 10px; color: #ffffff;”><strong>見出し文字</strong></div>
<div style=”background: #ffffff; padding: 10px; border: 2px solid #ff9900;”>ここに文章</div>
枠その⑥
見出しタイトル
<div style=”background: #ff6666; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;”><strong>見出しタイトル</strong></div>
<div style=”background: #ffffff; padding: 10px; border: 2px solid #ff6666; border-radius: 0 0 10px 10px;”>ここに文章</div>
枠その⑦
見出しタイトル
<div style=”display: inline-block; background: #3399ff; padding: 5px 10px; color: #ffffff;”><strong>見出しタイトル</strong></div>
<div style=”background: #ffffff; padding: 10px; border: 2px solid #3399ff;”>ここに文章</div>
枠その⑧
<div style=”background: #eddbff; padding: 15px; border: 0px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>
枠その⑨
<div style=”background: #ffffe0 ; padding: 15px; border: 0px solid #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>
枠その⑩
<div style=”background: #ffffea; padding: 15px; border: 4px inset #99cc00; border-radius: 10px; word-break: break-all;”>ここに文章</div>
枠その⑪
<div style=”background: #ffeaff; padding: 10px; border: 5px inset #ff0066; border-radius: 30px; word-break: break-all;”>ここに文章</div>

 

使用したい枠の中にあるコードをコピペすれば、そのまま同じ囲み枠を使うことができるので、記事作成の際にぜひ活用していただければと思います。

※もしもうまく枠が表示されない場合は、コピペをした際に『”(ダブルクォーテーション)』などの半角記号が自動で全角に変換されていないかチェックしてみてください。

まとめ

ということで、今回はWordPressで囲み枠を作る方法について解説してきました。

 

イマイチ記事がパッとしない時は、囲み枠をつけることで見た目が華やかになりますよ。

今回の解説を参考にしながら、色々と編集して自分好みの枠を作ってみてくださいね。