アメブロやWordPress、はてなブログなどで、ブログ記事の「まとめ」や「お知らせ」に使える、見出し付き囲み枠をご紹介いたします。コピペだけで簡単に使えるので、是非ご利用ください。
シンプルな見出し付き囲み枠１
枠が1pxのシンプルな見出し付き囲み枠です。色を変更したい場合は「div style」内のカラーコード［#FF66FF］を変更、見出しタイトルの文字色を白以外に変更する場合は「span style」内の［#ffffff］変更してください。
↓タグはこちら
<div style="padding: 2px 10px; border: 1px solid #FF66FF; background: #FF66FF;"><span style="color: #ffffff; font-weight: bold;">見出しタイトル</span></div> <div style="border: 1px solid #FF66FF; padding: 10px;">ここに文章を記入してください。</div>
シンプルな見出し付き囲み枠２
枠を太く（2pxに）して、見出しタイトルの上下に少し余白を付けた見出し付き囲み枠です。
↓タグはこちら
<div style=" padding: 5px 10px; font-weight: bold; color: #fff; background:#FF3333; border:1px solid #FF3333;">見出しタイトル</div> <div style="border: 2px solid #FF3333; padding: 10px;">ここに文章を記入してください。</div>
コピペのみですぐ使えるようにシンプルな見出し付き囲み枠２の水色のバージョンも載せておきます。
↓タグはこちら
<div style=" padding: 5px 10px; font-weight: bold; color: #fff; background:#3399FF; border:1px solid #3399FF;">見出しタイトル</div> <div style="border: 2px solid #3399FF; padding: 10px;">ここに文章を記入してください。</div>
丸みを出した見出し付き囲み枠
角に丸みを付けたデザインです。
↓タグはこちら
<div style="padding: 5px 15px; font-weight: bold; border-radius: 10px 10px 0 0; color: #fff; background: #0066CC;">見出しタイトル</div> <div style="padding: 5px 15px; border-radius: 0 0 10px 10px; background: #fff; border: 2px solid #0066CC;">ここに文章を記入してください。</div>
「丸みを出した見出し付き囲み枠」のピンク色［カラーコード：#FF99CC］のバージョンも載せておきます。
↓タグはこちら
<div style="padding: 5px 15px; font-weight: bold; border-radius: 10px 10px 0 0; color: #fff; background: #FF99CC;">見出しタイトル</div> <div style="padding: 5px 15px; border-radius: 0 0 10px 10px; background: #fff; border: 2px solid #FF99CC;">ここに文章を記入してください。</div>
「丸みを出した見出し付き囲み枠」の黄緑色［カラーコード：#00FF66］のバージョンも載せておきます。
↓タグはこちら
<div style="padding: 5px 15px; font-weight: bold; border-radius: 10px 10px 0 0; color: #fff; background: #00FF66;">見出しタイトル</div> <div style="padding: 5px 15px; border-radius: 0 0 10px 10px; background: #fff; border: 2px solid #00FF66;">ここに文章を記入してください。</div>
見出しを強調したシンプルな見出し付き囲み枠
見出しを強調したタイプの見出し付き囲み枠です。設定している行間によっては「margin」の変更が必要になるのでご注意がください。
↓タグはこちら
<div style="height: 15px;"><span style="padding: 10px 10px; margin-left: 10px; border-radius: 5px; font-weight: bold; color: #fff; background: #f08080;">見出しタイトル</span></div> <div style="padding: 25px 12px 15px; border-radius: 5px; border: 2px solid #f08080;">ここに文章を記入してください。</div>
「見出しを強調したシンプルな見出し付き囲み枠」の水色［カラーコード：#00CCFF］のパターンです。
↓タグはこちら
<div style="height: 15px;"><span style="padding: 10px 10px; margin-left: 10px; border-radius: 5px; font-weight: bold; color: #fff; background: #00CCFF;">見出しタイトル</span></div> <div style="padding: 25px 12px 15px; border-radius: 5px; border: 2px solid #00CCFF;">ここに文章を記入してください。</div>
「見出しを強調したシンプルな見出し付き囲み枠」の黄緑色［カラーコード：#33FF66］のパターンです。
↓タグはこちら
<div style="height: 15px;"><span style="padding: 10px 10px; margin-left: 10px; border-radius: 5px; font-weight: bold; color: #fff; background: #33FF66;">見出しタイトル</span></div> <div style="padding: 25px 12px 15px; border-radius: 5px; border: 2px solid #33FF66;">ここに文章を記入してください。</div>
おわりに
アメブロやWordPress、はてなブログなどで、ブログ記事の「まとめ」や「お知らせ」に使える、見出し付き囲み枠をご紹介いたしました。
囲み枠の色を変更したい場合は、カラーコード（#＋6桁のコード）を変更してください。カラーコードは、原色大辞典やHtml Color Codesなどのサイトから簡単に探せます。
コピペのみで簡単に使えるので、是非ご利用ください！
コメント