「Stinger3カスタマイズ」ブログのシンボルであるファビコン(favicon)を変更する方法

WordPress無料のテーマである、「Stinger3」のカスタマイズを行いました。

今回は、サイトのシンボルであり顔である、ファビコンを変更してみました。

Stinger3の初期のファビコンは、WordPressデフォルトのシンプルな緑のやつだったので、ファビコンはもっとも変更したいカスタマイズの１つでした。

今回参考にしたサイト
参照：【Stinger2】サイトの顔「ファビコン」を設定しました。｜Oh-Blog

※作業する前に、必ずバックアップは取りましょう。

 

Stinger3カスタマイズ手順

カスタマイズ手順を紹介します。

１．ファビコン画像を作ろう

まずは、ファビコンの画像を作成しましょう。下記のサイトでファビコン画像の作成ができます。

参照：favicon converter

私は「16×16」で作成しました。拡張子が「XXXXXXXX.ico」というファイル名になったはずです。

２．作成したファビコンファイルをアップしよう

サーバーのimagesフォルダへ作成したファビコンファイルをアップしましょう。

メディアからアップしてもOKです。

３．修正するStingerのファイルを開く

ファイル名：header.php

「header.php」をテキストエディターで開きます。

４．Stinger、header.phpファイルを修正する

■修正前

下記のように、書いてある場所を探してください。私のStinger3のバージョンでは29行目あたりです。

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

 

■修正後

修正前ソースの場所を見つけたら削除し、次は下記のように書き換えてください。

<link rel="shortcut icon" href="ファビコンのURL＋ファイル名(XXXXX.ico)" />

「<link rel=”shortcut icon” href=”<?php echo get_template_directory_uri(); ?>/images/rogo.ico” />」を削除し、「<link rel=”shortcut icon” href=”ファビコンのURL＋ファイル名(XXXXX.ico)” />」を追加します。

 

５．FTPソフトでサーバーへアップ

修正したソースをサーバーへアップして完了です。

以上、私が修正したやり方でした。上手くできたでしょうか。

サイトの顔であるファビコンを変えると、ガラッと雰囲気が変わりますよね。