アメブロの記事で使える囲み枠(飾り枠) シンプル

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

囲み枠(グレー)

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


■囲み枠(グレー)
 


グレーの枠(#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

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

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


■囲み枠(カスタム例)
 


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

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

関連記事

 

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

コメントを残す

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