今回はシーサーブログにファビコンを設置する方法を紹介していきます。ファビコンを設定する事でお気に入りやブックマークされた時、ウィンドウを沢山開いている時等に自分のサイトを見つけやすくなりますし、他のサイトとの差別化もできるのでこれはやっておく事をおすすめします。
ファビコンを設定すると自分のサイト名の左にアイコンが表示され、ブックマークやお気に入りされた時にも設定したアイコンが表示されるようになります。こんな感じ。
それでは早速準備と設置の仕方を解説していきます。
ファビコン設置の前準備
ファビコンを設置するためにはファビコンに使う画像を用意する必要があります。表示されるアイコンのサイズは「16px」×「16px」ですが、このサイズで用意する必要はありません。
ただし、大きな画像を用意しても最終的にはこの「16px」×「16px」のサイズに縦横比が均等に縮小されるので正方形の画像を用意しておいた方がいいでしょう。
ちなみにこのブログのファビコンは「ペイント」で自分で作ってみましたが、自分で作れない場合はフリー素材から探してきてもOKです。
ファビコン設置の手順
先にファビコンの設置の手順を簡単にまとめておきます。
- ファビコン用画像を用意する
- 画像ファイルをファビコン用のファイル形式「.ico」に変換
- シーサーに変換した画像をアップロード
- 画像のURLをHTMLに追加
普通の画像を「.ico」形式に変換する必要がありますが、これは外部のサイトで簡単に変換する事ができます。
画像ファイルを「.ico」に変換
前述したようにファビコンを設置する場合には普通の画像ファイルではなくて「.ico」というファイル形式に変換する事が必要です。
そのため、画像を用意したらまずはファビコン用画像への変換をします。このサイトへ移動しましょう。
まずはこのサイトで「ファイルを選択」し、「Generate Favlcon.ico」をクリック。
使いたい画像が表示されている事を確認して「Download Favicon package」をクリック。
これでファビコン用に変換した画像をダウンロードできます。ダウンロードしたファイルを開いてみると複数のファイルがあると思いますが、このうち「favicon」というのを使用する事になります。
シーサーブログに変換したファビコン画像をアップロード
シーサーブログの管理画面から「ファイルマネージャ」をクリックして先ほどダウンロードした「.ico」形式の「fabicon」を選択しアップロード。
アップロードしたら下のファイル一覧という部分に「favicon.ico」という名前のファイルがあるのでこれをクリック。
すると右下に画像のURLが表示されるのでこれをコピーしてメモ帳等に貼り付けておきましょう。
この画像のURLをコピーしたらこのページには用はないので閉じてOKです。そして今コピーした画像ファイルのURLをこのコードの中に入れて下さい。
1 | <link rel="shortcut icon" href="画像ＵＲＬ" /> |
画像のURLという文字だけ消してコピーしておいたファビコンのURLを入れて用意しておきます。
HTMLにファビコン画像を追加
シーサーブログの管理画面に戻り「デザイン」⇒「CSS/HTML編集」と進み、適応中のテンプレートを選択。「HTML編集」をクリックします。
HTMLの「head」と「/head」の中の好きな位置に先ほどのコードを入れて保存します。私の場合は「/head」の直前に入れてます。
設置できたら一番下の「保存」をクリックして完了。
これで自分のブログを表示させるとファビコンが表示されるはずです。
ゆずＭＡＮ様
返信ありがとうございます。解決に至らずすみません！私も確認してましたが、IEでの表示ができているのに、Chromeだと表示さませんね。ただ、別のブログではChromeで表示される所を考えるとHTMLの部分で何か相性の悪い記述があるのかも知れません。もし何か分かればブログの方にでもコメントさせて頂きますね。今後もどうぞよろしくお願い致します。