アメブロ記事内に囲い込み枠のcssは、沢山公開されていますが…
チョット個性的なのが欲しい!と言う人向けに集めてみました。需要はあるかどうかはわかりませんが
スマホでの「使用不可タグ」も多いのですが、ここで紹介する「囲い込み枠」は問題ありません。
直接本文に「コピペ」に貼り付けてもらえれば大丈夫です。直接コードを書き込みますのでタグ編集エディタの 【HTML】表示にしてコピペしてください。
色を変更する場合、#(ショープ)で始まる半角英数字【例】#f9f9f9 を変える必要がありますが、変更する場合カラーコード表を参照くださいな。
タイトル付き囲い込み枠
見出しタイトル
囲い込み内本文1
改行
コピペ用コード
<div style="margin: 2em 0.3em; background: #f9f9f9; box-shadow: 0 1px 4px gray">
<div style="font-size: 1.2em; background: #ff7c79; padding: 7px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.1em;">見出しタイトル</div>
<p style="padding: 10px;">囲い込み内本文<br>
改行</p></div>
見出しタイトル
囲い込み内本文
改行
コピペ用コード
<div style="margin: 2em 0.3em; background: #f9f9f9; box-shadow: 0 1px 4px gray">
<div style="font-size: 1.2em; background: #00a4d6; padding: 7px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.1em;">見出しタイトル</div>
<p style="padding: 10px;">囲い込み内本文<br>
改行</p></div>
見出しタイトル
囲い込み内本文
改行
コピペ用コード
<div style="margin: 2em 0.3em; background: #f9f9f9; box-shadow: 0 1px 4px gray">
<div style="font-size: 1.2em; background: #737373; padding: 7px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.1em;">見出しタイトル</div>
<p style="padding: 10px;">囲い込み内本文<br>
改行</p></div>
囲い込み枠グラデーション
囲い込み内本文
改行
コピペ用コード
<div style="box-sizing: border-box; border: 10px solid transparent; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(#fff, #fff), linear-gradient(#ffb3c0, #eb3257);">
<p style="padding: 10px;">囲い込み内本文<br>
改行</p></div>
囲い込み内本文
改行
コピペ用コード
<div style="box-sizing: border-box; border: 10px solid transparent; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(#fff, #fff), linear-gradient(#a2d0ff, #007efd);">
<p style="padding: 10px;">囲い込み内本文<br>
改行</p></div>
囲い込み内本文
改行
コピペ用コード
<div style="box-sizing: border-box; border: 10px solid transparent; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(#fff, #fff), linear-gradient(#ffffb0, #eeee00);">
<p style="padding: 10px;">囲い込み内本文<br>
改行</p></div>
囲い込み内グラデーション
囲い込み内本文
改行
コピペ用コード
<div style="margin: 2em 0; padding: 10px; background: -moz-linear-gradient(#ff4d71, #ffa317); background: -webkit-linear-gradient(#ff4d71, #ffa317); background: linear-gradient(to right, #ff4d71, #ffa317); border-radius: 10px;">
<p style="color: #FFF;">囲い込み内本文<br>
改行</p></div>
囲い込み内本文
改行
コピペ用コード
<div style="margin: 2em 0; padding: 10px; background: -moz-linear-gradient(#53a9ff, #b062ff); background: -webkit-linear-gradient(#53a9ff, #b062ff); background: linear-gradient(to right, #53a9ff, #b062ff); border-radius: 10px;">
<p style="color: #FFF;">囲い込み内本文<br>
改行</p></div>
囲い込み内本文
改行
コピペ用コード
<div style="margin: 2em 0; padding: 10px; background: -moz-linear-gradient(#f0f000, #caff95); background: -webkit-linear-gradient(#f0f000, #caff95); background: linear-gradient(to right, #f0f000, #caff95); border-radius: 10px;">
<p style="color: #FFF;">囲い込み内本文<br>
改行</p></div>
囲い込み枠ぼかし
囲い込み内本文
改行
コピペ用コード
<p style="margin: 2em 1em; padding: 5px; background-color: #ffd9ec; box-shadow: 0 0 10px 10px #ffd9ec;">囲い込み内本文<br>
改行</p>
囲い込み内本文
改行
コピペ用コード
<p style="margin: 2em 1em; padding: 5px; background-color: #e3f1ff; box-shadow: 0 0 10px 10px #e3f1ff;">囲い込み内本文<br>
改行</p>
囲い込み内本文
改行
コピペ用コード
<p style="margin: 2em 1em; padding: 5px; background-color: #eee; box-shadow: 0 0 10px 10px #eee;">囲い込み内本文<br>
改行</p>
囲い込み内ストライプ
囲い込み内本文
改行
コピペ用コード
<div style="margin: 2em .5em; padding: 10px; background: -webkit-repeating-linear-gradient(-45deg, #fff4ff, #fff4ff 5px, #ffe6ff 5px, #ffe6ff 10px); background: repeating-linear-gradient(-45deg, #fff4ff, #fff4ff 5px, #ffe6ff 5px, #ffe6ff 10px); color: #800080; box-shadow: 0 1px 4px #800080">
<p>囲い込み内本文<br>
改行</p></div>
囲い込み内本文
改行
コピペ用コード
<div style="margin: 2em .5em; padding: 10px; background: -webkit-repeating-linear-gradient(-45deg, #f7fbff, #f7fbff 5px, #e3f1ff 5px, #e3f1ff 10px); background: repeating-linear-gradient(-45deg, #f7fbff, #f7fbff 5px, #e3f1ff 5px, #e3f1ff 10px); color: #004386; box-shadow: 0 1px 4px #004386">
<p>囲い込み内本文<br>
改行</p></div>
囲い込み内本文
改行
コピペ用コード
<div style="margin: 2em .5em; padding: 10px; background: -webkit-repeating-linear-gradient(-45deg, #fafafa, #fafafa 5px, #e9e9e9 5px, #e9e9e9 10px); background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 5px, #e9e9e9 5px, #e9e9e9 10px); color: #393939; box-shadow: 0 1px 4px gray">
<p>囲い込み内本文<br>
改行</p></div>