【囲み枠コード】ワードプレス記事内の文章を枠で囲み背景色を付ける方法

ワードプレス記事内の文章を枠で囲み背景色を付けたのを
見かけられたことはないだろうか？

なんかプラグインなんかでチャチャとできそうな
気がしませんか？

夢見るファンタジー思考で調べてみましたが
どうもできそうにありません(笑)

地味に囲み枠コードで囲むしかなさそうです。

囲み枠コードの基本型

【囲み枠コード】

<div style="padding: 16px; border: solid 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">ここに文章を入力します。</div>

上記コードは下記になります。

一般的に使うとしたら文字を原色に近い色で囲み
背景色は囲んだ色よりトーンを落とすみたいな感じが
多いのではないでしょうか？

色コードも地味に合わすしかありません。

Web色見本原色大辞典はこちら

参考サイトはこちら（青色 – color-sample.com）

囲み枠コードのborderは枠の種類です。
border: solidは一般的な枠(実線)になります。

これをborder: doubleにしてみます（二重線）

<div style="padding: 16px; border: double 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;">ここに文章を入力します。</div>

二重線に変わりました。

その他にも

●dotted(点線)

●dashed(幅広の点線)

●none(無し)

●border-radiusは枠の角を丸くする記述です。数値を上げることでより丸みが出ます。角があったほうが良い方は消してください。

●background-colorは背景色です。

●margin-topとmargin-bottomは枠の余白部分の幅になります。

特殊な囲み枠コードもあります。

<div style="border: 10px outset #cccccc; padding: 10px; background: #ffffff;">囲みの中の文章</div>

色々研究されるとサイトにメリハリがつき訪問者も楽しめるのでは
ないでしょうか？

 

Affiliate AZ club(AAC)無料メルマガ

メルマガの詳細を確認する