[ブログカスタマイズ]お気に入りにアイコンを設置するアフィリエイトでお小遣いを稼ぐ

HOME > CATEGORY － [ブログカスタマイズ]お気に入りにアイコンを設置する

▼ お気に入りにアイコンを設置する

2008/03/03(月)

ブラウザーのお気に入りにアイコンが表示されているのを見かけたことがありませんか？
これをファビコン（favicon.ico）と言います。

お使いのブラウザーの、左側をご覧になってください。
このようにサイト名の左横に、ファビコンが表示されていますね？

これがファビコン（favicon.ico）です。

ファビコンが表示されるようにしておくと、ブラウザーに登録してくださった方が、ブラウザーからあなたのブログを、見つけやすくなるんです。

ファビコンを設置しておくと、再訪問してもらいやすくなりますから、アクセスアップ対策になります。

●ファビコンを表示する方法

まずはネットから、気に入ったファビコン画像を探します。
ネットには、ファビコンを無料配布しているサイト様が、たくさんありますから、
利用規約（商用利用可能かどうか？）をよく読んだ上で、使わせていただきましょう。
ヤフー検索の　ファビコン素材　検索結果ページへ行くにはここをクリック

気に入ったファビコン（画像）が見つかったら、画像にマウスを合わせて右クリック。
メニュー一覧を出します。
そして一覧の中から「名前を付けて画像を保存（S）」をクリック

「画像保存｣画面が出てきますので、お好みの場所やフォルダに画像を保存します。
右下の「保存（S)」をクリック

※この時に「画像保存｣画面下の欄にある「ファイルの種類(T)」をご覧になって、ファイルの種類を確認してください。
ファイル名が××××.icoとなっている場合は、4から7の手順は飛ばしてください

ファイル名が××××.ico以外の××××.jpgや××××.bmp.××××.gifとなっている場合は「FAVICONメーカー」のサイトへ行きます。
FAVICONメーカーのサイトへ行くにはここをクリック

サイトへ行ったら「参照｣ボタンを押して、先ほど保存した画像を指定します

次に「Favicon作成｣ボタンを押します

「ファイルのダウンロード」画面が出ますので「保存(S)」をクリックしてお好みの場所にファイルを保存します。
これで画像が××××.icoというファビコン専用画像になりました。

では、ブログにファビコンを表示させるカスタマイズをしてみましょう

FC2ブログ管理画面ログインします

左メニュー一覧にある｢ツール」バーの中から「ファイルのアップロード」をクリック
します

「参照｣ボタンを押して先ほど保存した「××××.ico」ファイルを選択します。

次に「アップロード」ボタンをクリック

画面下にファイルがアップロードされていますから「記事を書く」ボタンをクリックします

すると画面が切り替わって「新しく記事を書く」画面になりましたね？
そしてこのような表示になっていると思います。

このブログの場合は
<a href="http://blog-imgs-12.fc2.com/a/f/f/affiliateland/favicon.ico" target="_blank">http://blog-imgs-12.fc2.com/a/f/f/affiliateland/favicon.ico</a>となっています

この中からhttp://blog-imgs-12.fc2.com/a/f/f/affiliateland/favicon.icoの部分をコピーしてください
注意）ご自分のブログのhttp://～部分ですよ

左サイドバー「環境設定」メニュー一覧の中にある「テンプレートの設定」をクリックします

「テンプレート名／プレビュー」一覧に、お使いのテンプレートが表示されています
（テンプレート名の左に旗が表示されています）

※ミスをした場合でも、後ですぐに元に戻せるように、テンプレートの複製を取っておきましょう。
「複製｣ボタンをクリック

複製を取ったら「編集｣ボタンをクリックして次に進みます

「HTML編集」と「スタイルシート編集」の2画面が表示されます
上の画面の「HTML編集」をカスタマイズします。

HTML内の上部分に<head>と書かれている場所があります。
その<head>から</head>の間のどこかに
<link rel="shortcut icon" href="（ここに先ほどコピーしたURLを挿入）">
と記述してください。

このブログの場合は
<link rel="shortcut icon" href="http://blog-imgs-12.fc2.com/a/f/f/affiliateland/favicon.ico">
</head>
の場所に記述しています
終ったら「更新」ボタンをクリックして完了です。