ワードプレス【wordpress】文章をボックスで装飾♪簡単なやり方コピペOK


文章を簡単に囲む

ワードプレスでブログを書いていて この部分の文章を目立たせたいなと思った時に使える

【文章の周りを線で囲む】ボックスのやり方を紹介いたします。


この上の画像も実は、囲み枠で設定して表示させています。

枠(ボックス)の中に枠(ボックス)をセットすると、こんなこともできちゃうんです♪

このやり方はまた別の記事にします(^^)/

この記事ではプラグインも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;

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

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

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”に変更すると実線になります。

<!—————–<コピーはここから>——————–>

<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 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>

<!————————————————————>

outset

上と左のボーダーが明るく、下と右のボーダーが暗く表示されます。
ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。

<!—————–<コピーはここから>——————–>

<div style=”padding: 10px; margin-bottom: 10px; border: 8px outset #ccc; border-radius: 10px; width: 80%;”>

上と左のボーダーが明るく、下と右のボーダーが暗く表示されます。
ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。

</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>

<!————————————————————>

 

ワードプレス【wordpress】文章を囲み枠【ボックス】で装飾する簡単なやり方を紹介♪のまとめ

HTMLのコードをコピペして使えるのですが、ちょこっと注意が( ̄▽ ̄;)

それは削除するときです。

削除するときも、「テキスト」を表示させて、記入したコードを削除してください。

「ビジュアル」では削除がうまくいかない場合があります。

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

これからboxの例文を増やしていきます(^^♪


 

ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪


人気ブログランキング

私が個人でAmazonアソシエイトに応募して落ちましたが、「もしもアフェリエイト」を通して申請したら合格しました。

もしもから申請をお勧めします♪

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。

ここもおすすめ♪

/TOP/