WordPress記事の書き方 PR

WordPressで文章に囲み枠をつける方法をわかりやすく解説!

記事内に商品プロモーションを含む場合があります
人生好転マーチ無料メール講座バナー
 
 

※プレゼントは登録されたメールアドレス宛にご案内します。
※『@icloud.com』や携帯キャリアでのご登録はできません。
※新規アドレスは『Gmail』『Yahooメール』がおすすめです。
※お預かりした個人情報は厳重に管理し、プライバシーを遵守いたします。

WordPressで文章に囲み枠をつける方法のイラスト

 

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

 

WordPressで記事を書いていると、
色々と文字の装飾をしたくなりますよね。

文字の装飾については、
WordPressプラグイン
TinyMCE Advancedがあれば簡単にできます。

 

しかし、
記事内の文章に囲み枠をつけるには
HTMLタグによる記述が必要
なんですよね。

といっても、囲み枠は
コピペで簡単につけることができます。

 

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

 

コピペできるWordPress囲み枠が200以上!プラグインで簡単設定! ワードプレスで文字を線で囲みたいときは、 テキストモードにしてコードを書き込む必要があります。 以前、当ブログでは こ...

 

マーチ
マーチ
囲み枠は記事本文の重要なアクセントになるので、訪問者にとって読みやすい記事になるね!
ねこくん
ねこくん
囲み枠があると自然とそこに注目しますよね♪

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>

 

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

 

 

囲み枠のつけ方(基本)

 

まずは囲み枠をつける
基本の方法から行ってみましょう。

 

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

 

囲み枠のコードをコピー

 

矢印

 

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

 

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

 

矢印

 

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

 

囲み枠をつけたい場所

 

矢印

 

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

 

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

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

 

矢印

 

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

 

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

 

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

 

ねこくん
ねこくん
あれ…? うまくコピペできないんだけど…
マーチ
マーチ
テキストエディタにコピペする時に『”』が全角の『”』に誤変換されてることがあるみたいなんだ

対処法としては、
テキストエディタで全角の『”』となっているところを
手打ちで半角の『”』に直してもらうことになります。

 

詳しくは下の動画で解説しているので、
そちらを観ていただければと思います。

 

 

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

 

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

 

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

 

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

 

<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>

 

<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>

 

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

 

 

配色コードは⇒WEB色見本を参考にします。

 

 

ではこれから、
その変更手順について解説していきましょう。

 

 

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

 

テキストエディタに画面を変更 枠線のコードを変更

 

矢印

 

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

 

⇒WEB色見本

 

配色コードをコピー

 

今回は

『#ff00cc』

というコードをコピーしました。

 

矢印

 

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

 

配色コードを貼り付ける

 

矢印

 

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

 

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

 

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

 

 

マーチ
マーチ
枠線の色は1つに絞ると記事に統一感がでるよ

 

 

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

 

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

 

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

 

 

◆背景色の変更

 

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

 

<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>

 

<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: double 4px #99cc00; border-radius: 10px; word-break: break-all;">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></div>

 

枠その②

<div style=”background: #ffffea; padding: 15px; border: dotted 3px #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;">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></div>

 

枠その③

<div style=”background: #ffffff; padding: 10px; border: double 10px #0099ff;”>ここに文章</div>

 

<div style="background: #ffffff; padding: 10px; border: double 10px #0099ff;">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></div>

 

枠その④

<div style=”background: #ffffff; padding: 10px; border: ridge 10px #cccccc;”>ここに文章</div>

 

<div style="background: #ffffff; padding: 10px; border: ridge 10px #cccccc;">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></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: #ff9900; padding: 5px 10px; color: #ffffff;"><strong>見出しタイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #ff9900;">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></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="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;">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></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="display: inline-block; background: #3399ff; padding: 5px 10px; color: #ffffff;"><strong>見出しタイトル</strong></div>
<div style="background: #ffffff; padding: 10px; border: 2px solid #3399ff;">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></div>

 

枠その⑧

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

 

<div style="background: #eddbff; padding: 15px; border: 0px solid #99cc00; border-radius: 10px; word-break: break-all;">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></div>

 

枠その⑨

<div style=”background: #ffffe0 ; 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;">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></div>

 

枠その⑩

<div style=”background: #ffffea; padding: 15px; border: 4px inset #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;">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></div>

 

枠その⑪

<div style=”background: #ffeaff; padding: 10px; border: 5px inset #ff0066; border-radius: 30px; word-break: break-all;”>ここに文章</div>

 

<div style="background: #ffeaff; padding: 10px; border: 5px inset #ff0066; border-radius: 30px; word-break: break-all;">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></div>

 

 

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

 

 

コピペがうまくいかない時の対処法!

 

もしも枠が表示されない場合は

コピペをした際に『”』などの
半角記号が全角に変換されていないかチェック

してみてください!

 

 

詳しくは上の動画で『対処法を解説』しています。

 

あとは『テキストモード』ではなく、
ビジュアルモードになってるケースもあるかもしれません。

 

WordPress記事作成画面のテキストモード

 

その際はテキストモードのタブをクリックして、
囲み枠のコードを貼ってみてくださいね!

 

 

枠内で改行を行う場合(追記)

 

WordPressで枠をつけるときの改行について、
質問があったので追記いたします。

 

質問内容

例としてある『枠その①』について。

「ここに文章を」とありますが、
文章を入力して改行するときに、
Enterキーを押すと枠が2つに分割されてしまいます。

これを防ぐにはどうすればよろしいでしょうか?

 

 

たとえば『枠その①』の場合なら、

テキスト入力画面
「ここに文章」の箇所に

 

<p>&nbsp;</p>

 

を複数入力すれば改行できます。

 

<p>&nbsp;</p>は、
テキストモードで使う「改行タグ」のことですね。

ちなみに『枠その①』で改行×5を作る場合、
コードは次のようになります。

 

 

<div style="background: #ffffea; padding: 15px; border: double 4px #99cc00; border-radius: 10px; word-break: break-all;">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

 

 

※ダブルクォーテーション(”)が全角になる場合があるので、
その際は半角に打ち直してみてください(動画参照)。

他の枠についても、
テキスト入力画面にて同様に
改行タグをコピペしてみていただければと思います。

 

 

まとめ

 

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

 

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

 

ぜひ、今回の解説を参考にしながら、
自分好みの囲み枠を作ってみてくださいね!

 

ねこくん
ねこくん
箇条書きでポイントをまとめるときに囲み枠が役に立ちますね
マーチ
マーチ
囲み枠は補足説明や注意点にも使えるから万能だね

アクセスの集まる記事の書き方イメージ
アクセスの集まる記事の書き方 ここではアクセスの集まる 記事の書き方についてまとめています。 気になる項目をクリックしてくださいね!   わかり...

スポンサーリンク

人生好転マーチ無料メール講座バナー
 
 

※プレゼントは登録されたメールアドレス宛にご案内します。
※『@icloud.com』や携帯キャリアでのご登録はできません。
※新規アドレスは『Gmail』『Yahooメール』がおすすめです。
※お預かりした個人情報は厳重に管理し、プライバシーを遵守いたします。