WordPressで文章に囲み枠を作る方法!CSSをいじらずテキストエディタのみで作成する方法【コピペでOK】

WordPressで、囲み枠を作成する方法についてご紹介します。

 

Toshi

囲み枠を使って、その囲み枠の中に文章を作成する事で、記事が見やすくなるといった効果が期待できますね。

何も装飾がないデザインのサイトよりも、囲み枠をつける事で、自然と読者が見やすいようなサイトをつくる事もできます 

MEMO
 WordPressのテキストエディターに貼り付けコピーで完了です^^ 

目次

文章に囲み枠をつけるとはどういう事!?

 

グレーの立体感のある枠!!

囲み枠内に文字を入れる事ができます。これは、グレーの囲み枠です。

かっこいいグレーの枠!!

グレーの2重線の囲み枠です。
あなたにも簡単に文章の囲み枠が、作れちゃいます!!

ほかにも色々な囲み枠があるので、のちほど紹介します。

Toshi

サイトのアクセントに使ってね。

 

囲み枠を作成する方法は、3つほどあるかと思います。

  • CSSをいじって囲み枠を作成する
  • wordpressテーマに元々備わっている囲み枠を作成する(とても簡単)
  • テキストエディタにHTMLコードを張り付けて囲み枠を作成する(とても簡単⇒今回はこちらを紹介!)などでしょうかね。

しかし、CSSがよくわからない。とか、サイトデザインが崩れる可能性があるため、CSSをいじるのは怖い。という方もいるのではないでしうか??
デザイン崩れになるとサイトが上手く表示されない。といったリスクもあるので、結構こわいですよね。

よって、結論から話すと、、囲み枠を簡単に作成したいと考えている場合

・囲み枠などがテーマに備わっているWordpressテーマを使う
・もしくは、テキストエディタにコードを貼りつける。

この2つの方法が、安全で簡単に行える方法と言えます。

簡単に、コードをコピペして、テキストエディタにはることで枠ができますので、気になる方はチャレンジしてみてください。本当にすごーく簡単です。WordPress初心者でもできると思います。

Toshi

枠作りたいけど、よくわからん~。って人は参考にしてね。すぐにわかるようになりますから!あなたのサイトでもコピペして使ってみてください。難しく考える必要はなく、必要な個所に貼り付けコピーしてください。

 

WordPressテーマによっては、標準装備で囲み枠を簡単に装飾できるものもありますので、便利ですよ。
今回の記事では、CSSとか言った話ではないので、難しく考えなくて大丈夫です^^
簡単なので、ぜひためしてみてくださいね。

注意
 環境やお使いのブログテーマによっては、うまく枠ができないかもしれません。しかし、うまく枠ができないな~。という方はあとから後述する、注意点についてご参照ください。枠ができないという方も簡単な修正でできる可能性があります。 

では、紹介します。

囲み枠を作成する手順を画像で解説します!!

 『テキストエディタ』のみを使った囲み枠の作り方

すぐ完成しますよ。では、WordPressの『テキスト』をクリックしてください。

テキストエディタ

そして、下のように、これから説明する(※後述します)コードをそのまま張り付けコピーします。『ここに文字を入力』と書かれている部分に、文字を修正して利用していきます。

枠を作成するHTMLコード

次に、しっかり枠ができているかどうか、『ビジュアル』で確認します。

ビジュアルエディター

あら、不思議!
コードをコピペするだけで、こんな文字装飾が簡単にできました。

枠ができたか確認

(※この枠がでてこない時は、コードがすべてコピーして貼り付けているか再度確認してみてください。)

 

再度、手順をまとめると。

①WordPressのテキスト画面を開く。
②文面に『枠を作成できるコード』をそのまま張り付ける。
③ビジュアルで枠ができているか確認
④ビジュアル画面で、そのまま文字を修正し完成
といった流れでしょうか。

では、実際に『テキストに貼りつけるコード』を紹介していきます。

あなたのサイトデザインに合うものがみつかるといいですね。

(注意点:追記)枠がうまく表示されない時は、貼り付けしたあとにテキストコード内の⇒『”』をチェックしてください!全角になっている場合、半角にすべて修正すること!

