らいふぼーとの新入社員のブログ

画像投稿のテスト・・・。

社長から、今度「ファビコン」を作って欲しいと言われました。

ファビコンって言われて「ファミコンの派生品？」とか最初に思ったバカはここに居ます。
すみませんすみません。

ホームページでタイトルの隣にあるちっちゃいアイコンのことをさすんですね。
私もなんで出ないんだろうと考えたことはありますが深くは追求せず・・・。

しかしやってみるとあっさりできたので忘備録を・・・。

今回の参考サイト様
http://www.tagindex.com/hp_guide/img/favicon.html

ファビコン変換サイト
http://favicon.htmlkit.com/favicon/
（英語のサイトですがファイルを選択後　確認しその後
右横に出てくるDownloadの文章リンクを押すだけでした。）
ちなみにZIPファイルで出てきました。あと、JPEGで上げたファイルがGIFで帰って来ましたｗ。


まず　16×16サイズのファビコンにしたい画像を作る。
あらかじめ縮小したものを用意することだそうです。

作ったらGIFかPNG（一応JPEGでも出来ました）で保存して
さっきのサイトで変換してZIPファイルを受け取る。

その中に○○○.icoと変換されたファイルがあるので
コピーして該当フォルダに保存。

HTMLファイルのの前に

と記述。
○○/は各ディレクトリごとに異なりますので間違いを防ぎましょう。
ちなみにディレクトリさえ合ってれば深い階層に画像を入れても大丈夫な模様です。


後はファイルと画像をアップするだけ。
ちなみに作ったJPEGファイルの拡張子を書き換えただけでも行けそう？

慣れれば3分クッキング行けそうです。

仕事柄　IE,Firefox,Safari,Chormeと
幅広いブラウザーを搭載している会社用MyPC。

即出ですが、FireFoxを使っている際に
便利なアドオン、Firebugで
Hover状態を維持したい時にはどうすれば良いのかを探していました。

今回の方法は
右側にスタイルで該当ホームページのCSS表記が多数並んでますが
スタイル隣の▼:hoverがあるのでそこにチェックを入れるだけでした。

hover状態を一時的に維持したい時に活用できそうですね。


参考にさせていただいたサイト様
http://labs.cybridge.jp/2010/09/firebug-hover.html