【初心者向け】WordPressのめんどくさい装飾を簡単にする方法(枠で囲む)

枠で囲みたい

かいせつ
WordPressの記事を書くときに「カスタムHTML」を選択してHTMLコードを書くと下記のような装飾が可能となります。

いくつかの枠のパターンを下記で紹介します。

色を変えたい場合はソース内にある
<div style="・・・・　の後ろにあるコードを書き換えれば色が変わります。

(#ではじまる色コードについてはググってください。)
背景の色は・・・background: #ff80bb;　←ここではピンク
文字の色は・・・color: #ffffff; 　←ここでは白
枠線の色は・・・border: 2px solid #ff80bb; ここではピンク

見出し的なやつ

<div style="background: #ff80bb; padding: 5px 10px; color: #ffffff; border-radius: 10px 10px 0 0;">
<strong>見出しタイトル</strong></div>
<div style="background: #ffffea; padding: 10px; border: 2px solid #ff80bb; border-radius: 0 0 10px 10px;">
<p>ここにテキスト</p>
</div>

背景的なやつ1

<div style="background: #ffe6f1; padding: 15px; border: 0px solid #99cc00; border-radius: 10px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32); word-break: break-all;">
<p>ここにテキスト</p>
</div>

背景的なやつ2

<div style="background: #ffffea; padding: 15px; border: 1px solid #ff80bb; border-radius: 10px; word-break: break-all;">
<p>ここにテキスト</p>
</div>

背景的なやつ3

<div style="background: #ffffea; padding: 10px; border: dotted 3px #ff80bb; border-radius: 10px; word-break: break-all;">
<p>ここにテキスト</p>
</div>

背景的なやつ4

<div style="background: #ffffea; padding: 15px; border: double 4px #ff80bb; border-radius: 10px; word-break: break-all;">
<p>ここにテキスト</p>
</div>