アメブロdeアクセスアップ

アメブロにもファビコンをつけてみる  ファビコンの作成と設置方法 | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:プチカスタマイズ

自分のブログをアピールするためには、カスタマイズの工夫が必要
ブログでよく見かける小さなアイコン、それがファビコンです。
これね。

ふぁびこん

 

アメブロでも、ファビコンを設置してみましょう。

 

 

 

 

 

 

 

ファビコンは、小さなアイコンです。

小さいけれども、結構主張していると思いませんか?

 

 

 

【これが、私のブログですよ!!】と、
こんな小さいアイコンが、なかなか力を発揮してくれますね。

 

 

 

 

ワードプレスを立ち上げて、一番最初にこれつけたい!!
と思ったのが、ファビコンとアバターの設置です。

 

 

 

オリジナルなファビコンを設置しているブログを見ると、
なんだか設置したい!!と一番最初に思いました。

 

 

でも、これもなかなかうまくいきませんでした。

 

なぜなら、小さいアイコンを作るのって、
以外に難しい・・・・。

 

 

簡単にさくっとできる人が、うらやましかったです。

 

 

でも、そこで私はくじけず探したんです!!

 

そして、インストールすることなく、
Web上で作成できて、ダウンロードできるサイトを発見!!

 

 

画像加工も、簡単ですので、ご紹介しますね。

 

 

 hana作業手順

 

まず、ファビコンに表示する画像を用意します。

 

今回は、画像作成をしない方法でご紹介しますが、
オリジナル画像を用意するのであれば、
大きさは、100×100くらいでいいですよ。

 

小さいものでも、大きいものでも、
どちらでもかまいません。

 

自分のアバターでもいいですよね。

 

用意ができたら、下記のサイトを立ち上げます。

 

http://www.genfavicon.com/Genfavicon(英語版)

※画像をクリックするとサイトへ飛びます。

 

 

このサイトは、英語版ですが、操作は簡単です。
画面の下に操作手順といえる、番号があります。

 

 

 

その順番どおりに、操作をしていきます。

※下記図を参考にしてくださいね。

 

ファビコンの作成サイトで、画像を編集
① ファビコンに使う画像をアップロードします。

参照ボタンをクリックすると、ご自分のフォルダが開きますので、
自分が使いたい画像を選択。
次に【Upload image】ボタンをクリックしてください。

 

② 画像サイズを決めます。

ここのサイズは、表示されるサイズです。
例として、アヒルさんをアップロードしてみました。

 

右の画面に、使いたい画像(アヒルさん)が表示されていますね。
②のサイズ表示の下の【Capture&Preview】ボタンをクリックすると、
③の部分に、ファビコンイメージが表示されます。
こんな感じね。

 

ファビコンのイメージ

いい感じだったら、

③ 【Download Favicon】をクリックして、画像をダウンロード
ご自分のPCに保存してくださいね。

 

ファイル名は自動で、【favicon.ico】という名前で保存されますので、
このまま使用します。

 

 

今回は、アメブロにファビコンを設置したいで、
ファイルをアップロードしていきます。

 

 

 

02_org_p

 

実は、ファビコン専用の画像は、

アメブロの【画像フォルダ】には、アップロードできないんですね。

 

なぜなら、アップロードできるファイルの【拡張子】が、アメブロでは、

決まっているので、icoで作成されたアイコンは、アップロードできないことになっています。

 

※【拡張子】とは?
ファイルの種類を識別する文字列のことです。
例えば【favicon.ico】の場合は、
faviconが、名前で ico が拡張子です。

 

 

なので、この画像をアップロードする場所を、
用意することになります。

ワードプレスなどを運営しているなら、
ご自分のサーバーに、アップロードしてくださいね。

 

それから、レンタルサーバーがない方は、こちらを参考にしてくださいね。
無料でHPで作成できるサイトなら、
データや画像のアップロードはできます。
【フリープラグインのダイエット方法】

データがアップロードできたら、
そのURLを下記ソースのURLの部分に、置き換えてくださいね。

 

<link rel="shortcut icon" href="ここに、画像をアップしたURLを記入" />

 

画像の保存先のURLの入ったソースを、フリースペースに貼ります。

 

 

プレビューでは、変わったことが確認できないと思いますので、
いったん保存して、ご自分のブログを見るで確認してくださいね。
こんな感じだったら、OKです。

 

2012y08m08d_160554430

 

どうすか?意外と簡単でしょう?

 

 

 

ワードプレスをお持ちの方で、まだファビコンを設置してない方は、
上記を参考にしてファビコンを作成して、
ワードプレスの、テーマの編集から、【header.php】の下の方、

</head> というタグの上くらいに、
ソースを貼ってくださいね。

 

 

ファビコンも、自分のブログのアピールです。

ブログをカスタマイズしていくと、本当に愛着が広がります。

簡単なところからでも、テンプレートや、
ブログのカスタマイズに挑戦してみましょう。

 

 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.