アメブロの記事で使える角が交差した井形の囲み枠(飾り枠)

アメブロの記事で使える角が交差した井形の囲み枠

アメブロの記事で使える「角が交差した井形の囲み枠」です。

シンプルですが、通常の単純な一本線による囲みとは違う、独特のインパクトがありますので、そのあたりを生かす使い方をすると効果的ではないかと思います。

また、色のバリエーションもいくつか作ってみましたので、もしも、気に入ったのがありましたら、ぜひ使ってみて下さい。

何れも、表示例とコードをセットで書いてありますので、コードの方をコピペでどうぞ。

なお、コピペのあとで、「■」を囲み枠の中に表示したい内容に書き換えてください。

角が交差した井形の囲み枠(赤)

■角が交差した井形の囲み枠(赤)
 
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px auto;padding:20px;background-size:2px 2px;background-position:9px 0,0 9px,right 9px top 0,left 0 bottom 9px;background-repeat:repeat-y,repeat-x,repeat-y,repeat-x;background-image:linear-gradient(#f00,#f00),linear-gradient(#f00,#f00),linear-gradient(#f00,#f00),linear-gradient(#f00,#f00);">■
&nbsp;</div>

角が交差した井形の囲み枠(緑)

■角が交差した井形の囲み枠(緑)
 
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px auto;padding:20px;background-size:2px 2px;background-position:9px 0,0 9px,right 9px top 0,left 0 bottom 9px;background-repeat:repeat-y,repeat-x,repeat-y,repeat-x;background-image:linear-gradient(#0c0,#0c0),linear-gradient(#0c0,#0c0),linear-gradient(#0c0,#0c0),linear-gradient(#0c0,#0c0);">■
&nbsp;</div>

角が交差した井形の囲み枠(青)

■角が交差した井形の囲み枠(青)
 
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px auto;padding:20px;background-size:2px 2px;background-position:9px 0,0 9px,right 9px top 0,left 0 bottom 9px;background-repeat:repeat-y,repeat-x,repeat-y,repeat-x;background-image:linear-gradient(#00f,#00f),linear-gradient(#00f,#00f),linear-gradient(#00f,#00f),linear-gradient(#00f,#00f);">■
&nbsp;</div>

角が交差した井形の囲み枠(ピンク)

■角が交差した井形の囲み枠(ピンク)
 
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px auto;padding:20px;background-size:2px 2px;background-position:9px 0,0 9px,right 9px top 0,left 0 bottom 9px;background-repeat:repeat-y,repeat-x,repeat-y,repeat-x;background-image:linear-gradient(#f6c,#f6c),linear-gradient(#f6c,#f6c),linear-gradient(#f6c,#f6c),linear-gradient(#f6c,#f6c);">■
&nbsp;</div>

角が交差した井形の囲み枠(オレンジ)

■角が交差した井形の囲み枠(オレンジ)
 
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px auto;padding:20px;background-size:2px 2px;background-position:9px 0,0 9px,right 9px top 0,left 0 bottom 9px;background-repeat:repeat-y,repeat-x,repeat-y,repeat-x;background-image:linear-gradient(#fc6,#fc6),linear-gradient(#fc6,#fc6),linear-gradient(#fc6,#fc6),linear-gradient(#fc6,#fc6);">■
&nbsp;</div>

角が交差した井形の囲み枠(グレー)

■角が交差した井形の囲み枠(グレー)
 
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px auto;padding:20px;background-size:2px 2px;background-position:9px 0,0 9px,right 9px top 0,left 0 bottom 9px;background-repeat:repeat-y,repeat-x,repeat-y,repeat-x;background-image:linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc),linear-gradient(#ccc,#ccc);">■
&nbsp;</div>

関連記事

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。