スパムメールのマークを作りました
↻
先日書いたスパムメールの記事『怒濤のスパムメールが止まらない』をアピールしようと、目立つように記事の前にマークを付けてみた。
このサイトは、気になることを整理してより理解するため、あるいは備忘録として書いていることが多い。「検索して、役立つことがあれば幸い」スタイルなので、特定の記事を推したりしていない。でも、記事を読んだ後、トップページに来られる方も多いようなので、今回初めてマークを付けてみると良いかもと思った。案外良ければ、ほかのジャンルの記事でも導入しよう。
はじめは「New」とか「オススメ」というのを考えたが、「New」を長い間つけておくのは変だし、「オススメ」というのも、決まったテーマがあるサイトではないので、すこし押しつけがましく感じる。そこでスパムメールのマークを考えた。
スパムメールのマークができるまで
リストの前だけに付けるのなら小さな画像があれば良いが、テキストならいろいろな場面で使えるかも、ということでCSSで作ってみた。
スパムメールが繰り返し送られてくるのを表現しようと「右回りの矢印」を表す文字参照を使うことにする。
| 文字実体参照 | ↻ | ↻ |
| ↻ | ↻ | |
| 数値文字参照（16進数） | ↻ | ↻ |
| 数値文字参照（10進数） | ↻ | ↻ |
このままだと、ブラウザのリロード（更新、再読込）マークに似ているので、平らにして角度を付けてみた。平らにしたら線が細くなったので、ボールドに。
↻
スパムメールは毎日毎日来るので、毎日毎日→日々→日の丸という連想で、赤い丸を背景にしたらマークらしくなってきた。矢印は赤とコントラストがつくように白にした。
↻
スパムメールは全世界、地球を駆け巡る。球体をイメージさせるために、グラデーションを付けてみた。
↻
よし、これで完成。ただ、ブラウザによっては、少し楕円形に見えたりする（本文の line-height が関係している？）。楕円問題は今後の課題にしよう。
HTML
<p><span class="spam">↻</span></p>
CSS
.spam {
display: inline-block;
-moz-transform: rotate(-45deg) scaleY(0.6);
-webkit-transform: rotate(-45deg) scaleY(0.6);
-o-transform: rotate(-45deg) scaleY(0.6);
-ms-transform: rotate(-45deg) scaleY(0.6);
transform: rotate(-45deg) scaleY(0.6);
font-weight: bold;
color: white;
background-color: #ff0011;
border-radius: 50%;
background : -webkit-gradient(linear, right top, left bottom, from(#fcd3c3), 0.5(#ff0011), to(#f9ac92));
background : -webkit-linear-gradient(right top, #fcd3c3, #ff0011, #f9ac92);
background : linear-gradient(to left bottom, #fcd3c3, #ff0011, #f9ac92);
}
※W3C CSS 検証サービスによると「background 文法解析エラー」どこか間違っている
リストへの記述
トップページはリスト形式で記事タイトルを並べているので、該当記事の前に、:before擬似要素でスパムメールのマークを表示するようにした。
HTML
CSS
.spam:before {
content: "\x021BB"
display: inline-block;
-moz-transform: rotate(-45deg) scaleY(0.6);
-webkit-transform: rotate(-45deg) scaleY(0.6);
-o-transform: rotate(-45deg) scaleY(0.6);
-ms-transform: rotate(-45deg) scaleY(0.6);
transform: rotate(-45deg) scaleY(0.6);
font-weight: bold;
color: white;
background-color: #ff0011;
border-radius: 50%;
background : -webkit-gradient(linear, right top, left bottom, from(#fcd3c3), 0.5(#ff0011), to(#f9ac92));
background : -webkit-linear-gradient(right top, #fcd3c3, #ff0011, #f9ac92);
background : linear-gradient(to left bottom, #fcd3c3, #ff0011, #f9ac92);
}
※W3C CSS 検証サービスによると「background 文法解析エラー」どこか間違っている
当初、content: " "のダブルクォートの囲みにいつも通り文字参照をいれたのだが、表示が上手くいかない。検索して調べたら、実体参照文字を表示するには、バックスラッシュ(\)＋６桁の １６進数で表記
しなくてはいけないらしい。