wordpressにファビコンを設置してみよう。
ファビコンはブラウザのタブに表示されるアイコン(画像)のこと。
ブックマークしたときにも表示されるので、ほかのサイトと区別するのに役立つかも。
Windowsのペイントと無料ウェブサービスで簡単にファビコンを作ることができる。
ファビコン画像を作る
ファビコン画像の大きさ・形などの注意
・16px×16px
・正方形にすること
・あまりこったものは作らない。
*ファビコンはサイズが小さいので凝った物を作っても表示されたときによくわからなくなる。
*ほかにもいろいろサイズがあるが、とりあえずブラウザのタブに表示するためのファビコンならこれ。
画像の拡張子
「JPG」「GIF」「PNG」。
お勧めは「GIF」。
ファイルサイズが少なくすむ。
1、【スタート】⇒【アクセサリ】⇒【ペイント】をクリック。
2、【サイズ変更】⇒「縦横比重を維持する」のチェックをはずす。
3、作成サイズを正方形になるように指定。
4、画像を作ったら、【サイズ変更】⇒で16px×16pxで再指定する。
5、名前をつけて拡張子を「JPG」「GIF」「PNG」にして保存。
画像をファビコンの拡張子に変更する
ファビコンの拡張子icnに変換するサイトはたくさんあるのだが、やはりわかりやすいのは日本語のサイト。
1、http://ao-system.net/favicon/index.phpにアクセス。
2、【参照】ボタンで作った画像を指定。
3、【Favorite iconを作成】をクリック。
4、【ダウンロード】をクリックしてFavorite iconを保存する。
wordpressにファビコンアイコンを設置する
1、【メディア】⇒【新規追加】をクリック。
2、保存したファビコンアイコンクリックしたまま【新規追加】の画面上にもっていく。
3、【編集】をクリック。
4、【ファイルの URL:】のボックス内のURLをコピー。
5、[外観]→[テーマの編集]→[ヘッダー (header.php)]をクリック。
6、【shortcut icon】がほかに無いか調べて、もしあった場合は、<link rel="shortcut icon" href="URL">を削除。
うちのサイト(STINGER3)の場合<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/rogo.ico" />を削除した。
7、</head>の直前に以下の記述を追加。
<link rel="shortcut icon" href="コピーしたURL">
このサイトの場合↓
<link rel="shortcut icon" href="https://wordpress.0hs.org/wp-content/uploads/2014/08/favicon.ico">
8、[ファイルを更新]を押して保存。
ファビコンの問題点
ファビコンの問題点は、サイトの表示が遅くなること。
元の画像をGIFで作ると一番画像の容量が少なくすむ。
コメント