スパムメールのマークを作りました

先日書いたスパムメールの記事『広告を見て、思い出した話を書いていくをアピールしようと、目立つように記事の前にマークを付けてみた。

このサイトは、気になることを整理してより理解するため、あるいは備忘録として書いていることが多い。「検索して、役立つことがあれば幸い」スタイルなので、特定の記事を推したりしていない。でも、記事を読んだ後、トップページに来られる方も多いようなので、今回初めてマークを付けてみると良いかもと思った。案外良ければ、ほかのジャンルの記事でも導入しよう。

はじめは「New」とか「オススメ」というのを考えたが、「New」を長い間つけておくのは変だし、「オススメ」というのも、決まったテーマがあるサイトではないので、すこし押しつけがましく感じる。そこでスパムメールのマークを考えた。

スパムメールのマークができるまで

リストの前だけに付けるのなら小さな画像があれば良いが、テキストならいろいろな場面で使えるかも、ということでCSSで作ってみた。

スパムメールが繰り返し送られてくるのを表現しようと「右回りの矢印」を表す文字参照を使うことにする。

「右回りの矢印」の文字参照
文字実体参照 ↻
↻
数値文字参照(16進数) ↻
数値文字参照(10進数) ↻

このままだと、ブラウザのリロード(更新、再読込)マークに似ているので、平らにして角度を付けてみた。平らにしたら線が細くなったので、ボールドに。

スパムメールは毎日毎日来るので、毎日毎日→日々→日の丸という連想で、赤い丸を背景にしたらマークらしくなってきた。矢印は赤とコントラストがつくように白にした。

スパムメールは全世界、地球を駆け巡る。球体をイメージさせるために、グラデーションを付けてみた。

よし、これで完成。ただ、ブラウザによっては、少し楕円形に見えたりする(本文の line-height が関係している?)。楕円問題は今後の課題にしよう。

HTML

<p><span class="spam">&#8635;</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: " "のダブルクォートの囲みにいつも通り文字参照をいれたのだが、表示が上手くいかない。検索して調べたら、実体参照文字を表示するには、バックスラッシュ(\)+6桁の 16進数で表記しなくてはいけないらしい。