『Seesaa』ブログに『ファビコン』を設置した

【カテゴリ：パソコン　ブログカスタマイズの記録】

この『Seesaa』ブログに『ファビコン』（favicon）を設置してみましたので、その覚え書きです。

『ファビコン』とは何かというと、以下は『Wikipedia』からの引用です。

Favicon（ファビコン）はウェブサイトやウェブページに関連付けられたアイコンのことである。Favorite icon（フェイバリット・アイコン）という英語の語句を縮約したものである。

下の画像のように、ウェブブラウザでタイトルの隣りに表示されているアイコンが『ファビコン』です。



以下、今回『ファビコン』を設置した際の手順です。

自分は、以下のサイトを利用して『favicon.ico』という『ファビコン』表示用のアイコンファイルを作成しました。

ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。:
http://ao-system.net/favicon/index.php

スポンサーリンク

まず、アイコン用として３種類のサイズの画像を用意する必要があったのですが、とりあえず自分は以下のようにして簡単な画像を作成しました。

・このブログを利用し、テスト的に『Ｋ』の一文字を表示させました。（ちなみに『Ｋ』は、単純にこのブログの URL の頭文字です。）



・それを『Print Screen』キーでキャプチャして『ペイント』に貼り付け、48 × 48 ピクセルのサイズにトリミングして保存しました。

・その画像をさらに『ペイント』で 32 × 32 ピクセルと 16 × 16 ピクセルのそれぞれのサイズに縮小して保存しました。



前記サイトにおいて、この３つのファイルを指定して『favicon.ico 作成』ボタンをクリックすると、以下のように表示されました。



次に、『ダウンロード』ボタンをクリックして、ファイル（『favicon.ico』）を保存しました。



この後、ファイル（『favicon.ico』）を『Seesaa』ブログにアップロードしました。



アップロードしたファイルの URL は『https://kingpcfx.up.seesaa.net/image/favicon.ico』となりました。

この URL を『ファビコン』として指定するための行を HTML に追加します。

HTML への追加は以下のようにして行います。

(1)『ブログの管理メニュー』⇒『デザイン』の『デザイン > PC > デザイン一覧』画面から『HTML』をクリックします。



(2)以下のような画面が表示されるので、編集対象となる『HTML名』をクリックします。



今使っているHTMLを直接変更してもよいのですが、自分の場合は、右上の『HTMLの追加』をクリックして新たな HTML を新規に追加し、その追加した HTML には、それまで使用していた HTML から内容をまるごとコピーしました。

ミスをしてトラブルが発生した場合に、簡単に元の状態に戻せるようにするためです。

新たに追加した HTML には、『favicon 追加』という名前をつけました。

『HTML名』をクリックすると、以下のような編集画面が表示されます。



(3)『</head>』の行の直前に、以下を貼り付けます。

<link rel="shortcut icon" href="https://kingpcfx.up.seesaa.net/image/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="https://kingpcfx.up.seesaa.net/image/favicon.ico" type="image/vnd.microsoft.icon">

補足：上記の中で赤字の箇所がアップロードしたファイルのURLです。



(4)『保存』ボタンをクリックして保存します。




↑『保存』ボタンをクリック後、『設定を完了しました。』と表示されます。

(5)『デザイン > PC > HTML』画面で、今回変更した『HTML名』の箇所の『適用』ラジオボタンをクリックします。




↑ラジオボタンをクリック後、『設定を完了しました。』と表示されます。

これで『Seesaa』ブログへの『ファビコン』の設置は完了です。

以上です。

スポンサーリンク