未分類

【初心者向け】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>

-未分類

Copyright© TABLE STATION , 2021 All Rights Reserved.