アメブロカスタム「見出し装飾～自分でプチアレンジ編～」

一昨日、昨日とPC版でしか表示できない見出しのこと書きました。

が、やっぱり見出しはスマホ版でも見やすくないと、ですね

アメブロ、スマホ版でもCSS編集できる日も期待しつつ今日は、スマホ表示でもPC表示でも同じように装飾できる「HTML表示」に書き込む見出しを自分でちょっとアレンジして使う方法についてお話ししてみます。

見出し装飾～自分でプチアレンジ編～

　この見出しですが、

ネットで最初に見つけた時は確か「モノトーン」でした。

こんな感じ

「色」と「下線のデザイン」を変えた訳です。

▼元の設定

<div style="font-size: 1.2em; font-weight: bold; color: #666666; border-left: 7px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; margin: 0 0 1.5em; padding: 0.2em 0.8em;">★★★好きな言葉★★★</div>

▼ピンクでドット下線の設定

<div style="font-size: 1.2em; font-weight: bold; color: #5C4747; border-left: 7px solid #F9B8CD; border-bottom: 3px dotted #F9B8CD; margin: 0 0 1.5em; padding: 0.2em 0.8em;">★★★好きな言葉★★★</div>

「元の設定」と「ピンクでドット下線の設定」では、赤い字の部分が違います。

色を変更する場合