アメブロの記事で使えるシンプルな囲み枠です。

アメブロ以外でも使えますが、アメブロのAMPでの表示に配慮した作りになっていますので、アメブロ以外には役に立たないと思われる無駄なタグが入っています。

また、拙作Google Chrome拡張機能のアメケアのユーザーさま向けに、簡単に囲み枠のタグを登録できるようになっていますので、アメケアユーザーの方はお試しになってみて下さい。

§囲み枠(グレー)

まず、基本として地味なグレーの囲み枠から。

グレーの枠(#aaa)の中は、白背景(#fff)、黒文字(#333)となっています。

この囲み枠のタグは次のようになります(■の部分に囲み枠内の内容を書いて下さい)。

<div style="border:2px solid #aaa;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>

§その他の色の囲み枠

次に、上のグレーの囲み枠を基本に、すぐに使えるよう、枠線の色だけを変えたものをいくつかご紹介します。

何れも、表示例とコードをセットで書いてあります。

¶囲み枠(赤)

<div style="border:2px solid #f00;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>

¶囲み枠(オレンジ)

<div style="border:2px solid #f90;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>

¶囲み枠(緑)

<div style="border:2px solid #0c0;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>

¶囲み枠(水色)

<div style="border:2px solid #0cf;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>

¶囲み枠(青)

<div style="border:2px solid #03f;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>

¶囲み枠(ピンク)

<div style="border:2px solid #f0c;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>

¶囲み枠(紫)

<div style="border:2px solid #90c;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>

¶囲み枠(黒)

<div style="border:2px solid #000;background:#fff;color:#333;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>

§囲み枠の色を変えたい場合

もし、囲み枠の各所の色を好みで変えたいという場合は、以下のコード例を参考に、下線部(3箇所)で変えることができます。

<div style="border:2px solid #274a78;background:#eaf4fc;color:#0d0015;margin:1em auto;padding:10px;"><hr style="display:none">■<hr style="display:none"></div>

上記の例では、順番に、

・囲み … 青藍 #274a78
・背景 … 月白 #eaf4fc
・文字 … 漆黒 #0d0015

という設定になっています(色名はこちらで見ました)。

実際に表示するとこのような色の囲み枠になっています↓。

お好みに応じて、色んな色の囲み枠を作ってみてくださいね。

以上、アメブロの記事にコピペで使えるとてもシンプルな囲み枠の紹介をさせて頂きました。

関連記事

・スッキリ見やすいシンプルな見出し付き囲み枠
・アメブロの記事で使える 斜めストライプ模様の囲み枠(飾り枠)
・ワッペン風(リネン調)の囲み枠
・ワッペン風(デニム調)の囲み枠
・付箋風の囲み枠
・黒板風の囲み枠