アメブロの記事で使える 斜めストライプ模様の囲み枠(飾り枠)

斜めストライプ模様の囲み枠

CSSを使った斜めストライプ模様の囲み枠を作ってみました。

アメブロの記事で使えるようにと思って作ったものですが、画像を使っていませんので、アメブロ以外でも使えると思います。

いつものように、タグも一緒に書いておきますので、よかったらコピペでご利用下さい。

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

斜めストライプ模様の囲み枠(ブルーグレー)

まず、ブルーグレーっぽい色の斜めストライプ模様の囲み枠です。

斜めストライプの囲み枠

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

<div style="background-size:24px 24px;background-color:#456;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>

斜めストライプ模様の囲み枠(赤)

次は、赤い斜めストライプ模様の囲み枠です

斜めストライプの囲み枠

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

<div style="background-size:24px 24px;background-color:#f00;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>

斜めストライプ模様の囲み枠(赤)

次に、オレンジ色の斜めストライプ模様の囲み枠です

斜めストライプの囲み枠

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

<div style="background-size:24px 24px;background-color:#f90;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>

斜めストライプ模様の囲み枠(ピンク)

そして、ピンクの斜めストライプ模様の囲み枠です

斜めストライプの囲み枠

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

<div style="background-size:24px 24px;background-color:#f6c;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>

自分で色を決めたい場合

最後に、自分で色を決めたい場合について少し説明を書いておきます。

簡単に色を変えられるように作りましたので、初心者でも大丈夫だと思います。

<div style="background-size:24px 24px;background-color:#000000;padding:10px;border-radius:10px;background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,0.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0.25) 75%,transparent 75%,transparent);"><div style="color:#333;background:#fff;padding:10px;border-radius:5px;">★</div></div>

好みの色の囲み枠を作りたいときは、上記タグの「#000000」の部分を、希望の色の色コードに設定しなおして下さい。

すると、「設定した色と、その色をもう少し明るくした色の2色」の斜めストライプ模様の囲み枠ができます。

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

以上、アメブロの記事にコピペで使える斜めストライプ模様の囲み枠の紹介をさせて頂きました。

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

関連記事

 

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

コメントを残す

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