普段ネットで調べ物をしている時によく訪れるサイトだったりお気に入りのサイトがあったらブックマークをすることがあると思います。
するとサイト名の冒頭に下記のようなアイコンが表示されると思います▼
このアイコンはファビコン（favicon）という名称でサイトをわかりやすく表したシンボルマークみたいなものです。
ファビコンの設定は何もしていないと白紙のようなアイコンが表示されます▼
これでは少し味気ないですよね。
もしこれからサイト運営を本格的にやっていくのであれば、ファビコンもちゃんと設定したほうがいいに決まっています。
そしてこのファビコンというのは簡単に作れてしまうものなので今回はファビコンの作り方とそれをWordPress（賢威）に導入する方法を解説していきたいと思います。
ファビコンを作成しよう！
ファビコンの作成の仕方はいくつかあってファビコン作成専用サイトなどあったりしますが、フリー画像編集ソフトがあれば特に問題ありません。もしソフトが無いという方はこの機会にインストールしておいたほうがいいです。
→無料ソフトのおすすめは『photoscape』です。
では作成方法を解説します。
ファビコンの推奨サイズは16×16、32×32とされていますがこのサイズでは作りづらいので正方形サイズ（200×200くらい）で新規作成をします▼
そうしたらここに好きなアイコンを作ります。
イラストなんかを入れる方もいますが、解像度が低いので本当に簡単なものにするかロゴなどのテキストベースのアイコンを設定したほうがいいです。とにかくわかりやすいものをおすすめします。
僕は今回テキストのみでいきます▼
このまま完了してもいいですが、もしお持ちの画像編集ソフトに透過機能がある場合は背景を透過させるのもありです。
透過させるとどのような変化があるかとういとこんな感じ▼
透過無しの場合は正方形の白バックがファビコンに含まれるのに対して透過バージョンはブラウザの背景に合わせることができます。もしこのように透過させたい場合は背景を抜いてPNG保存すればOKです。特に気にしない方は背景ありのまま保存して構いません。
保存した画像をWordPressのメディアにアップロードしてファビコンの作成は完了です。
※画像サイズはWordPress側で適応サイズに変換されるのでそのままで問題ありません。
WordPressに導入～賢威テンプレート～
それではWordPressに導入してみましょう。
このサイトは賢威6.2を使っているので管理画面『外観』→『テーマ編集』より『header.php』を選択します▼
headerの下記コードに先ほどアップロードしたファビコン画像のURLを入力します▼
|
1 2 3 |
<link rel="shortcut icon" type="image/x-icon" href="ここにURLを入力" /> <link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/images/home-icon.png" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" /> |
入力したら『ファイルを更新』をクリックします。
※コードを書き換える時は必ずバックアップをとっておきましょう。
するとこのように反映されます▼
賢威7の場合
上記は賢威6.2の設定方法でしたが、賢威7の場合はもっと簡単に設定できます。
賢威7の管理画面より『外観』→『カスタマイズ』▼
画面が切り替わるので『サイト基本情報』を選択します▼
『画像を選択』ボタンをクリックして先程作成した画像を選択すれば完了です▼
最後に
以上がファビコンの作成方法とWordPress導入方法の解説でした。
このアイコンはサイトの顔になるもなのでわかりやすくシンプルなものにしていきたいですね！
コメントを残す