QLOOKアクセス解析

スポンサーサイト

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

スポンサー広告  |  ↑Top

2008/12/31 (Wed) 21:00

ファビコンの作り方

ブログへのファビコン設置の方法です。
ファビコンとは、ブラウザのアドレスバー、タブ、お気に入りの、
左側に表示されるアイコンのことです。
このページではイルカが見えているはずです。

画像を作るのはちょっと大変かもしれませんが、
画像さえあれば簡単に自分のブログにファビコンが表示できます。
FC2ブログの場合について手順を説明します。
(他のブログでの設置可否情報、方法等は後述します)

1.画像を作成する
 ファビコンのサイズは 16x16 ピクセルです。
 後述するジェネレータを使えばもっと大きな画像も自動的に縮小されますが、
 見栄えが変わってくるので元から 16x16 または 32x32 で作成するのが良いでしょう。
 またはファビコン素材集からダウンロードもできます。
 それ以外の素材を使う場合でも最低でも正方形にカットしておきましょう。

 自分で作成する場合は、FC2アイコン作成サイトで作成するのが簡単です。
 サンプルエディタはFC2ユーザでなくても使えるようです。

 あるいはかなり大変な作業になりますが Fireworks や Photoshop や、
 無料ソフトの GIMPXnView などの、
 画像作成ソフト、写真加工ソフトを使うときれいにできます。
 ただし、本当に思ったような画像にするには画像ソフトと写真加工ソフトを、
 組み合わせて使わないと本当に思ったようにならないので、かなり大変です。

 注意すべきなのは、画像全体を着色する場合は問題ないのですが、
 背景を透過にする場合です。
 背景を透過にする場合はあらかじめ背景を透過にして、
 png または gif でファイル保存します。
 FC2アイコン作成サイトの場合は自動的に gif の背景透過で作成されます。
 背景透過にしない場合には、Windows のアクセサリのペイントでも作成可能です。

2.作成した画像を ico ファイルに変換する
 Dynamic Driveというファビコンジェネレートサイトがあるので、
 作成した画像を ico ファイルに変換します。
 英語サイトですが、操作は簡単なので英語が苦手な方でも簡単にできます。
 透過画像は透過ファビコンに、非透過画像は非透過ファビコンに、
 どんなサイズからでも自動的に作成してくれます。
 このサイトが一番お勧めです。

 日本語のサイトでFavicon Japan!!というサイトもあります。
 しかし透過ファビコンは作成できないようです。

 また英語サイトですがFavIcon from Picsというサイトもあります。
 こちらは非透過ファビコンと透過ファビコンの両方作成できますが、
 なぜか 32x32 のファビコンが生成され、
 実際に16x16 で見ると微妙に見栄えが変わってしまうことがあります。

3.アイコンファイルをアップロードする
 「管理画面」の「ファイルのアップロード」を開き、
 先ほどジェネレートした favivcon.ico をアップロードします。

4.テンプレートを改造する
 改造と言ってもたいしたことはありません。
 「管理画面」の「テンプレートの設定」を開くと、
 「HTML編集」と「スタイルシート編集」の2つの編集枠が出てきます。
 このうち「HTML編集」の方だけに一行追加するだけです。
 先ず<head>と</head>という部分を探します。
 この間に以下を挿入します。

<link rel="shortcut icon" href="http://blog-imgs-32.fc2.com/c/y/b/cyberbaba/favicon.ico" />


 http://blog-imgs-32.fc2.com/c/y/b/cyberbaba/favicon.ico の部分は、
 ファイルのアップロードをしたときのパスとファイル名をコピーしてメモしておき、
 自分のファビコンのパス、ファイル名を記述します。
 そして「変更」ボタンを押して完了です。

画像を選んだり作ったりするのは大変ですが、操作自体は簡単なので、
デザインやオリジナリティーにこだわる方は是非やってみてください。


※注意点
注意すべきなのはファイル名とブラウザの問題です。

Internet Explorer の場合は、ファイル名が favivcon.ico 以外は、
ファビコンと認めないようです。
テストの時はいくつもファビコンの見栄えを比較確認したいので、
Firefox などでテストすることをお勧めします。

