今回はシーサーブログにファビコンを設置する方法を紹介していきます。ファビコンを設定する事でお気に入りやブックマークされた時、ウィンドウを沢山開いている時等に自分のサイトを見つけやすくなりますし、他のサイトとの差別化もできるのでこれはやっておく事をおすすめします。
ファビコンを設定すると自分のサイト名の左にアイコンが表示され、ブックマークやお気に入りされた時にも設定したアイコンが表示されるようになります。こんな感じ。
それでは早速準備と設置の仕方を解説していきます。
ファビコン設置の前準備
ファビコンを設置するためにはファビコンに使う画像を用意する必要があります。表示されるアイコンのサイズは「16px」×「16px」ですが、このサイズで用意する必要はありません。
ただし、大きな画像を用意しても最終的にはこの「16px」×「16px」のサイズに縦横比が均等に縮小されるので正方形の画像を用意しておいた方がいいでしょう。
ちなみにこのブログのファビコンは「ペイント」で自分で作ってみましたが、自分で作れない場合はフリー素材から探してきてもOKです。
ファビコン設置の手順
先にファビコンの設置の手順を簡単にまとめておきます。
- ファビコン用画像を用意する
- 画像ファイルをファビコン用のファイル形式「.ico」に変換
- シーサーに変換した画像をアップロード
- 画像のURLをHTMLに追加
普通の画像を「.ico」形式に変換する必要がありますが、これは外部のサイトで簡単に変換する事ができます。
画像ファイルを「.ico」に変換
前述したようにファビコンを設置する場合には普通の画像ファイルではなくて「.ico」というファイル形式に変換する事が必要です。
そのため、画像を用意したらまずはファビコン用画像への変換をします。このサイトへ移動しましょう。
⇒FavIcon from Pics
まずはこのサイトで「ファイルを選択」し、「Generate Favlcon.ico」をクリック。
使いたい画像が表示されている事を確認して「Download Favicon package」をクリック。
これでファビコン用に変換した画像をダウンロードできます。ダウンロードしたファイルを開いてみると複数のファイルがあると思いますが、このうち「favicon」というのを使用する事になります。
シーサーブログに変換したファビコン画像をアップロード
シーサーブログの管理画面から「ファイルマネージャ」をクリックして先ほどダウンロードした「.ico」形式の「fabicon」を選択しアップロード。
アップロードしたら下のファイル一覧という部分に「favicon.ico」という名前のファイルがあるのでこれをクリック。
すると右下に画像のURLが表示されるのでこれをコピーしてメモ帳等に貼り付けておきましょう。
この画像のURLをコピーしたらこのページには用はないので閉じてOKです。そして今コピーした画像ファイルのURLをこのコードの中に入れて下さい。
<link rel="shortcut icon" href="画像ＵＲＬ" />
画像のURLという文字だけ消してコピーしておいたファビコンのURLを入れて用意しておきます。
HTMLにファビコン画像を追加
シーサーブログの管理画面に戻り「デザイン」⇒「HTML」をクリックします。
自分のカスタマイズしているHTMLをクリック。
HTMLの「head」と「/head」の中の好きな位置に先ほどのコードを入れて保存します。私の場合は「/head」の直前に入れてます。
設置できたら一番下の「保存」をクリックして完了。
これで自分のブログを表示させるとファビコンが表示されるはずです。
ゆずＭＡＮ様
返信ありがとうございます。解決に至らずすみません！私も確認してましたが、IEでの表示ができているのに、Chromeだと表示さませんね。ただ、別のブログではChromeで表示される所を考えるとHTMLの部分で何か相性の悪い記述があるのかも知れません。もし何か分かればブログの方にでもコメントさせて頂きますね。今後もどうぞよろしくお願い致します。
しげぞう様
ファビコンはあいかわらず表示されませんが、ＩＥでは表示されているようなので、
とりあえず、これで良しとしておきます。
コンテンツなどの充実に時間を割く方が肝心ですからね。
ありがとうございました。
カスタマイズでわからないことがあれば、また相談させていただきますm(__)m
ゆずＭＡＮ様
返信ありがとうございます。原因なんでしょうね？多分、別のテンプレートではHTMLにコードを入れると反映されます、実際私のブログにコードをコピペして反映されたので。
HTML的な部分でも問題はなさそうですが、時々Seesaaブログのシステム的な？部分で一時反映されないコードがあったりしますので、コードを一度外して保存。保存をしてから再度コードを入れて保存という最初に試した方法をもう１度試してもらえないでしょうか？
また、HTMLやCSSのバックアップを取っておいて、別のデザイン（テンプレート）でも反映されるか確認してみるのも良いかもしれません。もう少し調べてみますので、また反映されない時はお手数ですが、コメント頂けると助かります。
しげぞう様
たびたび、失礼いたします。
ゴミ箱からも削除しましたが、表示されません。
ゆずＭＡＮ様
返信ありがとうございます。了解しました。以下３点も確認をお願いします。
１．削除した「Favicons」がゴミ箱からも削除されているか確認。
２．GoogleChromeの再起動
２．再度ブログを表示させて、「Ctrl」と「F5」を一緒に押してリロード。
以上２点を確認しても反映されない場合にはまたコメント頂けると助かります。どうぞよろしくお願いします。
しげぞう様
キャッシュの削除と、ディレクトリにある「Favicons」の削除を行いましたが、
表示されません（泣）
ゆずＭＡＮ様
返信ありがとうございます。Chromeでファビコンが表示されないというのは結構あるみたいですね。検索すると色々情報がありましたので、こちらも一度試してみると良いかも知れません。
⇒http://milk-pop.co/%E3%83%91%E3%82%BD%E3%82%B3%E3%83%B3%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB/382/
それでも反映されない場合にはまたコメント下さい。もう少し原因を探してますね！
追記します。
ＩＥなら表示されました！
Google Chromeだと、表示されないようです。
対処法はございますか？
しげぞう様
たびたびのメールで失礼します。
画像は、柚子なので、あっています。
ただ、どこに挿入しても反映されないようです。
ゆずＭＡＮ様
返信ありがとうございます。教えて頂いたURLに挿入されているコードを調べてそのままコピペして私の使っているSeesaaブログに貼り付けてみたのですが、フルーツ？みかん？のようなアイコンが表示されました。なので、コード自体は間違っていないと思います。旧システム、新システムでも両方ためしてみましたが、どちらも表示されました。
コード自体が間違っていないので、再度ファビコンのコードを削除して保存し、今後は「/head」の直前ではなく、「head」の始まりの直後などに挿入して保存してみてもらえますか？貼り付け位置変えて試してみてそれでも表示されない場合にはお手数ですが再度コメント下さい。よろしくお願いします。
しげぞう様
やってみましたが、変わりません。
ＵＲＬは、です。
ご確認よろしくお願いします。
ゆずＭＡＮ様
コメントありがとうございます。時々設置したコードが反映されない事があります。その場合はファビコンのコードを外して一度保存し、元の状態にしてから再度コードを入れて保存。それでブログを表示させて「Ctrl」と「F5」を一緒に押して確認してみて下さい。
それでも反映されない場合にはお手数ですが、ブログのURLを教えてもらえると助かります。URLはコメント公開時には削除しますので、どうぞよろしくお願い致します。
しげぞう様
お世話になります。
ファビコンの設置をしたのですが、表示されません。
挿入場所もＵＲＬも間違いないのですが、原因として、考えられることはなにかありますでしょうか？