備忘録はたいせつ favicon

やっぱり、年に１度しかやらないようなことはその都度メモって置かないと、次の時に大変だね

Faviconというやつを作っていました。
こういう、Webブラウザのタブに表示されるもの。



今回やりたかったのは、丸い図形に数字が２つ。丸くみせたいから、図形の外側の背景は透明にしたい。
16x16ピクセルでの表示なので、数字２文字しかない小さなデザインでも、この大きさでは穴が潰れて読めなくなってしまうから、何かと考えることはある。

やり方はいろいろ。
１）ウェブサービスのお力を借りる
２）イラストレーターで作成
３）フォトショップで作成


過去のデータを探した結果、前回はおそらく２だったみたい。
１）だと大体16x16にしてくれたけど、背景の白い部分が出てきてしまった。ここのサービスのサンプルをみると、四つ葉でも背景なし、のものがあったので、単に元データの保存方法が悪かったんだと思う。

でも、数字の配置を個別に工夫したいなと思って、２）と３）を試す。

前回のデータを探すと３）のフォトショップで作った傾向あり。ただ、最終とおもわれる保存データのフォントがまるっきり違っていたので、「お前じゃない！」と判断。

あと、前のデータをよーくみたら、32x32ピクセルになっていた。そうか、やはり16pxの見た目の悲しさに耐えられなかったとみえる。

そこであらためて２）へ。
ファビコンにしようと思っていたデータはそもそもイラストレーターのデータ。回りまわったけど、とりあえずここでデータを32px四方に収まるように拡大。そして、

「Webデバイス用保存」を選択
その中で「png-8形式」を選択（透過する用のチェックボックスをオン）

で、

（pngだけど）保存名を「favicon.ico」として保存。

そしたら丸の縁に白いぎざぎざが出てて、なんか気に入らない。前回のは濃い色を使ったのが原因かしらないけど、そんなものは全然出てなくてきれいな１色の丸になっている。

ここでまたフォトショップから保存したりしたけど上手く消えなくて、消えたら消えたでそれもかっこ悪くて…

とはいえ、ブラウザにのっけてしまえばあまり気にならないはず。その、縁取りってのはWebやら何やらにのっけた時に背景となじみがいいように用意されているものではある（はずな）ので、「いや、こういうもんだ」と割りきってイラストレーターで先ほどの手順通りに保存＆アップロード。

今、ブラウザのキャッシュが更新されているのを待っている途中です。

ふう

毎回書いとかないと、おとといのwordpressだってktai styleのphpの方にglobal $post書かなくてもカスタムフィールドうまくいったじゃん！！説明書きと違うじゃん！って１年後に慌てると思うから、書いといた方がいいなあ。（まあ、なんで上手くいったかは、調べた結果想像ついてるんだけどね）


ちなみに、こういう作業を１個ずつ調べては仕事に反映させてるけど、このネットの世界ってのはバージョンが変わったり使ってる言語がアップデートされたりしていて、どこかに載っていた万能解決法が今は効かない…という事もしょっちゅうあるので、ブログ記事を検索したら必ず日付を確認することが重要。どんなによさげな記事でも、今合ってなければもはや意味がない。

その上、日付がページの末尾に書いてあったり、そもそも表示されてなかったり…判断に困るから大変です。信じたのに違ってた、なんてことにもなるから。

でも、アップデートに伴う追加記事を載せてくれている人達もいるので、それはそれで参考になる。

ほんとにWebはありがたいなあ。


それでも自分の力が足りないので、とある問題を解決するため、タグ１行省く事に気づくまで、または、すでにたくさんの文字や画像を貼りつけた中に新たにリンクボタンを１個足す…こういうパッと見簡単そうな事に、それぞれまるまる３時間かかった。

あほか（笑）。


さーて、今日は寝すぎて５時に起きたけど、やることはまだまだ残っているので頑張らないと。


分からなくなったら、また記録しておこうっと。