Internet Explorer のもう一つの問題は、
ファビコンを変更しても、一時ファイル、履歴、お気に入りのブログ該当部分を
削除した上で、ブラウザを再起動しないと変更が反映されないことです。
これが面倒なのでテストのときは Firefox を使うことをお勧めします。
ただしこの現象は Firefox でも起きる場合があるので、
ファビコンを変更したのにも関わらず変更が反映されない場合は、
Firefox の場合でも保存情報の削除をしてください。

・ブラウザの保存情報の削除の方法
Internet Explorer の場合は、
「ツール」→「インターネットオプション」→「削除」→
「ファイルの削除」+「履歴の削除」で、一時ファイルと閲覧履歴をクリアします。
また該当ブログを「お気に入り」に追加している場合は、
該当ブログの「お気に入り」も削除します。
「お気に入り」の削除は削除したい「お気に入り」にマウスを移動し、
右クリックするとメニューが表示されるので、「削除」をクリックします。
その後ブラウザを再起動すると、新しいファビコンに変わります。

Firefox の場合は、
「ツール」→「プライバシー情報の消去」→「今すぐ消去」で、
表示したページの履歴とキャッシュを消去し、
また該当ブログの「ブックマーク」を削除して、再起動してします。
「ブックマーク」の削除は削除したい「ブックマーク」にマウスを移動し、
右クリックするとメニューが表示されるので、「削除」をクリックします。
その後ブラウザを再起動すると、新しいファビコンに変わります。


・他のブログへのファビコン設置方法
 画像の作成は全てFC2ブログと共通ですので、
 上記の「1.画像を作成する」を参照してください。

・はてなダイアリーへのファビコンの設置方法
 「管理画面」の「設定」を開くと、
 「お気に入りアイコン (favicon.ico)」という欄があるので、
 そこに任意の画像をアップロードするだけです。これで全部作業終了です。
 16x16 でない画像も自動的に変換されます。

 ただし、注意すべきことは、一度アップロードすると簡単に変更できないことです。
 一旦削除してもう一度アップロードすれば良いはずですが、
 前のファビコンをサーバでキャッシュしているため、
 変更が反映されるのに約1日かかります。
 (はてなダイアリーのオリジナルのファビコンにはすぐに戻ります。)

 もう一つ注意すべきことは、png または gif などの 背景透過画像は、
 背景非透過のファビコンに変換されてしまうことです。
 筆者が gif ファイルをアップロードしたら、背景が黒くなってしまいました。
 png または gif といった背景透過が可能なファイル形式のファイルを使う場合は、
 あらかじめ画像作成ソフト等で jpg や bmp といった、
 非透過ファイルに変換して確認してからアップロードしてください。

・Seesaaブログへのファビコンの設置方法
 FC2ブログと同様のようです。
 「Seesaaブログ」「ファビコン」または「favicon」をキーワードにして、
 ネット検索すると情報がたくさん出てきます。

・アメーバブログへのファビコンの設置方法
 http://www.favicon.jp/blog_setting/ameba.php
 このサイトによれば割と簡単に可能です。

・てぃーだブログへのファビコンの設置方法
 http://okinawabasketball.ti-da.net/e2354628.html
 このサイトによれば可能ではありますが、てぃーだブログの場合は、
 ファイル拡張子が ico のファイルをアップロードできないようなので、
 実際にブラウザで見ると正しく表示されない可能性があります。
 事実、上記のサイトも、Firefox ではファビコンが表示されますが、
 Internet Explorer 7 ではファビコンが表示されませんでした。
 ファイル拡張子 ico のファイルをアップロードができるよう、
 要望をした方が良いでしょう。
 あるいは無料レンタルサーバなどを使い、
 favicon.ico をどこか別のサーバに置く方法もあります。

 他のサーバに置く最も簡単な方法は、
 FC2ブログなどの ico ファイルがアップロード可能なブログを開設し、
 新規開設ブログは放置して favicon.ico だけリンクして使うという方法です。

