WordPressのファビコンを変更してみる

公開日: 

ファビコンとは、サイトのシンボルといいますか、ブラウザのタブに表示されるタイトルの先頭にある小さなアイコン画像です。

このサイトは、Gushのテンプレートを使ってるので、オリジナルのファビコンになっていました。
Art039

これを、オリジナルのファビコンに変更してみます。

オリジナルの画像を作る

まず、”eXpBest”の「XB」を画像化することにします。

簡単な方法として、”フリーフォントで簡単ロゴ作成”のサイトで作ります。
http://lightbox.on.coocan.jp/html/fontImage.php
Art040

フォントを選ぶ

[サンプル]ボタンを押して、フォントを選びます。
Art041
今回は英字のフォント”NULL Free”を選択します。
Art042
こんなイメージのフォントですね。

表示するテキストを入力する

表示するテキストに”XB”と入力します。
そしてテキストの色はフォントと同じ色にするため”1122cc”と入れます。
文字色は、右側で任意にカラー選択して、テキストボタンを押して変えることもできます。
[一時]ボタンを押して、下部に表示されるイメージを確認します。
Art057

サイズを変更する

少し大きめのフォントサイズにし、枠サイズと位置を調整します。
画像はアイコン用に正方形にしたいけど、フォントの変形ができないので、後で調整しやすいように、縦90、横180にしておきます。
[一時]ボタンを押しながら調整して、イメージを確認します。
Art058

画像をダウンロードする

OKになったら、[適用]ボタンを押して確定します。
そして、[▼ダウンロード▼]を押して、画像をダウンロードします。
XB-freefont_logo_null_free

画像を正方形にサイズ変更する

早くファビコンを作りたいところですが、先に正方形にリサイズしておきます。
サイズ変更も画像加工編集サイトを利用します。これがまた便利なんです。
http://www.bannerkoubou.com/
Art044
さっき作った画像をファイル選択して、「画像を加工する」ボタンを押します。

サイズを変更する

目的の画像が表示された画面になったら、
左サイドバーにある拡大縮小のアイコンをクリックします。
Art046

そして、横幅、縦幅のサイズをそれぞれ入力します。
今回は、正方形にしたいので、横=90、縦=90として、「サイズを変更する」ボタンを押します。
Art048

これで正方形の画像に変更できました。

いよいよアイコンを作る

次は、画像ファイルをアイコン(ICON)形式に変換するWebツールを使います。
http://favicon.qfor.info/c/
Art049

ここでは、先に作った画像を指定して、「アイコン作成」ボタンを押すだけです。
ダウンロードされるファイルはアイコンファイル(.ico)です。
Art059

最後にfavicon.icoをアップロードする

やっと最後の仕上げです。

  • 作成したアイコンファイルを、favicon.icoに名前変更して、
  • FTPでWordPressのgushテーマのディレクトリにアクセスして、
  • images下にあるfavikon.icoを置き換えます。
     ⇒(ワードプレスルート)/wp-content/themes/gush/images
    Art052

以上で、当サイトのファビコンが変わりました。
Art054

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • 人気の投稿とページ

  • カテゴリー

  • Ad.




PAGE TOP ↑
BBX