アメブロやはてなブログなどで使える見出し付き囲み枠!CSS不要でコピペだけのシンプルデザイン

アメブロや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などのサイトから簡単に探せます。

コピペのみで簡単に使えるので、是非ご利用ください!

スポンサーリンク
記事下広告
記事下広告

シェアする

フォローする

スポンサーリンク
記事下広告