何でもありのカオスなブログ

STINGER3|意外と簡単。ブログのファビコンをオリジナルに変更する方法!

      2016/03/08

ブログカスタマイズ記事第一弾!

まずは簡単なとこからやっていこう!ということで、今回はファビコンを変更する方法です。

コレをファビコンにしたい!というモノが決まっているのなら、5分もあれば変更できちゃいます(???)v

とっても簡単な割に、変更するとブログに愛着がわいてくるのでブログを持ってる人はぜひやってみてください(?´?`?)

SPONSORED LINK

そもそもファビコンってなんなの?

ファビコン

ブラウザを開いた時にでてくる小さい画像のことです。
見たことはあっても名前は知らなかった!って人もいるかもしれませんね(???)

ファビコンをオリジナルに変更する!

1.オリジナルの画像を用意する

てきとーだろ ファビコン

まずはオリジナルの画像を用意しましょう!
上の画像はこのブログのファビコン用に自分で作ったやつです(???)

ファビコンのサイズは16×16pxですが、作るときはもっと大きいサイズで大丈夫です。自分は64×64pxで作成しました。

ただし、正方形でないと縮小した時に見た目がイマイチになってしまうので注意!

画像を保存するときの拡張子は、jpg/png/gif/のどれかにしてください。自分は無難にpngを選択。
ちなみに自分はWindowsに入っているペイントツールを使って作りました(???)

2.画像をファビコン用(.ico)に変換する

画像を用意できたら、ファビコン用に変換しましょう!
※ファビコンの画像.icoという拡張子なので、jpgやpngのままでは変更できません(ノД`)

画像の変換はこちらでどうぞ
アイコン(icon)変換ツール ? Favicon Converter

サイズは16×16pxを作っておけばとりあえず問題ないです。変換が終わったら名前をblog_iconなど自分の覚えやすいように変更しておきましょう。

3.画像をアップロードしてheader.phpを編集する

ここからは2パターンにわかれます。FFFTPなどを使いテーマファイルの中にあるimagesフォルダに直接入れる、またはブログのメディアにアップロードしてから設定する。

どちらも大して大変ではないのでお好きな方でどうぞ!

※ただし、imagesフォルダに直接アップロードした場合、反映されるまでに時間がかかる場合があります。

メディアにアップロードして変更する

まずは作ったファビコン(○○.ico)をアップロードしましょう!

管理画面から、メディア→新規追加でアップロード。アップロードが終わったら編集をクリックして画像のURLをコピーします。

ファビコン変更 メディアURL

コピーしたら、外観→テーマ編集→header.phpを開きます。次にCTRL+Fでicoと検索をかけると

 

<link rel=”shortcut icon” href=”<?php echo get_template_directory_uri(); ?>/images/rogo.ico” />

 

ここでファビコンが指定されているので、太字のところにコピーしたファビコンのURLを入れます

<link rel=”shortcut icon” href=”ここにコピーしたURLを入れる” />

これで終了です。ファイルの更新を押して、ブログを見てみましょう!

imagesフォルダに直接アップロードして変更する

imagesフォルダに直接アップロードする場合は、FFFTPなどのFTPソフトを使います。

FTPソフトでテーマファイル>imagesフォルダの中にファビコンをアップロードします。アップロード時にimagesフォルダに入っているrogo.icoは削除してもOK!邪魔であれば削除しちゃいましょう。

アップロードが終わったら、外観→テーマ編集→header.phpを開きます。CTRL+Fでicoを検索

<link rel=”shortcut icon” href=”<?php echo get_template_directory_uri(); ?>/images/rogo.ico” />

太字の部分でファビコンのファイルをしているので、自分が作った名前(○○.ico)に変更します。

ファイルの更新を押しておしまいです。ブログを確認してみましょう!
※ただし、コチラの場合はファビコンの変更が反映されるまでに時間がかかる場合があります。

ひとこと

正直そんなところ誰も見てないよ!って思うかもしれません。
いいんです、自己満足で(・∀・)b

でも意外とお気に入りに入れたりブクマした時に、アイコンですぐに分かるのって大事だと思うんですよねー。

簡単にできて、ブログにちょっとオリジナリティが出るのでぜひどうぞ!

 - カスタマイズ