アラフォーママのひきこもりblog

家庭学習・子育て・ブログ設定・お金

ブログ見出しの設定

ブログ初心者ですが、色々な設定はしてみたいミーハーです(笑)
web上で調べた事を、メモがわりに記録します。
本日は、見出しの設定です。

 

Hatena Blogの場合、HTMLのみ編集すれば表示されるようです。
以下、デザイン例とコードになります。

 

見出し

<p style="font-size: 1.5em;font-weight: bold;padding-top: .5em;padding-bottom: .5em;padding-left: .5em;margin-bottom: 2em;border-left: 20px solid #a83f9c;background-color: #f3e4f1;color: #772d6f;">見出し</p>

HTML編集で上記のコードを入れると
表示されます!

 

見出し

<p style="font-size: 1.5em;font-weight: bold;padding-top: .5em;padding-bottom: .5em;margin-bottom: 2em;border-bottom: solid 3px #111111;">見出し</p>

 

見出し

<p style="font-size: 1.5em;font-weight: bold;padding-top: .5em;padding-bottom: .5em;margin-bottom: 2em;border-bottom: dashed 2px #238264;color: #238264;">見出し</p>

 

見出し

<p style="font-size: 1.5em;font-weight: bold;padding-top: 1em;padding-bottom: 1em;margin-bottom: 2em;border-top: 3px solid #3f9613;border-bottom: 3px solid #409614;color: #409614;text-align: center;">見出し</p>

見出し

<p style="font-size: 1.5em;font-weight: bold;padding-top: .5em;padding-bottom: .5em;padding-left: .5em;margin-bottom: 2em;background-color: #e4b867;color: #ffffff;">見出し</p>

見出し

<p style="font-size: 1.5em;font-weight: bold;padding-left: .5em;background-color: #ebf4f6;padding-top: .5em;padding-bottom: .5em;margin-bottom: 2em;border-left: 5px solid #318496;border-bottom: 2px solid #cccccc;color: #318496;">見出し</p>

コピペで編集出来るので、是非試してみてください。 ちなみに、私も全くの初心者なので質問されてもわかりません‥(笑)