flickr icon

自分のblogに表示されてるflickrのアイコン(写真のタイトルの横に表示されてるコレ ね)がちゃんと透過表示されてなくて美しくなかったのが、ある時非常に気になったので、どうにかしてやろうと珍しく創作？意欲が湧いた。

簡単な図形の組み合わせだから自分で作ってしまえ〜

ということで作ってみた。
予想通り簡単に出来た。Google先生に聞いてみたら、PNGファイルの透過処理はなんとMacのプレビューでも出来てしまうのだという。確かに出来た。

この程度の手間で思い通りのアイコン作れるなんて〜、と喜んだのもつかの間。flickrにアップロードしたアイコンは透過されてないではないか.....

そう言えば、前にも同じような経験をしたような。。。と思い出して、今度はflickrのフォーラムで情報収集。曖昧な記憶に残っていたとおり、flickrには透過PNGをちゃんと扱えない不具合があるらしい。orz <-- 思いついたので久しぶりに使ってみた。
んじゃ、しゃーないからflickrは諦めて、またもやGoogle先生頼みでGoogle Driveに上げて使えばいいべ〜なんて軽く考えてアップロード、そしてプレビュー！(この間に画像の公開URL取得に手こずっていたのは秘密。いいのいいの、Driveの使い方は今後も使える知識かもしれないから。)

はーい、ドツボ！またもや透過されない、我がPNGさん。。。

これもGoogle先生に聞いてみると、Google+の自動補正の影響だかなんだかでPNGの透過がキャンセルされちゃうというような情報を発見.....
ついてないな〜、と思いつつもわざわざGoogle+に登録して、自動補正機能をオフにするも、やっぱりうまく表示されない。

もうこれ以上は付き合ってらんねーと思った矢先に思いついたのが、

CSSで絵が描けるんじゃなかったっけ？

ということ。
予想は的中、Google先生に聞いてみると描き方も意外とすんなりとわかり、目的達成と相成りました。

前フリ長かったけど、以下が今回作ったソースでございやす。
動作の保証はできませんが、使ってみたい方がいらっしゃいましたら、コピペしてご自由にお使いくださいませ。
2013/08/15追記: iPhoneのSafari ではまったく表示されないことが判明...

flickr icon by CSS

/* flickr icon */
.flickr_icon { width: 16px;
                height: 16px;
                display: inline-block;
                _display: inline;
                vertical-align: middle; }

.flickr_icon:after{
    content: "";
    display: block;
    position: relative;
    top: 5px;
    left: 1.5px;
    width: 6px;
    height: 6px;
    background-color: #006add;
    /* Circle */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    /* Purple circle */
    box-shadow: 7px 0 0 0 #ff1981;
}