今回はシーサーブログにファビコンを設置する方法を紹介していきます。ファビコンを設定する事でお気に入りやブックマークされた時、ウィンドウを沢山開いている時等に自分のサイトを見つけやすくなりますし、他のサイトとの差別化もできるのでこれはやっておく事をおすすめします。
ファビコンを設定すると自分のサイト名の左にアイコンが表示され、ブックマークやお気に入りされた時にも設定したアイコンが表示されるようになります。こんな感じ。
それでは早速準備と設置の仕方を解説していきます。
ファビコン設置の前準備
ファビコンを設置するためにはファビコンに使う画像を用意する必要があります。表示されるアイコンのサイズは「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をこのコードの中に入れて下さい。
<link rel="shortcut icon" href="画像ＵＲＬ" />
画像のURLという文字だけ消してコピーしておいたファビコンのURLを入れて用意しておきます。
HTMLにファビコン画像を追加
シーサーブログの管理画面に戻り「デザイン」⇒「CSS/HTML編集」と進み、適応中のテンプレートを選択。「HTML編集」をクリックします。
HTMLの「head」と「/head」の中の好きな位置に先ほどのコードを入れて保存します。私の場合は「/head」の直前に入れてます。
設置できたら一番下の「保存」をクリックして完了。
これで自分のブログを表示させるとファビコンが表示されるはずです。
ブログを収益化するならWordPress利用がおすすめ
無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。
また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。
WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。
コメント
ゆずＭＡＮ様
返信ありがとうございます。解決に至らずすみません！私も確認してましたが、IEでの表示ができているのに、Chromeだと表示さませんね。ただ、別のブログではChromeで表示される所を考えるとHTMLの部分で何か相性の悪い記述があるのかも知れません。もし何か分かればブログの方にでもコメントさせて頂きますね。今後もどうぞよろしくお願い致します。
しげぞう様
ファビコンはあいかわらず表示されませんが、ＩＥでは表示されているようなので、
とりあえず、これで良しとしておきます。
コンテンツなどの充実に時間を割く方が肝心ですからね。
ありがとうございました。
カスタマイズでわからないことがあれば、また相談させていただきますm(__)m
ゆずＭＡＮ様
返信ありがとうございます。原因なんでしょうね？多分、別のテンプレートではHTMLにコードを入れると反映されます、実際私のブログにコードをコピペして反映されたので。
HTML的な部分でも問題はなさそうですが、時々Seesaaブログのシステム的な？部分で一時反映されないコードがあったりしますので、コードを一度外して保存。保存をしてから再度コードを入れて保存という最初に試した方法をもう１度試してもらえないでしょうか？
また、HTMLやCSSのバックアップを取っておいて、別のデザイン（テンプレート）でも反映されるか確認してみるのも良いかもしれません。もう少し調べてみますので、また反映されない時はお手数ですが、コメント頂けると助かります。