アメブロやWordPress、はてなブログなどで、ブログ記事の「まとめ」や「お知らせ」に使える、見出し付き囲み枠をご紹介いたします。コピペだけで簡単に使えるので、是非ご利用ください。
シンプルな見出し付き囲み枠1
枠が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>
シンプルな見出し付き囲み枠2
枠を太く(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>
コピペのみですぐ使えるようにシンプルな見出し付き囲み枠2の水色のバージョンも載せておきます。
↓タグはこちら
<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などのサイトから簡単に探せます。
コピペのみで簡単に使えるので、是非ご利用ください!
コメント