ブログのファビコンを作成して読者を引き寄せる！
ファビコンの画像作成からstinger gush等のブログに設置するやり方を紹介しています。
- ここで紹介するgush2のカスタマイズは、私の備忘録です。
- gush2は素でも使える。でも個性を出すためにカスタマイズしよう
- バックアップは忘れずに！！！
以下記事はワードプレス(WP)や、テーマのgush2をカスタマイズしたやり方等を忘れないために書き留めた備忘録です
これらを参考にカスタマイズする時は、自己責任でお願いいたします。
ソースコードを変更する場合は、ＦＴＰソフトを使ってサーバーにアップ。または各サーバーのオプション（ファイルマネージャー）等（例はさくらサーバーです）でカスタマイズを行ってください。
ファビコンって何ですか？
ファビコンとは？
favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。 favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したものである。
より参考しました
IEやGoogle Chromeなどのブラウザのアドレスバーに出るサイト名の横のアイコンのことです。
当然ブックマークやお気に入りした時のアイコンにも使用されます。
ファビコンのいいところ
ファビコンを設定するメリットは単純に目立つから。
最近は、タブブラウザが増えてきました。ですので、いくつもタブを開いて、あっちのサイトに行ったり、こっちのサイトに戻ってきたりと、複数のタブを行ったり来たりしながら検索する方が増えていると思います。
たくさんタブを開くので、戻りたいのに戻って来れない方もたくさんいます。
そんなときの目印になります。
ブックマークも一緒です。
ファビコンを設定しておくことで、見つけてもらいやすくなります。
ファビコン画像の作成
ファビコンの画像は出来るだけシンプルに
まず、設定する画像ですが、ファビコンは縦16px、横16pxなのでとても小さいので、あまり細かい画像は向いていません。
最初は、似顔絵のアイコン作成して表示させたところ、判りづらい画像になってしまいました。
作成サイズは、縦16px 横16px
ファビコンの表示サイズは、縦16px 横16pxです.
IEでショートカットを作成されたときはこのファビコンが適用されるようです。そのときのサイズが縦32px 横32pxなので、縦32px 横32pxで作る。（ディスクトップ等にショートカットアイコンを設置する方のみだと思います。）
最初は縦16px 横16pxでにします。
画像を作成して保存する際のファイル形式は、「png」か「jpeg」「gif」等がいいと思います。
画像を作成するソフト等が無い方は
無料で使えるアイコン素材集等からゲットしてください。
おすすめは
商用利用可能なアイコン素材ならICON HOIHO
ほしい画像がありましたらクリックして「DOWNLOAD」ボタンをクリックすればZIP形式でダウンロードされます。
そのファイルを解凍すれば、中にいろんなサイズの画像が入っているので、出来るだけサイズの小さい画像を使うといいと思います。
これでひとまずファビコン用の元画像が出来上がりました。
ファビコンの保存形式を「ico」の変更
ファビコンは「gif」や「png」でも表示されるのですが、IE（インターネット・エクスプローラー）ではサポートされていないようで表示されない。
なのでファビコンの保存形式を「ico」にしてくれる無料のサイトから変更する。
Favicon Converter
にアクセスします。
表示されている「ファイルを選択」ボタンをクリックして、ファビコンにするファイルを選択します。
使う画像のサイズが16px以上のサイズでしたら、「オプション」のところで「16pxにリサイズ」を選択します。
次に「アイコン作成」ボタンをクリックすれば、ダウンロードされます。
ダウンロードされたファイルのファイル名を「favicon」に変更します。
「favicon.ico」になっているか確認する。
favicon.icoをサーバーにアップロード
「favicon.ico」ファイルをＦＴＰソフト等でアップロードする。
アップロードするディレクトリ（フォルダー）は、「themes」⇒「gush2」⇒「images」フォルダー内にアップロードする。
子テーマを作成した場合は、「themes」⇒「gush2の子テーマ」⇒「images」フォルダー内にアップロードする。
子テーマのheader.phpコードの変更
子テーマの「header.php」を開きます。
[php]
<link rel=”shortcut icon” href=”<?php echo get_template_directory_uri(); ?>/images/favicon.ico” />
[/php]
上記コードを下のコードに変更した。
[php]
<link rel=”shortcut icon” href=”<?php echo get_stylesheet_directory_uri(); ?>/images/favicon1.ico” />
[/php]
ファビコンの画像を変更する時は同じファイル名でアップロードする。
上書き保存する。
以上で完成です。
まとめ
できるだけシンプルに、そして目立つようなファビコン画像にして読者を引き付けましょう。
もしかしたら読者が増えるかも知れませんね！！！
コメント