・livedoorブログへのファビコンの設置方法
 http://www.nnistar.com/archives/200509162335.php
 このサイトによれば可能ではありますが、上記のてぃーだブログの場合と同様、
 ブログ内に拡張子が ico のファイルをアップロードできないので、
 ファイル拡張子 ico のファイルをアップロードができるよう要望を出すか、
 他のサーバにファビコンファイルを置いた方が良いようです。

・Yahoo!ブログではファビコンの変更はできないようです。
 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1412095194?fr=rcmd_chie_detail

・gooブログ、exciteブログでもどうやらファビコンの変更はできないようです。
 ネット検索しましたが、変更方法がでてきませんでした。
 exciteブログは実際にFC2ブログと似た方法でスキンの変更を試みましたが、
 「<link rel="shortcut icon"> はセキュリティ上使用できません」
 というエラーメッセージが出てきてスキンの変更ができず、
 ファビコンの変更ができませんでした。

・参考 URL
初心者でもできる簡単FC2ブログの作り方 ファビコンをつけよう!
http://rgrg.blog61.fc2.com/blog-entry-179.html
favicon.icoについて (nni's blog)
http://www.nnistar.com/archives/200509162335.php
あるSEのつぶやき: IEでfaviconが表示されないときの対処方法
http://fnya.cocolog-nifty.com/blog/2007/08/iefavicon_79d8.html
FC2アイコン (アイコン作成サイト)
http://icon.fc2.com/
Dynamic Drive (ファビコンジェネレートサイト)
http://tools.dynamicdrive.com/favicon/
Favicon Japan!! (ファビコンジェネレートサイト)
http://www.favicon.jp/
FavIcon from Pics (ファビコンジェネレートサイト)
http://www.html-kit.com/favicon/
Firefox ダウンロードサイト
http://mozilla.jp/firefox/
GIMP2を使おう (無料画像作成ソフトダウンロードサイト)
http://www.geocities.jp/gimproject/gimp2.0.html
窓の杜 - XnView (無料写真加工ソフトダウンロードサイト)
http://www.forest.impress.co.jp/lib/pic/piccam/picviewer/xnview.html

※この記事の間違いの指摘や質問がある場合は、公開コメントにてお願いいたします。


【追記】

微妙なので分かりにくいかもしれませんが、
当ブログのファビコンを変更しました。

このファビコンが表示されるはずですのでクリックしてご確認ください。
色や輪郭が微妙に違う場合、
もし面倒でなければ以下の手順で変更いただければありがたいです。
面倒であればそのままでも結構ですが・・・

Internet Explorer をお使いの方は、
「ツール」→「インターネットオプション」→「削除」→
「ファイルの削除」+「履歴の削除」で、一時ファイルと閲覧履歴をクリアしてください。
また当ブログを「お気に入り」に追加している方は、
当ブログのを「お気に入り」も削除してください。
「お気に入り」の削除は削除したいを「お気に入り」にマウスを移動し、
右クリックするとメニューが表示されるので、「削除」をクリックします。
その後ブラウザを再起動すると、新しいファビコンに変わります。

Firefox をお使いの場合は、
「ツール」→「プライバシー情報の消去」→「今すぐ消去」で、
表示したページの履歴とキャッシュを消去し、
また当ブログの「ブックマーク」を削除して、再起動してください。
「ブックマーク」の削除は削除したい「ブックマーク」にマウスを移動し、
右クリックするとメニューが表示されるので、「削除」をクリックします。
その後ブラウザを再起動すると、新しいファビコンに変わります。

まあ大抵の方はそんなことどうでも良いとは思いますが・・・
コンピュータ  |  トラックバック(0)  |  コメント(0)  |  ↑Top

Comment

コメントを投稿する


 管理者だけに表示  (非公開コメント投稿可能)

▲TOP

Trackback

この記事のトラックバックURL

→http://cyberbaba.blog57.fc2.com/tb.php/19-6a09234c

この記事にトラックバックする(FC2ブログユーザー)

この記事へのトラックバック

▲TOP

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