はてなブログ云云でアフィリエイトがしたい人のブログ

「はてなブログ」でアフィリエイト・ブログカスタマイズ・最適化・色々試行錯誤中!

【スポンサーリンク】

はてなブログにファビコン(favicon)を設定する方法がとても簡単だった

f:id:yonta24:20140101233832p:plain

はてなブログは複数のブログにファビコンを個別設定可能

こちらも、はてなダイアリーでは出来なかった事が、はてなブログでは出来るようになるという例です。

 

 

はてなブログは、ファビコンを個別に設定できます。やっぱりファビコンを設定しておいたほうが複数のブログを作成している時には便利。

 

f:id:yonta24:20140101221412p:plain

 

こんな風にブックマークをファビコンだけで認識している私にとっては、とてもありがたい機能です。確かはてなダイアリー(旧サービス)では、全てのブログが青字に”D”のファビコンでアイコンだけでは全く見分けがつかなかったんです。

 

昨日(2013/12/31)自分のはてなダイアリーを、はてなブログにインポートしたので、その時に一緒にファビコンも設定しました。これから解説するキャプチャ画像は、全てhttp://yonta24.hatenadiary.jp/というサイトでの話です。

 

ファビコンの設定方法

まずは、ファビコン画像を作ります。私は、ウェブアートデザイナーという「ホームページビルダー」付属の画像編集ソフトを使っています。凝ったことは出来ませんが軽量で動作が軽いのです。

 

 大きさは縦64ピクセル、横64ピクセルで制作しました。正方形で製作すれば、はてなブログのほうで自動的にサイズを変換してくれます。

f:id:yonta24:20140101222515p:plain

 

 

 ダッシュボードにアクセスして、ファビコンを設定したいブログを選択します。

f:id:yonta24:20140101221001p:plain

 

 

「設定」→「詳細設定」をクリック。ブログアイコンの「参照ボタン」をクリックして、製作した画像ファイルを指定します。

f:id:yonta24:20140101223917p:plain

 

 

ファイルを指定したら、このページ最下部の「変更する」ボタンをクリックするとファビコンの画像ファイルがアップロードされ設定完了です。設定したはてなブログにアクセスして確認すると、アイコンが変わっています。

f:id:yonta24:20140101224246p:plain

 

 

実際にファビコンをはてなブログに適用してみると縮小した時に意図した結果にならないので、何度もやり直しました。

f:id:yonta24:20140101231503p:plain

 

 

こんな風にファビコンだけでどのブログなのかわかるようになりました。

f:id:yonta24:20140101232058p:plain

 

 

実際に作ってみると、縮小された時に全然思った通りになりません。微妙にノイズが入ったり、上の図のアイコンも微妙に下側と右側が数ピクセル切れて表示されています。(Firefoxだけでしょうか…)

 

欠けた事が気にならないように、外側数ピクセル内側にアイコンを作ったほうが良いかもしれません。

 

つまり、64x64で作る場合は、62x62以内にデザインを納める感じです。上図の他ファビコンをよく見ると、YoutubeやTwitterのファビコンは、いずれも外側数ピクセルが欠けても気にならないように作られているのがわかります。

 

ファビコンひとつと言っても中々奥が深いぞと感じました。