アメブロの記事で使えるかぎかっこ風の囲み枠(飾り枠)

アメブロの記事で使えるカギ括風の囲み枠

アメブロの記事で使える「カギ括弧風の囲み枠」です。

囲んだ範囲の左上と右下にカギ括弧を付けたような効果になります。

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

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

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

カギ括風の囲み枠(赤)

■カギ括風の囲み枠(赤)
 
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin:15px auto;padding:20px;margin:15px auto;padding:15px;background-repeat:no-repeat;background-position:left top,left top,right bottom,right bottom;background-size:40px 2px,2px 40px,40px 2px,2px 40px;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:15px;background-repeat:no-repeat;background-position:left top,left top,right bottom,right bottom;background-size:40px 2px,2px 40px,40px 2px,2px 40px;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:15px;background-repeat:no-repeat;background-position:left top,left top,right bottom,right bottom;background-size:40px 2px,2px 40px,40px 2px,2px 40px;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:15px;background-repeat:no-repeat;background-position:left top,left top,right bottom,right bottom;background-size:40px 2px,2px 40px,40px 2px,2px 40px;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:15px;background-repeat:no-repeat;background-position:left top,left top,right bottom,right bottom;background-size:40px 2px,2px 40px,40px 2px,2px 40px;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:15px;background-repeat:no-repeat;background-position:left top,left top,right bottom,right bottom;background-size:40px 2px,2px 40px,40px 2px,2px 40px;background-image:linear-gradient(#333,#333),linear-gradient(#333,#333),linear-gradient(#333,#333),linear-gradient(#333,#333);">■
&nbsp;</div>

関連記事

コメントを残す

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

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