2011年06月14日
【カスタマイズ】ファビコンを作ってブログの独自性を出してみよう
皆さん、ファビコンってご存じですか?
そう、ブラウザのタイトルバー左に表示されている
小さなアイコンの事です。
もちろん、これも変更することが出来ます。
今回は、このファビコンの作り方、設置の仕方を
解説します。
そう、ブラウザのタイトルバー左に表示されている
小さなアイコンの事です。
もちろん、これも変更することが出来ます。
今回は、このファビコンの作り方、設置の仕方を
解説します。
1.ファビコンを変えるという意味
大手のサイトやブログを訪問すると、オリジナリティー溢れるファビコンが
使われていますね。
このファビコン。地味な存在に見られがちですがアピールという点で言えば、
かなりの存在感です。
一例をあげてみます。
現在、ほとんどのブラウザがタブ形式を採用しています。
これ、便利ですよね。
1つのブラウザだけで、複数のサイトを見ることができるのですから。
でも、思わず開きすぎてこんな状態になったことはありませんか?
もし、この中に自分のブログがあったとしたら、今設定されているファビコンだと
存在が霞んでしまってますよね。
想像してみてください。
ここに他の人と違う自分オリジナルのファビコンが表示される。
他とは違うことが一目瞭然です。
ついうっかり閉じられてしまう事も減るかもしれません。
ほら、ファビコンを作りたくなってきませんか?
2.ファビコンの作り方
では、そのファビコンをどうやって作ればよいのでしょう?
今回は3つの方法を紹介します。
1)自分で作る
絵心のある人は自分で作ってしまいましょう。こちらのサイトでは、ブラウザ上でファビコンが作れます。
favicon.cc
ドットパターンを使ってファビコンを作ることができます。
ただ、ドットパターンで絵を書くことに慣れていないと、
ちょっと難しいかもしれません。
2)好きな画像をファビコンにする
お気に入りの画像をファビコンに変換してくれるサイトを利用しましょう。faviKon
自分の好きな画像でファビコンが作れます。
また、画像の一部をファビコンにすることもできます。
これは簡単に作れるのですが、あまり細かい画像をファビコンにしてしまうと、
絵が潰れてしまい何が何だか解らなくなってしまいます。
これはファビコンの解像度が低いためです。
(基本は32x32程度です)
変化の少ない単純な画像の方が、再現性が高いですね。
3)フリーのファビコンを使う
1)も2)も私にはちょっと・・・、という方。大丈夫です。私もその一人ですから。
そんな時は、フリーのファビコンを利用しましょう。
私はこのサイトのファビコンを利用させてもらってます。
freefavicon
多くのファビコンが登録されています。
きっと、ブログに合ったファビコンが見つかるはずです。
3.アップロードに関する問題点
では、実際にファンブログに設置してみましょう。
・・・といきたいところなのですが、このままではちょっと問題があります。
それは、このブログでは何度も出てきているファンブログ独自の制約という問題です。
・ アップロードできるのはGIF,JPEG,PNG,BMP,XBM
(画像ファイルのみ)
・ 画像1つにつき200KBまで
・ 1つの記事に掲載できる画像は最大5つまで
・ 総容量は50MBまで
(画像ファイルのみ)
・ 画像1つにつき200KBまで
・ 1つの記事に掲載できる画像は最大5つまで
・ 総容量は50MBまで
ファビコンは拡張子がicoというファイルで作成されています。
その為、このままではファンブログにアップロードできないのです。
これに対処するためには、2つの方法があります。
1)icoファイルが使用できるサーバーにアップロードする
2)icoファイルをjpgファイルに偽装し、ファンブログにアップロードする
1)の方法は、以前紹介したDropboxを利用すれば大丈夫です。2)icoファイルをjpgファイルに偽装し、ファンブログにアップロードする
もしくは、他の無料ブログでも良いですね。
【関連記事】 Dropboxを使って無料でファンブログの可能性を広げてみよう
問題は2)の方です。
Flashの時と同様の手段で対処したのですが、今回は駄目でした。
【関連記事】 ファンブログでFlashを使ってみよう
FirefoxやChromeでは問題ありません。
しかし、InternetExploreでは、icoファイルしかファビコンとして認識しないようなのです。
その為、この方法では、表示される・されないかは、ブラウザに依存する
という形になります。
ファンブログじゃないと駄目だ、という場合はその点を考慮する必要があります。
4.ファビコンを設置してみよう
では、改めてファビコンを設置する手順を解説してきます。
1)ファビコンをアップロードする
(1)ファンブログの場合
作成・ダウンロードしたファビコンの拡張子icoを、ファンブログで使用できる
拡張子(gif/jpg等)に変更します。
その後、下書きの記事を作成し、そこにファビコンのファイルをアップロード。
そして、そのファイルのURLを取得してください。
詳しくは上記のFlashの記事を参考に。
※この方法では、InternetExploreで表示されません
(2)ファンブログ以外のサーバーを利用する場合
作成・ダウンロードしたファビコンのファイルをサーバーにアップロードし、
そのファイルのURLを取得してください。
詳しくは上記のDropboxの記事を参考に。
2)テンプレートを修正する
ファビコンは、ブログの全ページに表示されています。
その為、現在使用しているテンプレート全てに、設定を追加する必要があります。
各テンプレートのheadタグ内に、以下のHTMLを記述してください。
3)ファビコンを確認する
ブラウザを立ち上げて、ファビコンを確認してみましょう。
作成したファビコンが表示されているはずです。
もし表示されない場合は、ブラウザのキャッシュをクリアして、もう一度
試してみてください。
以上、ちょっと文字が多くなってしまいましたが、ファビコンを設置する方法でした。
【スポンサード リンク】
【カスタマイズの最新記事】
この記事へのコメント