さわやかさんより、コメントをいただきましたが、コードを貼り付ける時の注意点についてご紹介させていただきます。

テキストにコードを貼り付けをすると、コードの「”」の部分が全角になる事があるみたいです。
なので、あなたのブログで活用する時は、テキストにコードを貼り付けを行った際に、『”』が全角になっている箇所をすべて、半角に修正してください。

全角になっている場合は、うまく枠が作成できないかと思いますので、半角にする事で、表示できない。という問題については解決できるかと思いますので、必ずチェックしてくださいね~~~~

これでも、枠がうまくできないぜ~。という方は、しっかりコピーしているか、再度確認してみよう~!いろんな枠があるので、楽しんでな~。

枠のコード一覧を一挙ご紹介します!あなたのサイトでコピー&ペーストで活用してくださいな~

枠のコード一覧

オレンジ色の枠(背景なし)

シンプルな太文字の枠になります。

<div style=”border:5px solid #F90;padding:10px;border-radius:10px;”>ここに文章を記載する</div>

 

点線の枠になります。

<div style=”border:5px dashed #F90;padding:10px;border-radius:10px;”>ここに文章を記載する</div>

オレンジ色の枠(背景あり)

背景ありの枠になります。

<div style=”border:5px solid #F90;padding:10px;border-radius:10px;background:#FFDBA6;”>ここに文章を記載する</div>

 

背景ありの点線の枠になります。

<div style=”border:5px dashed #F90;padding:10px;border-radius:10px;background:#FFDBA6;”>ここに文章を記載する</div>

 

ピンク色の枠(背景なし)

シンプルの背景なしの枠になります。

<div style=”border:5px solid #F9F;padding:10px;border-radius:10px;”>ここに文章を記載する</div>
点線の背景なしの枠になります。
<div style=”border:5px dashed #F9F;padding:10px;border-radius:10px;”>ここに文章を記載する</div>

ピンク色の枠(背景あり)

背景ありのピンク枠になります。

<div style=”border:5px solid #F9F;padding:10px;border-radius:10px;background:#FFDBFF;”>ここに文章を記載する</div>

 

背景ありの点線のピンク枠になります。

<div style=”border:5px dashed #F9F;padding:10px;border-radius:10px;background:#FFDBFF;”>ここに文章を記載する</div>

グレー色の枠(背景なし)

グレーの背景なしの枠になります。

<div style=”border:5px solid #CCC;padding:10px;border-radius:10px;”>ここに文章を記載する</div>

 

グレーの背景なし点線の枠になります。

<div style=”border:5px dashed #CCC;padding:10px;border-radius:10px;”>ここに文章を記載する</div>

 

グレーの背景なし立体風の枠になります。

<div style=”border: 10px ridge #cccccc; padding: 10px;”>ここに文章を記載する</div>

 

グレーの背景なし2重線の枠になります。

<div style=”border: 5px double #cccccc; padding: 10px;”>ここに文章を記載する</div>

 

グレー色の枠(背景あり)

グレーの背景ありの枠になります。

<div style=”border:5px solid #CCC;padding:10px;border-radius:10px;background:#EEE;”>ここに文章を記載する</div>

 

グレーの背景ありの点線枠になります。

<div style=”border:5px dashed #CCC;padding:10px;border-radius:10px;background:#EEE;”>ここに文章を記載する</div>

赤色の枠(背景なし)

赤色の背景なしの枠になります。

<div style=”border:5px solid #F00;padding:10px;border-radius:10px;”>ここに文章を記載する</div>

 

赤枠の点線背景なしの枠になります。

<div style=”border:5px dashed #F00;padding:10px;border-radius:10px;”>ここに文章を記載する</div>

赤色の枠(背景あり)

赤色の背景ありの枠になります。

<div style=”border:5px solid #F00;padding:10px;border-radius:10px;background:#FFA6A6;”>ここに文章を記載する</div>

 

赤色の点線背景ありの枠になります。

<div style=”border:5px dashed #F00;padding:10px;border-radius:10px;background:#FFA6A6;”>ここに文章を記載する</div>

青色の枠(背景なし)

青色の背景なしの枠になります。
<div style=”border:5px solid #0CF;padding:10px;border-radius:10px;”>ここに文章を記載する</div>

 

