文文章を簡単に囲む
ワードプレスでブログを書いていて この部分の文章を目立たせたいなと思った時に使える
【文章の周りを線で囲む】ボックスのやり方を紹介いたします。
この上の画像も実は、囲み枠で設定して表示させています。
枠（ボックス）の中に枠（ボックス）をセットすると、こんなこともできちゃうんです♪
このやり方はまた別の記事にします(^^)/
この記事ではプラグインもCSSも使iいません。
「テキスト」エディタと「ビジュアル」エディタの切り替えが出来ればOKです。
この赤丸で囲った「テキスト」エディタをクリックして、私のコピペ文を張り付けた後
今度は「ビジュアル」をクリックして「ビジュアル」エディタに戻って、文章を加工して終了です♪
| 追記 上に表示してある白いステッチの枠の記事を作成いたしました。
興味がある方はどうぞ♪ >>>ワードプレス【wordpress】文章を囲み枠（ボックス）で可愛く装飾♪コピペOK |
まず初めに例として、文章を点線の囲み枠で囲むやり方を紹介します。
プラグインを追加してもいいよという方には、プラグインを使用しての囲み枠作成をお勧めします(^^)/
こちらの方が手間がかかりません♪
>>>【wordpress】プラグインを使って簡単に文章を囲み枠（ボックス）で装飾♪
準備：文章の囲み枠【ボックス】で使用したい色のコードを確認しておく
文章の囲み枠を何色にするのか。
私が選んだ色でOKならコピペでいいのですが、もし違う色がいいという時に、色のコードが必要になります。
使いやすい色と色コードの一覧の記事を作成いたしました。
その記事中にwordpressでの色と色コードの検索の仕方も紹介してあります。
必要なかたは、確認しておいてください。
>>>【wordpress】文章の囲み枠で必要になる色のコードまとめ♪
ワードプレス【wordpress】点線の囲み枠【ボックス】で文章を囲む
これが一番使うことが多いかなと思います。
1 ここに文字を入力する。
2 こんな感じに書いていくことが出来ます。
ビジュアルエディタで書いていると思いますので、画面右上の「テキスト」をクリックしてください。
「テキスト」エディタにした後、囲みたい文章の場所に下のコピペ文を張り付けてください。
ワードプレス【wordpress】点線で文章の囲み枠【ボックス】のコピペ文
<!-----------------＜コピーはここから＞-------------------->
<div style="padding: 10px; margin-bottom: 10px; border:2px dotted #ccc; border-radius:10px; width: 50%;" >
1 ここに文字を入力する 。
2 こんな感じに書いていくことが出来ます。
</div>
<!------------------------------------------------------->ワードプレス【wordpress】点線で文章の囲み枠【ボックス】のコピペ文の説明
ワードプレス囲み枠【ボックス】囲む線と文字との空きを指定
padding: 10px;
margin-bottom: 10px;
枠線の外の空白の指定になります。
枠線とその下にある文章との空間を指定しています。
数字が大きくなると枠と枠外の文字との空間があいていきます。
数字を変更してみて、自分の希望のサイズにカスタマイズしてください。
ワードプレス囲み枠【ボックス】枠線の幅を指定
border: 3px
ワードプレス囲み枠【ボックス】枠線の種類と色を指定
dotted #ccc;
ワードプレス囲み枠【ボックス】枠線の角の指定
border-radius:10px;
枠線の角を丸くする指定です。これは border-radius:50px; にしてみました。
このように数字が大きくなるほど角が丸くなります。
ワードプレス囲み枠【ボックス】枠線の幅を指定
width: 80%;
ワードプレス囲み枠【ボックス】表示位置を指定する
コピペ文には、表示位置の指定文は入っていません。
何も指定しない時は左揃えになっています。
指定したい時は、コピペ文の前と後ろにコピペしてください。
前にコピペ
<div align=”center”>
後ろにコピペ
</div>
ワードプレス【wordpress】文章の囲み枠【ボックス】の種類/説明とコピペ文
ワードプレス囲み枠【ボックス】実線の囲み枠で文章を囲む
solid
”dotted”を”solid”に変更すると実線になります。
<!-----------------＜コピーはここから＞-------------------->
<div style="padding: 10px; margin-bottom: 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: 10px; margin-bottom: 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: 10px; margin-bottom: 10px; border: 3px double #ccc; border-radius: 10px; width: 80%;">
”dotted”を”double”に変更すると二重線になります。
</div>
<!------------------------------------------------------->ワードプレス立体的に窪んだ線の囲み枠【ボックス】で文章を囲む
groove
”dotted”を”groove”に変更すると立体的に窪んだ線になります。
<!-----------------＜コピーはここから＞-------------------->
<div style="padding: 10px; margin-bottom: 10px; border: 8px groove #ccc; border-radius: 10px; width: 80%;">
”dotted”を”groove”に変更すると立体的に窪んだ線になります。
</div>
<!------------------------------------------------------->ワードプレス立体的に隆起した線の囲み枠【ボックス】で文章を囲む
ridge
”dotted”を”ridge”に変更すると立体的に隆起した線になります。
>/div>
<!-----------------＜コピーはここから＞-------------------->
<div style="padding: 10px; margin-bottom: 10px; border: 8px ridge #ccc; border-radius: 10px; width: 80%;">
”dotted”を”ridge”に変更すると立体的に隆起した線になります。
</div>
<!------------------------------------------------------->ワードプレス文章の囲み枠【ボックス】その他
窪んで見えるinset/背景に色を付けないボーダー囲み枠
上と左のボーダーが暗く、下と右のボーダーが明るく表示されます。
ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。
<!-----------------＜コピーはここから＞-------------------->
<div style="padding: 10px; margin-bottom: 10px; border: 8px inset #ccc; border-radius: 10px; width: 80%;">
上と左のボーダーが暗く、下と右のボーダーが明るく表示されます。
ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。
</div>
<!------------------------------------------------------->窪んで見えるinset/背景に色を付けたボーダー囲み枠
赤の窪んだボーダー囲み枠
赤バージョンです。
<!-----------------＜コピーはここから＞-------------------->
<div style="padding: 10px; margin-bottom: 10px; border: 12px inset #bf1b1b; border-radius: 10px; width: 80%; background-color: #fa6180;">
<span style="color: #ffffff;">赤バージョンです。</span>
</div>
<!-------------------------------------------------------->隆起してみえるoutset/背景に色を付けないボーダー囲み枠
上と左のボーダーが明るく、下と右のボーダーが暗く表示されます。
ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。
<!-----------------＜コピーはここから＞-------------------->
<div style="padding: 10px; margin-bottom: 10px; border: 8px outset #ccc; border-radius: 10px; width: 80%;">
上と左のボーダーが明るく、下と右のボーダーが暗く表示されます。
ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。
</div>
<!-------------------------------------------------------->隆起してみえるoutset/背景に色を付けた隆起したボーダー囲み枠
赤の隆起したボーダー囲み枠
赤バージョンです。
<!-----------------＜コピーはここから＞-------------------->
<div style="padding: 10px; margin-bottom: 10px; border: 12px outset #bf1b1b; border-radius: 10px; width: 80%; background-color: #ab021e;">
<span style="color: #ffffff;">赤バージョンです。</span>
</div>
<!------------------------------------------------------->ワードプレス四角い点線で囲み枠
dashed
四角い点線で表示されます。<!-----------------＜コピーはここから＞-------------------->
<div style="padding: 10px; margin-bottom: 10px; border: 8px dashed #ccc; border-radius: 10px; width: 80%;">
破線で表示されます。
</div>
<!------------------------------------------------------->四角い点線で中に色を付けるバージョン
グレーの四角い点線で囲み枠
グレーの四角い点線で背景を薄いグレーにしてみました。
<!-----------------＜コピーはここから＞-------------------->
<div style="padding: 10px; margin-bottom: 10px; border: 8px dashed #ccc; border-radius: 10px; width: 80%; background-color: #dcdcdc;">
グレーの四角い点線で背景を薄いグレーにしてみました。
</div>
<!------------------------------------------------------------>赤の丸い点線で囲み枠
赤の丸い点線で背景を薄い赤にしてみました。
<!-----------------＜コピーはここから＞-------------------->
<div style="padding: 10px; margin-bottom: 10px; border: 8px dashed #bd0921; border-radius: 10px; width: 80%; background-color: #f5e6e6;">
赤の破線で背景を薄い赤にしてみました。
</div>
<!------------------------------------------------------------>赤の四角い点線で囲み枠
赤の四角い点線で背景を薄い赤にしてみました。
<!-----------------＜コピーはここから＞-------------------->
<div style="padding: 10px; margin-bottom: 10px; border: 10px dotted #bd0921; border-radius: 10px; width: 80%; background-color: #f5e6e6;">
赤の破線で背景を薄い赤にしてみました。
</div>
<!------------------------------------------------------------>ワードプレス【wordpress】文章を囲み枠【ボックス】で装飾する簡単なやり方を紹介♪のまとめ
HTMLのコードをコピペして使えるのですが、ちょこっと注意が(￣▽￣;)
それは削除するときです。
削除するときも、「テキスト」を表示させて、記入したコードを削除してください。
「ビジュアル」では削除がうまくいかない場合があります。
2020/7/3 背景色を付けたコピペ文を一つだけ追加しませた(￣▽￣;)
これからboxの例文を増やしていきます(^^♪
プラグインを使った囲み枠を使いたいなという方はどうぞ♪
>>>【wordpress】プラグインを使って簡単に文章を囲み枠で装飾♪コピペOK
>>>ブログ装飾しましょ♪囲み枠＆トリミング
この記事は、画像加工や囲み枠についての記事をまとめて紹介+追加方法の記事になります。
HTMLのみで画像を枠で囲む方法は追加情報として記載しました(^^♪
/Decoration/TOOL/そらのまなびぶろぐ/THE THOR/AFEREIT/
