PrinPrin情報局

2010年3月1日月曜日

BloggerでFavicon設定


私の使っているブログはGoogleのBloggerを使っているのですが、標準ですとURLを入れる欄の所へ「image 」←このようなアイコンが表示されますよね!

URL_Left

このアイコンを独自のアイコンへ変更しようと思ったわけですが、このアイコンの変更をするのに「Favicon」って言うものを指定するみたいです。

まずは、「Favicon」をWikiで検索してみました。

Favicon=Favicon(ファビコン)はウェブサイトやウェブページに関連付けられたアイコンのことである。

↑ と言う事みたいです。

そこで、普通のWebページなら、16x16ドットのアイコンファイルを作って「index.html」ファイルが置いてある場所と同じフォルダーへ「favicon.ico」って言うファイル名を付けて置いておけばいいようですが、私の知る限りでは、Bloggerは、そのような場所へファイルをアップロード出来ないです。orz

いろいろ考えた結果、このBloggerへ目立たない所へJPEGファイルを置いて、それをBloggerのテンプレートを修正して強引に読み込んでやらば出来るかなーと思って実験してみました。
(「PrinPrin_Rogo004_16x16 」←ここへ貼ったのを使ってみます。
http://lh4.ggpht.com/_b4XzEpXco1s/S4td7l1OvQI/AAAAAAAAVCI/5S0JsFUqTUg/PrinPrin_Rogo004_16x16%5B4%5D.jpg

①Bloggerへログインして「カスタマイズ」⇒「レイアウト」⇒「HTMLの編集」を選びます。
(念のため、バックアップを取ってから行ってね!)

②HTML文の<head>・・・</head>の間へ次のように入れます。

<head>
  :
  :
<link href='画像ファイルのURL' type="image/jpeg" rel='shortcut icon'/>

</head>

↑ このような行を追記してやればOKです。

<head>
  :
  :
<link href='http://lh4.ggpht.com/_b4XzEpXco1s/S4td7l1OvQI/AAAAAAAAVCI/5S0JsFUqTUg/PrinPrin_Rogo004_16x16%5B4%5D.jpg'
type='image/jpeg' rel='shortcut icon'/>

</head>

↑ 実際にBloggerへ一旦投稿した後にURLを調べて貼ってみたのが、こんな感じです。

image 

 

<head>
  :
  :
<link href='画像ファイルのURL' rel='shortcut icon'/>

</head>

↑ 普通のアイコンファイル(.ico)が設置可能なら、↑ こんな感じです。
(「 type='image/jpeg'」←が必要ないです。)

③修正が完了したら、プレビューで表示して確かめてみます。

④プレビューでうまく成功しましたら、保存して完了です。

================================================

Blogger_favicon 
※現在、↑ ここのBloggerのURLの横のアイコンは、こんなアイコンになっています。

※今、知ったのですが、IE7では、.icoファイル以外のファイルは開けないようなのです。

次のようにすると、いいようです。(FireFoxなどは、アニメーションGIFでも対応)

<link rel="shortcut icon" href="ファビコンまでのパス/favicon.ico">

<link rel="icon" href="ファビコンまでのパス" type="image/gif" />

因みに、アイコンファイルの作成には、フリーソフトの「アイコンウィザード」を使用しています。
JPEGなどの画像ファイルを いろんなサイズのアイコンファイルへ変換してくれます。
Faviconファイル用には、16x16ピクセルと32x32ピクセルのサイズで256色に原色して作成すればいいみたいです。

 

※Googleアカウントが無い方は、コメントを入れる時に「名前/URL」を選んで下さいね^^

デル株式会社 服 安い 通販

2 件のコメント:

La さんのコメント...

これがFaviconっていうのか。。。ずっと気にはなってたけどやり方知りませんでしたw

今は特段必要ないけど、必要な時はまたここ開くかも...φ(・ω・*(・ω・*)φメモメモ♪

コメント投稿ページはTvdさんのFaviconになってないですよwww
ここは別管理なのかな?

Licca さんのコメント...

>Laさん、
あまり大きな問題じゃないけど、
前から気にはなっていたよねー^^

しかし、このコメント投稿ページは
どうすれば、いいのでしょうね!
テンプレートとか、カスタマイズ出来るように、なってたかなー^^