青色の点線背景なしの枠になります。

<div style=”border:5px dashed #0CF;padding:10px;border-radius:10px;”>ここに文章を記載する</div>

 

青色の背景ありの枠になります。

<div style=”border:5px solid #0CF;padding:10px;border-radius:10px;background:#A6EDFF;”>ここに文章を記載する</div>

 

青色の点線背景ありの枠になります。

<div style=”border:5px dashed #0CF;padding:10px;border-radius:10px;background:#A6EDFF;”>ここに文章を記載する</div>

 

黒色の枠(背景あり)

黒色の背景ありの枠になります。

<div style=”border:5px solid #000;padding:10px;border-radius:10px;background:#A6A6A6;”>ここに文字を記載する</div>

 

黒色枠の点線背景ありの枠になります。

<div style=”border:5px dashed #000;padding:10px;border-radius:10px;background:#A6A6A6;”>ここに文字を記載する</div>

 

黒色枠の二重線背景ありの枠になります。

<div style=”border:10px double #000;padding:10px;border-radius:10px;background:#A6A6A6;”>ここに文字を記載する</div>

枠のグラデーションカラー1!(枠がピンクで背景がベージュの枠)

<div style=”background: #FDF6E3; padding: 15px; border: 4px inset #F08080; border-radius: 10px; word-break: break-all;”>ここに文章を記載する</div>

グラデーションカラー2!(枠が黒で背景がグレーの枠)

<div style=”background: #F1F1F1; padding: 15px; border: 4px inset #787878; border-radius: 10px; word-break: break-all;”>ここに文章を記載する</div>

背景色と枠が同じ色(ベージュ色)

<div style=”background: #F2EAD4; padding: 15px; border: 0px solid #F2EAD4; border-radius: 10px; word-break: break-all;”>ここに文章を記載</div>

背景色と枠が同じ色(ピンク色)

<div style=”background: #F08080; padding: 15px; border: 0px solid #F08080; border-radius: 10px; word-break: break-all;”>ここに文章を記載する</div>

背景色と枠が同じ色(グレー色)

<div style=”background: #F08080; padding: 15px; border: 0px solid #F08080; border-radius: 10px; word-break: break-all;”>ここに文章を記載する</div>

 

タイトル付きの枠(ピンク色)

ピンク色の見出しタイトルをつける事ができる(背景なしの枠でタイトルあり)
見出しタイトル

<div><span style=”background: #ff8c00; padding: 6px 10px; border-radius: 10px 10px 0 0; color: #ffffff; font-weight: bold; margin-left: 10px;”>見出しタイトル</span></div><div style=”padding: 10px; border-radius: 5px; border: 2px solid #ff8c00;”>囲み内の文章</div>

タイトル付きの枠(オレンジ色)

オレンジ色の見出しタイトルをつける事ができる(背景なし枠でタイトルあり)
見出しタイトル

<div style=”height: 12px;”><span style=”background: #f08080; 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 #f08080;”>囲み内の文章</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: #F7ED11; padding: 5px 10px; color: #ffffff;”><strong>見出しタイトル</strong></div>
<div style=”background: F7ED11; padding: 10px; border: 2px solid #F7ED11;”>囲み枠内に文章を入れる</div>

 

囲み枠の色を変更する方法

枠のスタイルが決まったら、次に枠の色を変えたい。という方もいるでしょう。

そんな時も簡単に色を変更する事ができますので、ぜひやってみてくださいね^^

例えば、オレンジ枠の色を、赤に変更したい。と思った場合の方法についてお伝えします。
(ちなみに赤だけではなく、どんな色にも変更が可能です。)

では、さっそくいってみましょう。まずは、黄色マーカー部分に注目してください。

<div style=”border:5px solid #F90;padding:10px;border-radius:10px;”>ここに文章を記載する</div>

上のコードをそのまま貼りつけコピーすると、オレンジ色の枠ができます。

これを赤の枠に変更したいと思っていたとすると、、、、以下を貼りつけすると、赤枠ができます。
修正した所といえば、【#~~】の部分だけですね。

なので、使用するスタイルが決まっていれば、あとは黄色マーカー部分の色(コード)を変更すれば、カラーが変更できる。という事になります。

