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

• ワードプレスの文章の囲み枠(ボックス)を簡単に使いたい
• ワードプレスの文章を自分好みのボックスで装飾したい
• ワードプレスのブロックエディタで囲み枠(ボックス)ってどうするの？

上の画像はアイキャッチ画像ではありません(￣▽￣;)
文章に囲み枠のHTMLコードを追加して表示させています♪

この記事ではワードプレスでブログを書いていて　この部分の文章を目立たせたいなと思った時に簡単に使えるコードと、コードをコピペする場所を紹介します(^^♪

この記事ではプラグインもCSSも使いません。

クラシックエディタを使用している場合は「テキスト」エディタと「ビジュアル」エディタの切り替えが出来ればOKです。

wordpressクラシックエディタの文章を囲み枠で装飾♪

「テキスト」タブをクリックして、私のコピペ文を張り付けた後「ビジュアル」タブをクリックして戻って終了です♪

wordpressブロックエディタの文章を囲み枠で装飾♪

この記事にきさいしてあるHTMLを使っての枠での装飾はブロックの「クラシック」スタイルを使用して装飾します。
ブロックエディタでHTMLで装飾する場合、まず、ブロックエディタを拡張します。

エディタの拡張は下の記事で紹介していますのでどうぞ♪
≫THE THOR(ザ・トール）クラシックエディタを拡張♪ページ内リンク作成

タイトルに「クラシックエディタ」とありますが、ブロックエディタの「クラシック」スタイルもここで設定ができるようになります。

拡張した後に、「クラシック」スタイルの「ソースコード」機能を使って文章を囲み枠で装飾します。
「ソースコード」がクラシックエディタの「テキスト」にあたります。

wordpressブロックエディタで文章を囲むのはCSSが簡単

興味がある方は下の記事を参考にしてください♪
＞＞＞THE THOR(ザ・トール)【ブロックエディタ】囲み枠で装飾♪CSS使用

☆

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

文章の囲み枠を何色にするのか。
私が選んだ色でOKならコピペでいいのですが、もし違う色がいいという時に、色のコードが必要になります。

必要なかたは、確認しておいてください。
≫【wordpress】文章の囲み枠で必要になる色のコードまとめ♪

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

これが一番使うことが多いかなと思います。

ビジュアルエディタで書いていると思いますので、画面右上の「テキスト」をクリックしてください。

「テキスト」エディタにした後、囲みたい文章の場所に下のコピペ文を張り付けてください。

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

<div style=”padding: 10px; margin: 10px; border:2px dotted #ccc; border-radius:10px;　width: 50%;” >
1　ここに文字を入力する 。
2　こんな感じに書いていくことが出来ます。
</div>

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

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

padding: 20px;

枠線の中の空白の指定です。
線と文字との空間を指定しています。
数字が大きくなると、文字と枠との空間があいていきます。
数字を変更してみて、自分の希望のサイズにカスタマイズしてください。

margin: 10px;

枠線の外の空白の指定になります。
枠線で囲った文章と、上下左右の文章との空間を指定しています。
数字が大きくなると、枠と枠外の文字との空間があいていきます。
数字を変更してみて、自分の希望のサイズにカスタマイズしてください。

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

border: 3px

線の幅を指定しています。
お好みの線幅にしてみてください。

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

dotted #ccc;

”dotted ”は点線を指定するときに使用します。
通常その後ろに色指定をします。
#ccc　は省略形で薄いグレーの時に使用します。
（正式な16進数表記だと　＃CCCCCC　になります）

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

border-radius:10px;

枠線の角を丸くする指定です。
これは　border-radius:50px;　にしてみました。
このように数字が大きくなるほど角が丸くなります。

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

width: 80%;

これは枠線の横幅になります。
数字が大きくなるほど広がります。

ワードプレス囲み枠【ボックス】表示位置を指定する

コピペ文には、表示位置の指定文は入っていません。
何も指定しない時は左揃えになっています。
指定したい時は、コピペ文の前に<div align=”center”>、後ろに</div>と、囲み枠のコピペ文をはさんでください。

前にコピペ

<div align=”center”>

後ろにコピペ

</div>

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

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

ピンク

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

<div style=”padding: 20px; margin: 10px; border-radius: 10px; background-color: #f0f0f0;”>
ピンクバージョンです。
囲み枠線をなくして、背景にピンク色を付けます。
私の記事でよく使っているコードになります(^^♪
色は好きな色コードに変更して使用してください
</div>

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

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

solid

”dotted”を”solid”に変更すると実線になります。

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

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

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

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

”dotted”を”solid”に変更すると実線になります。

box-shadow: 3px 3px 3px
この文が影の水平方向への長さ、垂直方向への長さ、ほがしの長さの指定になります。

rgba(0, 0, 0, 0.2);
これで影の色指定をしています。

>>>【wordpress】文章の囲み枠で必要になる色のコードまとめ♪

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

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

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

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

double

”dotted”を”double”に変更すると二重線になります。

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

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

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

ワードプレス立体的に窪んだ線の囲み枠【ボックス】で文章を囲む

groove

”dotted”を”groove”に変更すると立体的に窪んだ線になります。

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

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

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

ワードプレス立体的に隆起した線の囲み枠【ボックス】で文章を囲む

ridge

”dotted”を”ridge”に変更すると立体的に隆起した線になります。

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

<div style=”padding: 20px; margin: 10px; border: 20px ridge pink; border-radius: 10px;>
”dotted”を”ridge”に変更すると立体的に隆起した線になります。
</div>

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

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

窪んで？見えるinset/背景に色を付けないボーダー囲み枠

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

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

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

窪んで見えるinset/背景に色を付けたボーダー囲み枠

赤の窪んだボーダー囲み枠

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

<div style=”padding: 20px; margin: 10px; border: 12px inset #bf1b1b; border-radius: 10px;background-color: #a11d1d;”> <span style=”color: #ffffff;”>赤バージョンです。</span>
</div>

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

ワードプレス点線で囲み枠

dashed

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

<div style=”padding: 20px; margin: 10px; border: 8px dashed #ccc; border-radius: 10px;”>
破線で表示されます。
</div>

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

点線で中に色を付けるバージョン

グレーの四角い点線で囲み枠

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

<div style=”padding: 20px; margin: 10px; border: 8px dashed #ccc; border-radius: 10px; background-color: #dcdcdc;”>
グレーの四角い点線で背景を薄いグレーにしてみました。
</div>

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

赤の丸い点線で囲み枠

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

<div style=”padding: 10px; margin-bottom: 10px; border: 10px dashed pink; border-radius: 10px; background-color: #f5e6e6;”> ピンクの破線で背景を薄い赤にしてみました。
</div>

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

dotted

赤の丸い点線で囲み枠

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

<div style=”padding: 10px; margin-bottom: 10px; border: 10px dotted #bd0921; border-radius: 10px; background-color: #f5e6e6;”> 赤の破線で背景を薄い赤にしてみました。
</div>

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

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

HTMLのコードをコピペして使えるのですが、ちょこっと注意が(￣▽￣;)
それは削除するときです。
「ビジュアル」では削除がうまくいかない場合があります。
削除するときも、「テキスト」か「ソースコード」を表示させて、記入したコードを削除してください。

2020/7/3　背景色を付けたコピペ文を一つだけ追加しませた(￣▽￣;)
20211/01/25　背景色のみの囲み枠を追加しました。

毎回コードをコピペするのが面倒な方はプラグインを使った方法をおすすめします♪
プラグインでコードを保存して、エディタで呼び出して使用する方法です(^^♪
興味がある方は下の記事を参考にしてみてください。

>>>【wordpress】プラグインを使って簡単に文章を囲み枠で装飾♪コピペOK

>>>目次へ戻る

画像加工や囲み枠についての記事をまとめて紹介+追加方法の記事になります。
>>>ブログ装飾しましょ♪囲み枠＆トリミング

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