コピペOK★WordPress【ワードプレス】文章を囲み枠で装飾♪HTML編

文章を自分の好きなスタイルで装飾したいなと思った方にむけて、HTMLでの装飾について紹介します。

ビジュアルエディタでコピペで使用します。

これなら初心者さんでも簡単♪

この記事はコピペして使いましょう！！

ではなく、

コピペのコードを自分の好きなスタイル、好きな色に自分でコードを再度コピペで変更して使用する手順を初心者向けに紹介しています。

☆コードの使用は自己責任でお願いいたします。

wordpressクラシックエディタ囲み枠のコードをコピペする場所

この赤丸で囲ってある「＜＞（HTMLを挿入）」を使用します。

wordpressブロックエディタにHTML挿入のアイコンがない

クラシックエディタに「HTML挿入」のアイコンが表示されていない場合は、プラグインを入れてエディタを拡張してください。

私が使用している拡張プラグインは「Advanced Editor Tools」です。

下の記事で詳しく紹介していますので参考にして「＜＞コード」をエディタに追加してください。

＞＞＞【THE THOR】クラシックエディタの使い方を初心者さん向けに紹介♪

文章の囲み枠【ボックス】で使用したい色のコードを確認しておく

文章の囲み枠を何色にするのか。

私が選んだ色でOKならコピペでいいのですが、もし違う色がいいという時に、色のコードが必要になります。

必要なかたは、確認しておいてください。

＞＞＞カラーコードまとめ＆ クラシックエディタで コードを取得

ワードプレス【wordpress】囲み枠の練習

<div style=”padding: 10px; margin: 10px; border:2px dotted #ccc; border-radius:10px;　width: 50%;” >黒文字黒の点線</div>

<div style=”padding: 10px; margin: 10px; border:2px dotted #ccc; border-radius:10px;　width: 50%;” ><p>変更しました</p></div>

この文をコピーして、表示させたい行をクリックします。

次に「＜＞」をクリックしてコピーしたコードを貼り付け「OK」をクリックしてください。

<center><div style=”padding: 10px; margin: 10px; border: 2px dotted #cccccc; border-radius: 10px; width: 50%; text-align: left;”><p>変更しました</p></div></center>

ワードプレス【wordpress】点線で文章の囲み枠【ボックス】のコピペ文の説明

ここでは練習で使用したコードをカスタマイズする為の説明をします。

ワードプレス囲み枠【ボックス】囲む線と文字との空きを指定

padding: 20px;

枠線の中の空白の指定です。

線と文字との空間を指定しています。

数字が大きくなると、文字と枠との空間があいていきます。

数字を変更してみて、自分の希望のサイズにカスタマイズしてください。

margin: 10px;

枠線の外の空白の指定になります。

枠線で囲った文章と、上下左右の文章との空間を指定しています。

数字が大きくなると、枠と枠外の文字との空間があいていきます。

数字を変更してみて、自分の希望のサイズにカスタマイズしてください。

ワードプレス文章の囲み枠【ボックス】枠線の太さを指定

border: 3px

線の幅を指定しています。

お好みの線幅にしてみてください。

ワードプレス文章の文章の囲み枠【ボックス】枠線の種類と色を指定

dotted #ccc;

”dotted ”は点線を指定するときに使用します。

#ccc　は省略形で薄いグレーの時に使用します。
（正式な16進数表記だと　＃CCCCCC　になります）

ワードプレス文章の囲み枠【ボックス】の幅を指定

width: 80%;

これは枠線の横幅になります。

数字が大きくなるほど広がります。

ワードプレス【wordpress】文章の囲み枠【ボックス】の種類/説明とコピペ文

ワードプレス囲み枠【ボックス】文章に背景を付ける

————————ワードプレス枠コピペ文———————–

<div style=”padding: 20px; margin: 10px; border-radius: 10px; background-color: #f0f0f0;”><p>背景色あり（薄いピンク）</p></div>

————————————————————————————-

ワードプレス囲み枠【ボックス】実線の囲み枠で文章を囲む

———————-ワードプレス枠コピペ文————————-

<div style=”padding: 20px; margin: 10px; border: 3px solid #ccc; border-radius: 10px; width:80%;”><p>”dotted”を”solid”に変更すると実線になります。</p></div>

————————————————————————————-

ワードプレス影付き囲み枠【ボックス】実線の囲み枠で文章を囲む

————————ワードプレス枠コピペ文———————–

<div style=”padding: 20px; margin: 10px; border: 3px solid #f7cfc1;background-color: #fff0e8; border-radius: 10px; width: 80%; box-shadow: 3px 3px 3px #eddcd3;”><p>枠に影を追加してあります。</p></div>

————————————————————————-

ワードプレス二重線の囲み枠【ボックス】で文章を囲む

———————ワードプレス枠コピペ文————————-

<div style=”padding: 20px; margin: 10px; border: 15px double #cc6633; border-radius: 10px; “><p>”dotted”を”double”に変更すると二重線になります。</p></div>

————————————————————————

ワードプレス2色の囲み枠【ボックス】で文章を囲む

————————ワードプレス枠コピペ文ここから———————-

<div style=”padding: 20px; margin: 10px; border: 20px groove #ffd2b8; border-radius: 10px; “><p>”dotted”を”groove”に変更すると立体的に窪んだ線になります。</p></div>

———————————————————————————

———————-ワードプレス枠コピペ文ここから————————

<div style=”padding: 20px; margin: 10px; border: 20px ridge #fff0e6; border-radius: 10px;background-color: #f5ddd5;”><p>”dotted”を”ridge”に変更すると左上から光が当たっている立体的な枠になります。</p></div>

———————————————————————————

ワードプレス文章の囲み枠【ボックス】その他

———————–ワードプレス枠コピペ文ここから———————–

<div style=”padding: 20px; margin: 10px; border: 10px inset #f5ddd5; border-radius: 10px;background-color: #fffbf7;”>上と左のボーダーが暗く、下と右のボーダーが明るく表示されます。ボーダーで囲まれた領域全体が立体的に窪んだように表示されます</div>

———————————————————————————

コピペOK★Wordpress【ワードプレス】文章を囲み枠で装飾♪HTML編のまとめ

2026.1.29  大幅に修正しました。今回は「テキスト」エディタの使用もしないので、もっと簡単になったと思います。

この方法だと、「テキスト」エディタでコードを見ると、打ったコードと違って表示されています。

え？と思った方、大丈夫です♪　プレビューで確認してください。

心配な方は、テキストエディタにコピペ文をコピペして使用してください。

20211/01/25　背景色のみの囲み枠を追加しました。

2020/7/3　背景色を付けたコピペ文を一つだけ追加しませた(￣▽￣;)

ランキングサイトに登録していますのでクリックしていただけると嬉しいです(^^♪