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

こんにちわ。Toshiです。
今回は、WordPressを使って、文章に囲み枠を作成する方法についてご紹介します。

Toshi

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

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


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

目次

文章に囲み枠をつけるとは、こういう事です!!

 

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

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

Toshi

あんな枠、こんな枠、色々つくってみてください

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

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

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

Toshi

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

 

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

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


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

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

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

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

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

Toshi

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

こちらの方法も面倒だ。という方は、WordPressテーマによっては、標準装備で囲み枠を簡単に装飾できるものもありますので、便利ですよ。

今回の記事では、CSSとか言った話ではないので、難しく考えなくて大丈夫です^^

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

では、紹介します。

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

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

すぐ完成しますよ。では、WordPressの投稿画面をひらいて、テキスト・ビジュアルのうち、『テキスト』をクリックしてください。

テキストエディタ

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

枠を作成するHTMLコード

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

ビジュアルエディター

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

枠ができたか確認

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

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

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

といった流れでしょうか。

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

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

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

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

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

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

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

【追記:2019年11月28日】有料noteで45個の【囲み枠のコード】すべてを紹介しています。コピー&ペーストですぐに使えます。

すぐに、コピペして使えますので、よろしければ、以下のリンクよりジャンプお願いします。
noteにリンクしています。

 

noteで紹介

参考 【初心者向け】WordPressで文章に囲み枠をつくる方法【全45枠のコード】note

いままで無料で公開していましたが、枠のカラーコードを、さらに増量させてバージョンアップして表示しています。

【45個】の文章囲み枠のコード一覧を【有料note】で一挙ご紹介しています!

枠のコード一覧

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

シンプルで活用しやすいオレンジ色の枠になります。
非常にシンプルで使いやすい実線です。

ここに文章を記載する

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

シンプルなオレンジ色の点線の枠になります。
こちらは点線。

ここに文章を記載する

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

枠がオレンジで、背景もオレンジです。
実線です。

ここに文章を記載する

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

枠がオレンジで、背景もオレンジです。
点線の枠です。

ここに文章を記載する

黄色の囲み枠(背景あり)

黄色の枠で、背景はさらにやわらかい黄色をつかった枠です。

ここに文章を記載する

黄色の囲み枠(背景あり)

黄色の枠で、点線の枠です。

ここに文章を記載する

赤色の囲み枠(背景あり)

赤色の囲み枠になります。枠が赤で、背景を少しやわらかい色にしています。

ここに文章を記載する

赤色の囲み枠(背景あり)

赤色の囲み枠になります。枠が赤の点線にしています。
ここに文章を記載する

 

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

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

ここに文章を記載する

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

点線になります。
ここに文章を記載する

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

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

ここに文章を記載する

 

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

ここに文章を記載する

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

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

ここに文章を記載する

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

点線になります。

ここに文章を記載する

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

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

ここに文章を記載する

 

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

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

ここに文章を記載する

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

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

ここに文章を記載する

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

グレーの背景ありの枠です。

ここに文章を記載する

赤色の枠(背景なし)

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

ここに文章を記載する

赤枠の点線(背景なし)

点線の赤枠になります。

ここに文章を記載する

赤色の枠(背景あり)

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

ここに文章を記載する

赤色の枠(背景あり)

点線になります。

ここに文章を記載する

青色の枠(背景なし)

シンプルな青の枠になります。
ここに文章を記載する

青色の枠(背景なし)

シンプルな点線の枠です。

ここに文章を記載する

青色の枠(背景あり)

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

ここに文章を記載する

青色の枠(背景あり)

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

ここに文章を記載する

黒色の枠(背景あり)

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

ここに文字を記載する

黒色の枠(背景あり)

点線の枠になります。

ここに文字を記載する

黒色の二重線の枠(背景あり)

二重線の黒枠に、グレーの背景です。

ここに文字を記載する

枠のグラデーションカラー①

こちらは、グラデーションカラーをつかったものです。枠はピンク~茶色、背景はベージュです。

ここに文章を記載する

枠のグラデーションカラー②

黒とベージュのグラデーションカラーです。

ここに文章を記載する

枠マットタイプのカラー(ベージュ色)

シンプルなマットタイプの枠です。

ここに文章を記載

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

シンプルなマットタイプの枠です。

ここに文章を記載する

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

シンプルなマットタイプのグレーカラーです。

ここに文章を記載する

茶色の枠(背景あり)

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

ここに文章を記載する

茶色の枠(背景あり。)

点線になります。

ここに文章を記載する

