2009.10.13[Tue]
以前、某にくきゅう様んとこで【猫足立】・・・じゃなーくーて、
ファビコンを設置している記事を拝見して以来、私もつけてみたいな~と漠然と思っていたのです。
当ブログにつけたファビコンはこんなかんじ →
ファビコンっていうのは、サイトをブックマークしたときにタイトルの横に出るアイコンのこと。
POLだと青丸のクリスタルみたいなのが出てますよね。アレです。
やり方は結構カンタン。忍者blogが、もともとファビコンが設定されてないからかもしれませんが。
FC2やエキサイトだとデフォルトでファビコンついちゃってますから、消す処理が必要なのかな~
興味を持った方は折りたたみのほうに作成方法を載せておいたので参考にしてください
ファビコンを設置している記事を拝見して以来、私もつけてみたいな~と漠然と思っていたのです。
当ブログにつけたファビコンはこんなかんじ →
ファビコンっていうのは、サイトをブックマークしたときにタイトルの横に出るアイコンのこと。
POLだと青丸のクリスタルみたいなのが出てますよね。アレです。
やり方は結構カンタン。忍者blogが、もともとファビコンが設定されてないからかもしれませんが。
FC2やエキサイトだとデフォルトでファビコンついちゃってますから、消す処理が必要なのかな~
興味を持った方は折りたたみのほうに作成方法を載せておいたので参考にしてください
まぁ、私の場合はニンブロラボ.様のやり方丸写しなんですけども~。
こちらのブログ様には本当に本当に、テンプレートカスタマイズで色々とお世話になっておりまする。
手順としては、3つ。
カンタンでしょ?(*'-')b
1つずつ説明していきます。
1.ファビコンに使う画像を用意する
まず、画像を作るんですが、これはまた結構センスがいるかもしれませんね。
実際のファビコンは16px*16pxと相当小さいですし・・
私の場合は、ブログタイトルにもなっているアレキサンドライトを使用。
はい、ゲーム中のアイテムであるアレキサンドライトのアイコンをそのまま流用していますから
センスもクソもないですねwww
これを作るのに使ったソフトは、私の場合はPIXIA(フリーウェア)ですが、
有名どころではPhotoShopとか色々ありますよね。
私が使い慣れているのがPIXIAだというだけです。
極端な話、PCに標準でついてるペイントとかだっていいと思います。
自分好みの画像が作れればなんでもいいという意味ですw
2.画像を.ico ファイルに変換する
画像を作っても、そのままアップロードしたのではファビコンとして機能してくれないようです。
ファイルを変換する必要があるのですね。
web上で変換できるサイト様がいくつかありますが、
ニンブロラボ.様で紹介されていたのが上の2つ。
他にも色々あると思います。私はFavicon Japan!!様を利用しました。
ファイルを指定して実行するだけ!カンタン!w
3.ファイルをアップロードして、ブログに設置
最後の手順です。
SS等と同じく、2項で変換したファビコンの.icoファイルをアップロードします。
(注:ディレクトリが指定できるブログの場合は、index.htmlと同じ階層にupしてください)
更にテンプレートの<head>と</head>の間に、次の1行を追加します。
赤字部分がファイル名です。
忍者blogの場合は以下のようになります。(***は自ブログのものと置き換えてくださいね)
これで完了です。カンタン!(しつこい
今テンプレートを色々改造しているのですが、他の要素に比べて
ファビコンはほんとに簡単で感動してしまいました(/ω\)
設置後に気がついたのですが、IE(インターネットエクスプローラー)の場合、
favicon.icoをアップロードした時点でファビコンが表示されるようになるそうです。
私は普段Firefoxを使っているので、その注意書きに気付きませんでした・・(ノ∀`)
一般のブログはともかく、閲覧者様の大半がFF11ユーザーで、
アカハク騒ぎ以降は本当に、IE以外のブラウザでの利用が増えてますねから~
アクセス解析によると、当ブログを閲覧して下さっている方の4割がFirefox、4割がIE8、
以下IE7、IE6と続いています。
もしファビコン設置を検討しているのでしたら、IE以外のブラウザにも対応できるように、
上記の<link rel="shortcut icon"~の記述を追加するようにしてくださいね。
私の書いた記事を読んでファビコンに興味を持ってくださる方がいたら、
そして「自分のブログに設置してみようかな」なんて思って下さったら、とっても嬉しいです(*´д`*)
こちらのブログ様には本当に本当に、テンプレートカスタマイズで色々とお世話になっておりまする。
手順としては、3つ。
1.ファビコンに使う画像を用意する
2.画像を.ico ファイルに変換する
3.ファイルをアップロードして、ブログに設置
カンタンでしょ?(*'-')b
1つずつ説明していきます。
1.ファビコンに使う画像を用意する
まず、画像を作るんですが、これはまた結構センスがいるかもしれませんね。
実際のファビコンは16px*16pxと相当小さいですし・・
私の場合は、ブログタイトルにもなっているアレキサンドライトを使用。
はい、ゲーム中のアイテムであるアレキサンドライトのアイコンをそのまま流用していますから
センスもクソもないですねwww
これを作るのに使ったソフトは、私の場合はPIXIA(フリーウェア)ですが、
有名どころではPhotoShopとか色々ありますよね。
私が使い慣れているのがPIXIAだというだけです。
極端な話、PCに標準でついてるペイントとかだっていいと思います。
自分好みの画像が作れればなんでもいいという意味ですw
2.画像を.ico ファイルに変換する
画像を作っても、そのままアップロードしたのではファビコンとして機能してくれないようです。
ファイルを変換する必要があるのですね。
web上で変換できるサイト様がいくつかありますが、
ニンブロラボ.様で紹介されていたのが上の2つ。
他にも色々あると思います。私はFavicon Japan!!様を利用しました。
Favicon from Pics様
Favicon Japan!!様
ファビコンメーカー様
ファイルを指定して実行するだけ!カンタン!w
3.ファイルをアップロードして、ブログに設置
最後の手順です。
SS等と同じく、2項で変換したファビコンの.icoファイルをアップロードします。
(注:ディレクトリが指定できるブログの場合は、index.htmlと同じ階層にupしてください)
更にテンプレートの<head>と</head>の間に、次の1行を追加します。
<link rel="shortcut icon" href="<$MTBlogURL$>favicon.ico" />
赤字部分がファイル名です。
忍者blogの場合は以下のようになります。(***は自ブログのものと置き換えてくださいね)
<link rel="shortcut icon"href="http://file.***.blog.shinobi.jp/favicon.ico" />
これで完了です。カンタン!(しつこい
今テンプレートを色々改造しているのですが、他の要素に比べて
ファビコンはほんとに簡単で感動してしまいました(/ω\)
設置後に気がついたのですが、IE(インターネットエクスプローラー)の場合、
favicon.icoをアップロードした時点でファビコンが表示されるようになるそうです。
私は普段Firefoxを使っているので、その注意書きに気付きませんでした・・(ノ∀`)
一般のブログはともかく、閲覧者様の大半がFF11ユーザーで、
アカハク騒ぎ以降は本当に、IE以外のブラウザでの利用が増えてますねから~
アクセス解析によると、当ブログを閲覧して下さっている方の4割がFirefox、4割がIE8、
以下IE7、IE6と続いています。
もしファビコン設置を検討しているのでしたら、IE以外のブラウザにも対応できるように、
上記の<link rel="shortcut icon"~の記述を追加するようにしてくださいね。
私の書いた記事を読んでファビコンに興味を持ってくださる方がいたら、
そして「自分のブログに設置してみようかな」なんて思って下さったら、とっても嬉しいです(*´д`*)
COMMENT
TRACKBACK