今日は絵描きさん必見。他とちょっと違うHPアピールテクニックだ!
その前にそこに座れ
あれ?何か怒ってらっしゃる?
何かIE以外のブラウザで見るとアドレスバーにカエルさんのアイコンが表示されてしまうのですが...
...あイヤ...だから今日はその話だって
そういえばIEのみ使っている方はご存知ないかもしれませんが、Firefox等で見るとHPのURIを入力する場所に、他と違うアイコンが表示されるサイトがありますね。
Yahooだと「Y!」のアイコン、Googleだと「G」のアイコンが出るね
そうなんだ。ブックマークの頭にもこのアイコンが表示されるからアイコンの無いサイトと比べると確実に目立つし、文字を追わなくてもどのサイトか一目で分かる。
絵描きさんサイトなら絵を表示出来るのはポイント高いかもしれませんね
でもIEで見れないなら意味ないじゃん
まぁ確かにそうなんだが、それ以外の主要ブラウザの最新版では全てで表示されるし、IEの次期バージョン7では確実に表示されるようになるだろう。知っておいて損は無いはずだ。
でもちょっと難しそうだよね
それが実は簡単なんだ。特に絵描きさんならお絵描きソフトを持って無い人でも創れる。
なんだか犯罪の匂いがしてきたね〜
するか!
HPショートカットアイコン作成法
まずは何を用意すれば良いんでしょうか?
必要なのはアイコン用画像と画像をアイコンに変換するソフトだな。後で紹介する画像変換ソフトはJPGはもちろんPNGやBMP、PSDまで対応しているので、お絵描きソフトを持って無い人は、サイズを指定して描けるお絵描き掲示板を使うと良いだろう。
じゃあフリの写真でも出来るの?
写真でもイラストでも問題ないが、現状のブラウザのアドレスバーで表示されるのは16px X 16 pxだからな。細かい写真は潰れて何だか分からなくなるからイラストの方がよいだろう。グラセンのKazuyaさんみたいな素敵なドット絵を描ける人がベストだ。
当然、人が創ったモノはNGだからね
創る時、16x16が小さすぎてツライなら、その倍数で32x32、64x64、128x128で創って縮小するのも良いだろう。気に入ったアイコンが出来たらiconファイル形式「.ico」に変換出来るアイコンエディタを用意する
た...高いの?
アイコンエディタでGoogleで検索すれば無料のソフトがたくさん出てくるので好みのものを探せば良いと思うが、今回は変換だけなので無料のソフトの「@アイコン変換」を使うと良いだろう
え〜とソフトをダウンロードして立ち上げたら、アイコンにしたい画像を選んで保存するだけ?
そうだ。「.ico」の拡張子が付いていたらそれでOKだ。後はファイル名を「favicon.ico」にしてHPを置いてあるサーバの一番上の階層(大抵はindex.htmlの置いてある場所)にコピーすれば終了だ。
??名前を変えちゃダメなの?
TOPページをindex.htmlにするのと同じ「決まり事」だ。「favicon.ico」にすると自動的にそのHPの全てのショートカットアイコンが指定される。他の名前にしたい場合は、各htmlファイルを開いて
<link rel="shortcut icon" href="ここにアイコンの名前を入れる">
と<head>タグ内のどこかに記述しないとダメだ。
面倒臭いね
その変わり、例えばイラストコーナーとそれ以外でアイコンを変えたりとかも出来るので、こだわっている人は色々試してみてくれ
なるほどねアイコンの事は分かったよ
おう
でもウチのアイコンにケロは無いだろ
!