バナー
『スポンサーサイト』
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【--/--/-- --:--】 スポンサー広告 |
【PR】
『ブログにもアイコンを』
そういえばうちのブログってアイコン(favicon.ico)が無いなぁと思い、いろんなブログサイトを見てまわったところ、意外とほとんどのブログでアイコンを使っていませんでした。ブックマークも確認してみるとやはりアイコンを使ってません。どうりでブックマークから探してるブログを直感的に見つけられないんですね。
ということでうちのブログにアイコンを付けてみました。簡単に手順を残しておきます。

(1)これがアイコン
WEBアイコン1

ブラウザのアドレスバーやブックマーク(IEではお気に入り?)に表示される 16×16 ドット(ピクセル) の画像です。ブックマークにこれが表示されていたら直感的に目的のサイトが見つかります。

(2)画像ファイルの準備(作成)
好みの画像編集ソフトで画像を作ります。128色未満で16×16ドットのGIF形式かPNG形式が望ましいです。が、分からない場合はとにかく正方形の画像をGIF形式で保存します。

(3)favicon.ico化
作成した画像をブラウザで表示できるように favicon.ico というファイルに変換します。ファイル名を変えるということではありませんので次のように続けます。
作成したファイルを Favicon Japan というサイトで変換します。Favicon Japan の「Favicon自動生成」で作成したファイルを指定して「Faviconを作成する」をクリックします。できあがった favicon.ico を適当なディレクトリへダウンロード&保存します。このファイルは後々使うので、このときのディレクトリを忘れないように。

(4)ブログへ favicon.ico をアップロード
ブログを読みに来るみんながアイコンを見れるように FC2 のサーバにアップロードします。アップするとリストに次のように表示されます。
まず、ブログの管理者ページを開きます。
WEBアイコン2

画面左側の[ツール]から[ファイルのアップロード]を選択して (3) で得られた favicon.ico をアップロードします。
WEBアイコン3

「表示」を右クリックしてのリンクURLをコピーします。うちのブログの場合、「http://blog-imgs-27.fc2.com/r/a/m/ramendb/favicon.ico」でした。

(5)テンプレートの編集
【自己責任】ここの作業は失敗するとブログを表示できなくなるという致命的なトラブルを引き起こします。酔っ払っていたり、よっぽどの○○○でなければ失敗することはないでしょうが、万が一のことがあります。修復する自信の無い方や、失敗を人のせいにするタイプの方は断念してください。何が起こっても自己責任です。こちらでは何の対処もいたしません。

WEBアイコン4

管理ページの画面左側の[環境設定]から[テンプレートの設定]を選択します。旗マークのついているテンプレートの[編集]をクリックします。クリックすると「名称」「HTMLの編集」「スタイルシートの編集」と出てきますが、「HTMLの編集」の内容に変更を加えます。
先頭の方にという表記があるます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Style-Type" content="text/css">
   :

その行のすぐ下に次の一行を加えます。
<link rel="shortcut icon" href="(4)でコピーした内容">
うちのブログでは次のようになっています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja-JP">
<head>
<link rel="shortcut icon" href="http://blog-imgs-27.fc2.com/r/a/m/ramendb/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Style-Type" content="text/css">
   :

[更新]ボタンを押したら設定完了です。ブログを確認してみましょう。

うまくできたら、「できたよコメント」を書いてください。

■ 参考サイト
Favicon Japan favicon.ico を自動生成します。
【2007/01/29 19:05】 未分類 | トラックバック(0) | コメント(1) |
【PR】
<<カレー醤油 | ホーム | こってり?油そば>>
comments
--参考にさせて頂きました--
初めまして!
ファビコンの件、気にはなっていたのですが設置方法がわからなくて諦めていましたが、とても分かりやすく御説明されていたので悩む事無く設置する事が出来ました。

この記事でホント助かりました、ありがとうございます(^^
【2007/02/15 14:35】 URL | ゆーちゃん #.Nnu5I0M[ 編集] |
please comment













管理者にだけ表示を許可する

trackback
trackback url
http://ramendb.blog16.fc2.com/tb.php/445-140f533d
| ホーム |

フィルムの力

before
after
写真中の緑のツマミを左右に動かしてください

L判の写真(左)とフィルムから直接スキャンしたもの(右)を比較しています。
やり方は…

相互リンク

相互リンクしていただける方はこちらからお願いします。

links

entries

comments

trackbacks

FC2 SEOリンク


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