<div style=”border:5px solid #ff3300;padding:10px;border-radius:10px;”>ここに文章を記載する</div>

では、色のコードはどこで取得できるのか??

Toshi

はい、簡単です!!

カラーコードの調べ方はここ(HTML COLOR CORD)で十分!


→カラーコード取得

ここから、カラーコードを調べる事ができます。
マウスを好きなカラー部分にあてるとカラーコードが上に表示されるので、そのまま好きなスタイルのカラーコードの部分に貼りつけをします。

※好きな枠スタイルとカラーコードが決まり、よく使う場合はwordかメモ、もしくはAdQuicktagに貼り付けしていつでも使用できるように、しておくと便利ですよ。

こうみてみると、枠をつくって色を変えてってやると、ちょっと無限大に活用方法がありますよね^^
CSSをいじりたくない。と思っている方はこの方法がとても楽に、安全に、囲み枠を作成する事ができますので、覚えておきましょう。

枠線の太さ、角の丸みの大きさ、余白の間隔、を変更する方法

次に、枠線の太さや、角の丸みの大きさ、余白の間隔を変更する方法についてお伝えします。

ここまでできるようになると、色々な幅やカスタマイズが広がります。

簡単なので、ぜひやってみましょう。

では、またオレンジ色の枠線で試してみたいと思います。

<div style=”border:5px solid #F90;padding:10px;border-radius:10px;”>ここに文章を記載する</div>

上のコードを貼りつけすると、そのままオレンジ枠ができます。

で次に、わかりやすくするために、「50px」に変更すると、以下こうなります(笑)
かなり大きいので、びっくりしないでくださいね。あくまでも例で紹介しています。

結構大きいですね。でも、サイトによっては、結構大きい枠を作りたい。という方もいると思うので紹介しておきます。

ドドン!ビックサイズ(笑)!

<div style=“border: 50px solid #F90; padding: 50px; border-radius: 50px;“> ここに文章を記載する </div>

 

ちょっと、わかりにくいと思うので、コードの説明をします。

かなり簡単に説明すると、以下の内容となっていますのでご確認ください。

border: 50px=枠線の太さが「50px」
padding: 50px=文字と枠の余白が「50px」
border-radius: 50px;角の丸みや大きさが「50px」

となります。

他のスタイルでも、サイズを変更する事ができますので、試してみてください。

CSSを使わず、コードのコピー&貼り付けをするだけなので、とても便利ですよね。
色々触ってみて、あなただけのオリジナルの枠を作ってみても面白いと思います。

addQuicktagでもっと便利に!!

addQuicktagというプラグインをご存じでしょうか??

addQuicktagは、WordPressのプラグインでとてもすぐれた機能があるプラグインなので、ここで紹介しておきます。

上で、紹介したコードを事前に登録しておくことで、次回からはボタン一つでショートコードの利用ができるようになります。下の別記事で紹介していますので、参考にしてみてください。

記事が参考になった!良かったという方はブックマークやシェアしてくれると嬉しいです!

記事が参考になったよ!枠が使えるようになったよ!やったぜ~。って方は、記事の一番下の、『はてブ』もしくは、記事をシェアしてくれると嬉しいです。

一人でも多くの方が、文章に囲み枠をいれてオシャレなサイトにしてもらえたらと思います。

Toshi

よろしくね~~!!

みんなのためになる記事コンテンツをどんどん配信していく予定でございます。

wordpressテーマによっては、初めから囲み枠が備わっているテーマもあります。

CSSをいじりたくない。テキストコードにも貼り付けコピーが面倒くさい。

といった場合は、元々囲み枠が備わっているwordpressテーマを使用する事をオススメします。
テーマによって枠のデザインや形が結構異なります。

わたしの以下の記事でもテーマを紹介していますので、参考にしてみてください。

SEOに効果のあるオススメのWordPressテーマ一覧!初心者が選ぶべき3つのポイントを紹介!

CSSを触りたくない。テキストコードの貼り付けが面倒。と考えている場合は、ショートコードをつかって簡単に作成する方法がオススメです!

まとめ

今回は、WordPressで文章に囲み枠を作る方法について解説しました!

