アメブロの記事で使える スッキリ見やすいシンプルな見出し付き囲み枠

アメブロの記事で使える、スッキリと見やすいシンプルな見出し(タイトル)付きの囲み枠を作ってみました。

色のバリエーションもいくつか作りましたので、もしかすると、ご自身のアメブロの雰囲気にあったものがあるかもしれませんよ。

今回も、タグも一緒にご紹介しますので、コピペで使って頂ければと思います。

【ご注意】最新版エディタをお使いの場合は、コピーしたものを直接HTMLとして貼り付けると文字化けしておかしくなるようです。一度メモ帳などを経由するか、Google Chromeの「プレーンテキストとして貼り付ける」機能などをご利用下さい。

シンプルな見出し付き囲み枠(赤)

まず、赤からご紹介します。

本当の真っ赤(#FF0000)ではなく、少し濃い(暗めの)赤になっています。

★タイトル★
■囲み枠の中に書く内容■
 
 

↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。

<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #cc0000;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>

シンプルな見出し付き囲み枠(緑)

次は、緑です。

こちらも少し濃い緑になっています。

★タイトル★
■囲み枠の中に書く内容■
 
 

↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。

<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #008800;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>

シンプルな見出し付き囲み枠(青)

次は、青です。

やはり濃い青にしてあります。

★タイトル★
■囲み枠の中に書く内容■
 
 

↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。

<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #0000aa;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>

シンプルな見出し付き囲み枠(ピンク)

そして、ピンクです。

こちらは、蛍光ピンクのようなハッキリとした色です。

★タイトル★
■囲み枠の中に書く内容■
 
 

↑この囲み枠のタグは次のようになります(★の部分に見出し、■の部分に囲み枠の中の内容を書きます)。

<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #ff0066;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>

シンプルな見出し付き囲み枠(その他の色)

最後に、お好みの色にする方法もご紹介します。

色コードを1か所変えるだけなので簡単だと思います。

★タイトル★
■囲み枠の中に書く内容■
 
 
<div style="padding:0;margin:15px auto;width:auto;max-width:400px;color:#333;background:#fff;border:1px solid #ccc;border-top:3px solid #000000;box-shadow:4px 4px 8px #ddd"><div style="padding:6px 9px;font-weight:bold;background:#f7f7f7;border-bottom:1px dotted #ccc;">★</div><div style="padding:15px">■</div></div>

ご自分で色を決めたいときは、上記タグの「#000000」の部分を、希望の色の色コードに設定しなおして下さい。

色コードは、こちらのWEB色見本のサイト様が参考になると思います。

また、400pxの部分を変更すると枠の幅も変更することができますので、こちらも合わせて設定してみてください。

例えば「none」にすると、記事幅いっぱいに広げることができます。

もちろん、★の部分に見出し、■の部分に囲み枠の中の内容を書くのは同じです。

以上、アメブロの記事にコピペで使える、スッキリと見やすいシンプルな見出し付き囲み枠を紹介をさせて頂きました。

もしよかったら試してみてください。

関連記事

 

気に入って頂けたらフォローお願いします

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です