スポンサーサイト

今日は何位かな?→人気ブログランキングに参加しています♪

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


このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

スポンサー広告 | 【--------(--) --:--:--】 | Trackback(-) | Comments(-) | [編集]

脳トレのその後

今日は何位かな?→人気ブログランキングに参加しています♪

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

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


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

2011_10_25.jpg



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

 
 
 

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




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



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



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




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




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



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


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



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





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




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



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



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


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




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

2011_10_25_200x200_bmp.jpg ←クリックで拡大します。


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




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



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





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


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

2011_10_25_paint_save.jpg ←クリックで拡大します。




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

2011_10_25_paint_resize.jpg ←クリックで拡大します。




えあの場合、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形式の画像がアップロードできれば、
同じ要領で設置することができます。

2011_11_25_favicon_1.jpg ←クリックで拡大します。

(シーサーブログの検証専用ブログでの表示)




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



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



このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

[tips]tips | 【2011-10-25(Tue) 08:00:00】 | Trackback(-) | Comments(-) | [編集]

Copyright © ホームページ&ブログ作成tips All Rights Reserved. Powered By FC2. 
skin:*cuteblog*   
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。