緑色の枠(背景あり)

緑色の枠で背景はやや青の色になります。

ここに文章を記載する

青色の枠(背景あり)

青色の枠で、背景も淡い青色になります。

ここに文章を記載する

緑色の枠(背景あり)

緑色の枠で、さらに背景も違う緑のカラーです。

ここに文章を記載する

紫色の枠(背景あり)

紫色の枠に、背景も違う色のむらさき色をいれています。

ここに文章を記載する

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

オレンジ色の枠に背景も違うオレンジ色をつかっています。

ここに文章を記載する

ピンク色の見出しタイトルをつける枠(背景なし)

ピンク色の見出しタイトルをつける事ができる枠です。
見出しタイトル

囲み内の文章

オレンジ色の見出しタイトルをつける枠(背景なし)

オレンジ色の見出しタイトルをつける事ができる枠です。
見出しタイトル

囲み内の文章

 

青色の見出しタイトルをつける枠(背景なし)

青色の見出しタイトルをつける事ができる枠です。

見出しタイトル
囲み内に文章を入れる

タイトル付きの枠(背景なし)

黄色の見出しタイトルをつける事ができる枠です

見出しタイトル
囲み枠内に文章を入れる

 

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

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

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

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

では、さっそくいってみましょう。まずは、黄色マーカー部分に注目してください。(noteで詳しく方法を紹介しています。)

枠コードの中に、
solid #F90といったものがあります。⇒コードの#以降の所を変更するだけで色の変更が可能です。

オレンジ色の枠を、赤色に変更したい。。。。

そんな場合、どうするか。。。
修正する場所といえば、#~の部分だけです。

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

枠のコードの中の、
solid 
#ff330をにするだけで、赤のカラーに変更する事ができます。

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

Toshi

はい、簡単です!!

カラーコードのサイトで一発で調べることができます。

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


→カラーコード取得

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

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

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

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

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

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

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

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

枠のコードの中に、
・border:5px solid
・;padding:10px
・border-radius:10px
と記載している箇所があります。

 

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

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

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

border: 50px
・padding: 50px
border-radius: 50px

 

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

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

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

となります。

ここの部分を自分なりに調整して、枠線の太さの調整、文字と枠の余白の調整、角の丸みや大きさの調整など、をして、自分だけのオリジナル囲み枠を作成してみてください。

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

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

有料noteで、上のコードをすべて紹介しています!

有料noteでは、上で紹介した全部で45枠をすべて紹介しています。
実際に、自分で枠を作成して、カラーを変更するだけで、自分なりにカスタマイズした囲み枠をWordPressで使う事ができます。

noteで紹介!

参考 【初心者向け】WordPressで文章に囲み枠をつくる方法【全45枠のコード】note

手軽かつ、一発で表示させる事ができるので、ぜひチャレンジしてみてください。

addQuicktagのプラグインでコードを一発で表示させる方法!

addQuicktagというプラグインをご存じでしょうか??addQuicktagは、WordPressのプラグインでとてもすぐれた機能があるプラグインなので、ここで紹介しておきます。

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

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

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

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

Toshi

よろしくね~~!!

 

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

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

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

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

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

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

まとめ

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

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

21 Comments

シン

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

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

返信する
西澤俊哉

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

返信する
シン

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

返信する
西澤俊哉

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

返信する
みやび

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

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

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

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

返信する
西澤俊哉

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

返信する
しの

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

返信する
西澤俊哉

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

返信する
しの

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

返信する
西澤俊哉

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

返信する
みゆき

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

返信する
西澤俊哉

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

返信する
toshi

コメントありがとうござます。
自社のWEBサイトでぜひ、ご活用ください^^
コンテンツで生かせる記事をどんどん作成していく予定ですので、時々遊びにきてください^^

返信する
ひじり

勉強になりました。
ありがとうございます。
ちなみになんですが、「背景色と枠が同じ色(グレー色)」のコードをなんですが、background-colorが「背景色と枠が同じ色(グレー色)」と同じになっているような気がします。ご確認お願いします。

返信する
ゆういち

参考になる情報を掲載いただき、本当にありがとうございます。
質問なのですが、枠の幅を狭くするにはどうしたらいいでしょうか?
お忙しいとは思いますが、教えてください。
よろしくお願いいたします。

返信する
toshi

ゆういちさん連絡が遅くなりました。ご連絡ありがとうございます。
border:5px の数字を1とかにすると枠幅が細くなります。逆に50pxにすると、記事にかいてあるように太くなります。試してみてください。

返信する

コメントを残す

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