CSSをいじる必要はないので、サイト崩れを心配する必要なく行えますね。『テキスト』のみで入力できる方法なので、とても便利です。よく使う、コードのみ、Wordかエディタなどに保存しておいてその都度使えるかなと思います。もしくは、Addquickにコードを登録していくことをオススメしますよ。

あなたのサイトで使えそうなのがあったら、コードをコピー&ペーストしてお使いください。
(記事のコピペは厳禁ですよ^^)

16 Comments

シン

ためになる情報ありがとうございます。

質問なのですが、
囲み枠の外のすぐ下の文章を
バランスよく配置する方法はありますか?
すぐ下にくっついてきてしうので・・・

返信する
西澤俊哉

シンさん コメントありがとうございます。サイト運営者の西澤です。
囲み枠の中の文章という事でしょうか??囲み枠の外(下)にかく文章でしょうか??
コードを張り付けて枠ができている事を確認できたら、「ビジュアルエディター」で、「shift」+「Enter」などで改行できないでしょうか??
いくつか改行する事で、枠のすぐ下に文章が表示されるという事は避けられると思います。試してみてくださいね^^

返信する
シン

囲み枠の中ではなく外です。
改行すると、かなり離れてしまうんです・・・。
もし改行しないと、ぴったりくっついてそれも変なので、
困っています。

返信する
西澤俊哉

ピッタリくっついてしまうか、離れてしまうかどちから何ですね。
もしくは、枠内で改行して少し枠を大きくしてみて、それで文字を入力したら良い位置にならないでしょうか。
よろしくお願いします。

返信する
みやび

役に立つ情報をありがとうございます。
とても素敵な枠なので是非使わせていただきたいのですが…

質問させていただいてよろしいでしょうか?

Siteoriginでページを作っていただき、最近は自分で編集をしていまして、文字を枠で囲もうとこのページの枠のタグをテキストモードで貼り付け、ビジュアルで見ると枠が表示されてなく、テキストに戻すとタグが消えています。
CSSを適用すれば良いとも聞きましたが設定が必要なのでしょうか?
あちこち見ましたが設定するところが見当たらず(・・;)
htmlタグを使用するにはどのようにしたら良いでしょうか?

ありがとうございますm(_ _)m

返信する
西澤俊哉

お問い合わせありがとうございます!!
サイト運営者の西澤と申します!
基本的には私の記事通り、テキスト→ビジュアルで確認して設定すれば、枠は簡単にできるとおもいます!
CSSをいじって編集することもできますが、デザインが崩れて画面が真っ白になったりするので、初心者の方には、オススメはしないです(T△T)
ご自身が利用されているwordpressテーマの運営しているサポートにお問い合わせしてみてはいかがでしょうか?
あとは、テキストエディタの文字入力が一つでも違っていたら反映されないと思うので、私の記事で紹介しているコピペの奴で、正しくはれているかトライしてみてください(^_^)よろしくお願いします。

返信する
しの

私も利用させていただきたいと思いましたが、こちらのページはコピペできない仕様になっています。

返信する
西澤俊哉

しのさん ご連絡ありがとうございます。プラグインをはずしているので、コピーは可能かと思いますが、いかがでしょうか?自分のブログでご活用ください!

返信する
しの

ご返信いただきましてありがとうございます。
現在もコピーはできないようです。
他のサイトを探して事なきを得ましたが、他にもコピペできない方がいらっしゃるのではないかと思い、念のためご連絡させていただきました。

返信する
西澤俊哉

しのさん ご連絡ありがとうございました。コピー防止プラグインをそのまま有効にしたままでした( ;∀;)多分他の方もコピーできなかったと思います。
お手数をおかけして申し訳ありません。そして、丁寧にご連絡いただき、ありがとうございました!

返信する
みゆき

超参考になる情報、ありがとうございます!!
なのですが、、、このとおり、コピペしているのですが、なぜか、枠線が表示されません。
どんな原因が考えられるでしょうか?

返信する
西澤俊哉

みゆきさん 連絡が遅くなりすいません。どの枠線も表示されないですかね?
ドメインを取得してサーバーに設置して、テーマ導入してWordPressを利用していますか?
コピペで枠をのせる事が可能かと思いますが、何か他のものをお使いでしょうか?

返信する

コメントを残す

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