こんにちは。
『やさしいブログの作り方』の松田です。


見出し付きの囲み枠の作り方のアレンジバージョンです。^^



見出しが枠の上に乗るような表示になるので、より見出しっぽくなったかなと思います。^^


記事内に適用するには、「HTMLタグを表示」に切り替えてから下記のタグを貼り付けてください。(タグ編集エディタを使っている方はそのまま貼り付ければOKです。)

<div style="height:12px;"><span style="margin-left:10px; padding:6px 10px; background:#3b5998; color:#ffffff; font-weight:bold;border-radius:5px;">見出しタイトル</span></div><div style="border:2px solid #3b5998; padding:30px 15px 10px;border-radius:5px;">ここに文章を入れます
ここに文章を入れます
ここに文章を入れます</div>

「見出しタイトル」の所には見出しを入れるのですが、文字が長くなりすぎるとスマートフォンで見た時に2段に折り返されるので表示が崩れる場合があります。

なのでできれば10文字前後までの見出しにする方がいいですね。

#3b5998の部分にはご自身の好みのカラーコードを入れてください。



最後までお読みいただきありがとうございました。

6月1日、電子出版しました!

ブログを始めて3年。ブログを続けていてよかった、そんな気持ちを一人でも多くの人と共有したいと思っています。^^

AmazonのKindleストアにて好評販売中!
やさしいブログが教えてくれたこと