こんにちは。
『やさしいブログの作り方』の松田です。
見出し付きの囲み枠の作り方のアレンジバージョンです。^^
見出しが枠の上に乗るような表示になるので、より見出しっぽくなったかなと思います。^^
記事内に適用するには、「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日、電子出版しました!