メモ風デコレーションです
ページの雰囲気になじみやすいデザインを考えるのではなく
もういっそ際立たせることで
「これはコンテンツではなく『広告』なんだ」
ということを思いっきり主張してみます
逆転の発想！（？）
【表示サンプル】テープ
【cssサンプル】
div[align="center"]{
width:15em; height:auto;
margin:0 auto; padding:0 1em;
box-sizing:border-box;
background-color:floralwhite;
background:
-webkit-linear-gradient(bottom,
gainsboro,
gainsboro 5%,
#fffaf0 5%,
#fffaf0);
background:linear-gradient(bottom,
gainsboro,
gainsboro 5%,
floralwhite 5%,
floralwhite);
background-size:1.5em 1.5em;
box-sizing:border-box;
box-shadow:3px 3px 2px -1px
rgba(0,0,0,0.4);
border-left:1em solid floralwhite;
border-right:1em solid floralwhite;
border-bottom:1em solid floralwhite;
line-height:1.5em;
}
div#memo:before{
content:"Sponsored Link";
display:block;
width:80px;
margin:0 auto; padding:auto;
position:relative; top:-0.5em;
background-color:rgba(255,250,250,0.6);
border-left:1px dotted rgba(0,0,0,0.1);
border-right:1px dotted rgba(0,0,0,0.1);
box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.2),
transform:rotate(-2deg);
color:teal;
text-align:center;
}
div#memo > a{
text-decoration:none;
}
a[href*="lyze"]{
color:tan;
display:block;
margin:5px auto;
text-align:center;
}
a[href*="lyze"]:before{
content:"- ";
}
a[href*="lyze"]:after{
content:" -";
}
メモの罫線は線形グラデーションを使って描画しています
backgrounde-sizeはline-heightと同じ値、上下のmarginは0にすると文字と行が綺麗に収まります
左右と下の余白部分は背景色と同じボーダーで作っています
ボックスシャドウで右、下方向に影をつけました
スポンサードリンクと記されたテープは:beforeをblock要素として独立させ、上に0.5文字分移動させてました
デザインはマスキングテープと同じ方法を使っています
シンプルなので「可愛すぎるのはちょっと…」と思われるかたにもお勧めです
【表示サンプル】ペーパーウェイト
上は:beforeのスタイルを変えてペーパーウェイト風にしてみました
メモパッドをグリーティングカードのようにしてみても
さて「ここまでは広告をメモ仕立てにする」という方法をご紹介しましたが、逆もアリだと思います
つまり、こんなふうに
挿入されている広告についての説明をふせんのように入れちゃうわけですね
詳細は次の「タグ風」へどうぞ
