ホームページ＆ブログ作成tips

上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

先月末に前に取り上げた脳トレ。

http://yuririn.org/tips/脳トレの結果は？.html


結果発表が遅くなりましたが、
ご協力頂いたクリック分析の結果はこうなりました





分かった方は半分位というところです。

　
　
　

この正体が分かったら、設置したくなるのも
人間というもの。




で、作ったのはいいんだけど、
Internet Explorerで表示されないって問題が
発生しているようです。



その正体はファビコンなんですが、
作ること自体はあまり難しくないと思います。



でも、ただ単に作るんじゃダメなんです。
過程に問題があります。




favicon自体は元来IEの特有の技術でしたが、
徐々に他のブラウザでも採用されるようになり、
今ではほとんどのブラウザで対応しています。




ここで、注目して欲しいのは、
『IEの特有の技術』であったということ。



何が関係あるの？と思うかもしれませんが、
インターネットエクスプローラーを開発しているのはMicrosoft。


マイクロソフトが開発しているOSはWindows。



更に掘り下げると、
ウィンドウズの基本になっている画像ファイルの形式は
ビットマップ（拡張子：bmp）なのです。





この関連性から行くと、ファビコン自体も
元がBitmapでないと、他のブラウザで表示されても
IEに表示されないということになるわけなのです。




FC2ブログに置いていたファビコン、
実はjpg画像から作っていました。



作成当時IEでチェックしたような気もするんですが、
同じIEエンジンのブラウザだからといって、
Sleipnirでしかチェックしてなかったような気もします。



だから、この問題で盛り上がっているのを見て、
自分のfaviconをIE8から確認したら、
やっぱり表示されてませんでした。


キャッシュや履歴のクリアもしましたが、
当然表示されませんでした。




で、昨夜作りなおしたのですが、
元画像をビットマップ形式に変更し、

　←クリックで拡大します。


16ピクセルの正方形に加工しました。
　←クリックで拡大します。




それをファビコン作成ソフトに落とし込みました。
保存形式は.icoです。



そうすると、IEでも表示されるようになりました。
　←クリックで拡大します。





他の画像形式からBitmapにするのは、
Windowsのプログラムのアクセサリフォルダにある
ペイントで容易に加工ができます。


単に名前をつけて保存でファイルの種類を変えるだけです。

　←クリックで拡大します。




サイズ変更もそのままPaintで変更からサイズの変更と傾斜の
サイズ変更の部分で%を指定してあげるとできます。

　←クリックで拡大します。




えあの場合、200pixelの正方形画像を使ったので、
8％にすることにより、16ピクセルの画像を作ることができましたが、
元サイズによっては計算によって％を引き出す必要があります。

16÷○（元の画像サイズのピクセル）×100＝●％

今回ファビコンの作成には＠icon変換という
フリーウェアを使いました。

http://www.vector.co.jp/soft/win95/amuse/se201729.html
（ベクターのサイトに飛びます。動作OSにVistaが入ってませんが使えました。）



サイト上でも作成できるところがあるので、
何を利用しても、ここは問題ないと思います。



特典でよく配布されている
ファビコンクリエーターでも十分でしょう。




ただ、えあは導入前後の比較検証のために作ったので、
敢えて違うファイル名で保存してありますが、
favicon.icoというファイル名で保存するのが基本です。



本来はhttp://yuririn.org/ならば、
http://yuririn.org/favicon.icoの位置に
ファイルをアップロードするのが王道です。



HTMLの記述上はこうなります。

<link rel="shortcut icon" href="http://yuririn.org/favicon.ico" />

無料ブログでは、ルートフォルダも含めて、
画像フォルダを置くことができないので、


ファビコンを画像としてアップロードし、
その画像への絶対パス（http://〜始まる長いリンク）を記述します。

<link rel="shortcut icon" href="http://blog-imgs-15.fc2.com/b/l/o/blogair/favicon.ico" />

（えあのFC2ブログの場合。ファイル名が異なるので、このままでは表示されません。）



他の無料ブログでも、.ico形式の画像がアップロードできれば、
同じ要領で設置することができます。

　←クリックで拡大します。

（シーサーブログの検証専用ブログでの表示）




と、言う訳で、これからメインサイト（http://yuririn.org/）の
ファビコン作成に入ります。



実はデザインで悩んで、未だに答えが出なくて
設置してなかっただけです。。。ヾ(_ _。)