2014年08月23日

ホームページタイトルの隣のアイコン表示?(Seesaaブログの場合)




[ホームページタイトルの隣のアイコン表示?(Seesaaブログの場合)]

ホームページタイトルの隣にアイコンが表示されていることがよくあります。
例えば、こちら。

favicon1.JPG

このアイコンのことを「ファビコン」といいます。

なぜ「ファビコン」と言うのでしょうか?
<ウィキペディアより>====
favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。
====


なるほど
お気に入りアイコン」のことだと考えればですね。

ファビコンの設定方法は、「ファビコン 設定」で検索をするとたくさん表示されます。
私も様々なサイトさんにお世話になりました。

ここでは、自分が行った方法を書いていきます。

1.お気に入りアイコンにしたい画像を選ぶ。
 自分で作成してもいいですし、例えば次のようなフリー素材サイトからダウンロードをしてもいいです。
 今回は、「ぴよの素材屋さん」を使わせていただきます。 → こちら 

 「ぴよの素材屋さん」の左側サイドメニューの[アイコン]をクリックすると一番下に[favicon]というボタンが表示されます。
favicon2.JPG

クリックをすると...
favicon3.JPG

 次にダウンロードをしたいファビコン素材を選択します。
favicon4.JPG

 [ダウンロード]ボタンをクリックします。

2.ダウンロードをしたファイルを解凍します。
  zipという圧縮形式になっています。
  解凍すると次のように2つのファイルが表示されます。テキストファイルは利用規定が書いてあります。
favicon8.JPG

3.「FavIcon from Pics」サイトを開き、ダウンロードをしたファビコン素材をファビコンとして使えるように変換をします。 → こちら 
 「ぴよの素材屋さん」の「ico」拡張子には、上記サイトが適していると思われます。

 ※拡張子が「gif」「png」「jpg」のケースは、上記サイトだけではなく他にもファビコン作成用サイトはたくさんあります。
 こちらでは、「ファビコン favicon.icoを作ろう。」サイトも載せておきます。 → こちら 

  図は、GoogleChromeのケースです。IEの場合は、[参照...]ボタンになります。
  [ファイルを選択]ボタンをクリックして、対象のファイルを選ぶ。
  次に[Generate Favicon.ico]をクリックする。
favicon6.JPG

  下図のようにファビコンができあがるので、ダウンロードする。
  favicon7.JPG
  「Download FavIcon Package」をクリックしてください。

4.ダウンロードしたファビコンのファイルをアップロードして設定します。
  FavIcon from Picsで作成をした場合は、zipファイルになっていますので、解凍をしてからアップロードしてください。

  設定方法は、まずはSeesaaブログのケースを書きます。

 (1)ファイルマネージャを使って設定したいファビコンをアップロードします。
favicon9.JPG

favicon10.JPG

 (2)アップロードをしたファイル名をクリックすると画像の詳細が表示されますので、「http://」から始まるURLをメモ帳などにコピーしておきます。

favicon11.JPG

 (3)左側メニューのデザインを選択し、デザイン一覧の下にある「HTML」を選択したら、下図のようにの前に1行入れる。
    この時、(2)でメモをした画像のURLを入れる。

favicon12.JPG

反映されるまでに少し時間がかかります。

※参考にさせていただきました。ありがとうございます。
http://hima-blog.seesaa.net/article/367228889.html

次回は、WordPressにファビコンを設定する方法をご紹介します!



posted by ののえり at 21:46| 愛知 ☁| Comment(0) | インターネット | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。