WordPress記事の書き方

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で枠をつけるときの改行について、
質問があったので追記いたします。

 

質問内容

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

「ここに文章を」とありますが、
文章を入力して改行するときに、
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メール』がおすすめです。
※お預かりした個人情報は厳重に管理し、プライバシーを遵守いたします。

POSTED COMMENT

  1. 松村晃 より:

    お世話になります。松村と申します。
    質問1.
    早速ですが例として枠その①についてですが「ここに文章を」とありますが、文章を入力して改行するときに、Enterキーをおしますと枠が2つに分割されるのを、ふせぐにはどうすればよろしいでしょうか?
    よろしくご指導ください。お願いします。2018.6.11

    • march より:

      松村さん、こんばんは。

      改行に関する説明が足らずに申し訳ありませんでした!
      質問の回答ですが、本記事にて解決法を追記致しましたので、そちらを参考にしていただければと思います。
      よろしくお願いいたします。

  2. たっきー より:

    こんにちは!

    多くの枠を紹介していただきありがとうございます。
    使い方もよくわかりました。

    今までフォントの色や大きさを変えてばかりだったので
    活用したいと思います!

    • march より:

      たっきーさん、こんにちは!
      枠を使うとブログ記事全体の良いアクセントになりますよね♪

  3. ケニーユウコ より:

    とっても素敵な囲み枠のコードをありがとうございました。早速、私の2つ運営しているHPの「新着情報」に使わせていただきました!ネットで枠コードを探していてこちらにたどり着きました。ブックマークもさせていいただきました。ただ見出しの「新着情報」の文字がPCではh1を選んでいるので大きめに反映されるのですが、携帯では何故は小さな文字に変わってしまうのが残念です。アドバイス頂けると嬉しいです。宜しくお願い致します。ユウコ
    myaustraliagoldcoast.com
    PCではキレイに反映しますが携帯では見出しが小さくなってしまうのです。
    myaustralia.jpn.com
    こちらのHPはPCではも携帯もキレイに反映します。ありがとうございました!

    • march より:

      ユウコさん、囲み枠の記事を参考にしてくださってありがとうございます。
      見出しタグ(hタグ)についてですが、こちらはお使いのWordPressテーマ(テンプレート)の設定によるところが大きいと思われるので、こちらでは解決策の指南をすることができません。
      なので、お使いのテーマのHPで問い合わせるか、ご自身で検索して解決するのが良いかと思われます。
      こちらの力不足で申し訳ありませんが、どうぞよろしくお願い致しますm(__)m

  4. かわの より:

    枠がスマホ画面にレスポンシブで対応するにはどうすればいいでしょうか?

    • march より:

      CSSで設定できると思いますが、質問の内容から察するに、レスポンシブ対応のテーマを使われるのが一番早くて簡単な解決方法だと思いますよ!

  5. kaho より:

    マーチさん 上手く囲みが出来なくてあきらめていたのですが、『うまく囲み枠のコピペが上手くいかない時の対処法』で対応したところ、ばっちりうまくいきました!!
    とてもわかりやすい説明だったのですぐに対応できました。
    今後もわからないところがあれば、マーチさんのコンテンツでご教示いただいて対応していきたいと思います。ありがとうございました!!

    • march より:

      kahoさん、いつもありがとうございます!
      かなり遅い返信になりましたが(汗)、
      参考になったみたいで良かったです!!

  6. Yuma より:

    助かりました!有名ブロガーになったら何らかの形で恩返しします!

  7. ちょこ より:

    ブログ初心者です。囲み枠できました!
    ありがとうございます!

  8. るみ より:

    初めまして。
    ”の全角と半角が違っていてできなかったことが初めてわかり、とても参考になりました!無事にできました。ありがとうございます!!
    改行のこともとても参考になりました^^

  9. ひろ より:

    マーチさん
    ブログ初心者です。以前から枠をつけたいと思ってましたが
    うまくいかず、本日、マーチさんの大変わかりやすい
    説明で作ることができました。ありがとうございます!

  10. かご より:

    はじめまして。
    最近ブログを始めたばかりで初歩から学んでいます。
    とても参考になる記事で助かりました!
    今日から使わせていただきます!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です