ファビコンを作成してWordPressに導入する方法(賢威)

普段ネットで調べ物をしている時によく訪れるサイトだったりお気に入りのサイトがあったらブックマークをすることがあると思います。

するとサイト名の冒頭に下記のようなアイコンが表示されると思います▼

2537_a

 

このアイコンはファビコン(favicon)という名称でサイトをわかりやすく表したシンボルマークみたいなものです。

ファビコンの設定は何もしていないと白紙のようなアイコンが表示されます▼

2537_b

 

これでは少し味気ないですよね。

もしこれからサイト運営を本格的にやっていくのであれば、ファビコンもちゃんと設定したほうがいいに決まっています。

そしてこのファビコンというのは簡単に作れてしまうものなので今回はファビコンの作り方とそれをWordPress(賢威)に導入する方法を解説していきたいと思います。

 

ファビコンを作成しよう!

ファビコンの作成の仕方はいくつかあってファビコン作成専用サイトなどあったりしますが、フリー画像編集ソフトがあれば特に問題ありません。もしソフトが無いという方はこの機会にインストールしておいたほうがいいです。

→無料ソフトのおすすめは『photoscape』です。

 

では作成方法を解説します。

ファビコンの推奨サイズは16×16、32×32とされていますがこのサイズでは作りづらいので正方形サイズ(200×200くらい)で新規作成をします▼

2537_c

 

そうしたらここに好きなアイコンを作ります。

イラストなんかを入れる方もいますが、解像度が低いので本当に簡単なものにするかロゴなどのテキストベースのアイコンを設定したほうがいいです。とにかくわかりやすいものをおすすめします。

僕は今回テキストのみでいきます▼

2537_d

 

このまま完了してもいいですが、もしお持ちの画像編集ソフトに透過機能がある場合は背景を透過させるのもありです。

透過させるとどのような変化があるかとういとこんな感じ▼

2537_e

透過無しの場合は正方形の白バックがファビコンに含まれるのに対して透過バージョンはブラウザの背景に合わせることができます。もしこのように透過させたい場合は背景を抜いてPNG保存すればOKです。特に気にしない方は背景ありのまま保存して構いません。

保存した画像をWordPressのメディアにアップロードしてファビコンの作成は完了です。
※画像サイズはWordPress側で適応サイズに変換されるのでそのままで問題ありません。

 

WordPressに導入~賢威テンプレート~

それではWordPressに導入してみましょう。

このサイトは賢威6.2を使っているので管理画面『外観』→『テーマ編集』より『header.php』を選択します▼

2537_f

2537_g

 

headerの下記コードに先ほどアップロードしたファビコン画像のURLを入力します▼

入力したら『ファイルを更新』をクリックします。
※コードを書き換える時は必ずバックアップをとっておきましょう。

 

するとこのように反映されます▼

 

賢威7の場合

上記は賢威6.2の設定方法でしたが、賢威7の場合はもっと簡単に設定できます。

賢威7の管理画面より『外観』→『カスタマイズ』▼

2537_i

 

画面が切り替わるので『サイト基本情報』を選択します▼

2537_j

 

『画像を選択』ボタンをクリックして先程作成した画像を選択すれば完了です▼

2537_k

 


 

以上がファビコンの作成方法とWordPress導入方法の解説でした。

このアイコンはサイトの顔になるもなのでわかりやすくシンプルなものにしていきたいですね!

 
スティーブン倉田の無料メルマガ

 

   

コメントを残す

サブコンテンツ

このページの先頭へ