FC2ブログ、オリジナル・ファビコン ( favicon ) のお勧め


お世話になってる FC2 ブログ。 最近 livedoor も試し、改めて FC2 の素晴らしさを実感しているところですが、そこはそれ、FC2 だったら文句無し! ってわけにはいかず、こうだったらいいのになぁ って部分だって いくつかあるのであります。

現状、その想いを最も強く感じているのが ファビコン = favicon 。 画面最上段、アドレスバー 左側に表示されるサイトのシンボル・マーク。 FC2 だったら 赤いユニコーン の事をファビコンと呼びます。

ただ、このファビコン、アダルト・サイトが盛大に使っているものですから … つまりアダルト・サイトも当館同様 FC2 を利用しており、ファビコンをそのまま使っているものですから … 以前、この 赤いユニコーン がアダルト・サイトのイメージを兼ね備えるようになってしまっているというご指摘を頂いた事があり、以来 気になり、なるべく避けるようにしているのであります。

で、今回は、FC2 ブログ へ オリジナル・ファビコンを設置する方法をご紹介いたします。 あ、あくまで設置方法です。 デザイン的なファビコンの作り方ではありません。 ファビコン = favicon.ico は既に出来上っているものとし、FC2 への設置方法のご紹介です。

注1 ) ファビコンの無料配布を行っております。 ご希望の方はコメント欄よりご依頼願います。


【 01) ファビコンのアップロード 】

まずは、ファビコンをあなたのブログ = サイトへアップロードして下さい。

やり方は、画像をアップロードするのと全く同じです。

図① その際、ファビコンの住所 ( URL ) をテキスト・エディター ( メモ帳 ) 等にコピペしておいて下さい。 ( 下記画像をクリックして頂くと拡大画面でご確認頂けます。 )

 ファビコン ( favicon ) のお勧め 1



【 02) テンプレートのバックアップを取る 】

念のため、テンプレートのバックアップを取っておきます。 まずは PC用から始めますが、携帯用、スマホ用も同様に行って下さい。

図② 管理画面 ⇒ 『 テンプレートの設定 』 画面、赤い旗が立っている欄の

図③ 複製 という文字をクリックします。

 ファビコン ( favicon ) のお勧め 2


今回の私の画面では、sample_08_03b という名前のテンプレートが複製され、sample_08_03b1 という新しいテンプレートが追加されました。

図④ 複製 されたテンプレートにチェックを入れ

図⑤ 適用 ボタンを押します。

 ファビコン ( favicon ) のお勧め 3


sample_08_03b1 という新しいテンプレートが適用状態となり、赤い旗が立っているのが確認できます。

 ファビコン ( favicon ) のお勧め 4



【 03) 新規テンプレートに favicon を書き込む 】

テンプレートの設定 画面、上記画像の すぐ下に、[ sample_08_03b1 ] のHTML編集 という部分があります。 その、四角い枠で囲まれた ヘッド・セクションに、favicon のタグを書き込んでいきます。

ヘッド・セクションとは、HTML編集欄最上部にある <head> ⇒ </head> までの部分です。

例えば私のソースを見て頂くと …

5行目    <head>
         ↓
40行目   </head>   までを言います。

注2 ) 他サイトのソースを確認するには、該当ページ上のどこかでマウスを右クリック、ソースの表示(V) という文字を左クリックして下さい。


そのヘッド・セクションのどこかに

<link rel="shortcut icon"********" type="image/vnd.microsoft.icon">
<link rel="icon" href="********" type="image/vnd.microsoft.icon">

という2行を書き込んで下さい。 ( ヘッド・セクション内ならば どこでもかまいません。 )


******** には、01) でアップロードし、コピーしておいた URL を貼り付けます。

例えば私のサイトでは 19行と20行に書き込んであります。

ちなみに、18行の <!-- Favicon --> は、ここに何が書き込んであるか後々分かりやすくするためのものです。 皆さんも18行 ~ 20行までを参考にされる事をお勧め致します。 このやり方はサイト運営者によって様々なスタイルがあり、それぞれ個性的で興味深いです。


最後にHTML編集欄の下にある 更新 ボタンを押して頂けば、作業は完了です。 ご自分のブログに反映されているか、ご確認下さい。 一般的に 「 オレのには反映されてねぇぞ! 」 などとご心配される方が多いですが、更新 ボタンを押されていないか、ご自分のサイトをリロード ( 再読み込み = F5 =キーボード上段、ファンクション・ボタンの左から5番目 ) されていないか、そんなケースがほとんどのようです。

02) ~ 03) までを、忘れずに、携帯用、スマホ用でも同様に行って下さい。


参考サイト : 半透過マルチアイコン favicon.ico を作ろう!


追記1 : このサイトは写真館ですので、ファビコンのモチーフはカメラです。 私が写真を始めた頃、最もお世話になった F4E というカメラをモデルにしております。  ≫ 館主経歴


追記2 : ファビコンの設定は livedoor blog でも同様に行えます。 livedoor は設定の簡易バージョンもあり、そちらを利用すると FC2 よりかなり容易です。 お問い合わせが多いようでしたら livedoor のページも作りますね。 残念ながら YAHOO! ブログの場合、ファビコン設定は出来ないみたいです。 その他のブログへの対応はよく分かりません。 各自、ご自分で、自己責任でご確認下さい。


追記3 : デザイン的なファビコン作成方法のご紹介は、私には難しくて出来ません。 様々なサイトで紹介されていると思いますので、そちらをご参照願います。


追記4 : 私が基本的に利用しているファビコンはマルチ・アイコンと呼ばれているものです。 例えば …

64px × 64px   32px × 32px   24px × 24px   16px × 16px   12px × 12px

などのように、 16px を含む サイズの異なるアイコン画像を いくつか PNG 形式で用意しておき、上記参考サイトで合成してもらいます。 参考サイトだけではよく分からない というお問い合わせが多ければ … 気が向けばこちらのページも作っちゃうかもしれませんが、livedoor 含め、個々のお問い合わせには応じかねます。 お問い合わせは各該当サイトへお願い致します。 個々のご要望はファビコン = favicon.ico 作成に限らせて頂きます。

あの、赤いユニコーンはアダルト・サイトだけにしたいのです。