【WordPress】STINGER3の「ファビコン」を自作&編集してみました。

2014/07/18

このブログは「WordPress(ワードプレス)」という、オープンソースのブログCMSで作られています。CMSとは「コンテンツマネージメントシステム」の略称ですが、それが一体どんなものなのかといった説明は割愛します。ワードプレスでブログが作れている現状重視で話を進めます。初めて「ファビコン」を作成~変更してみたので、その手順をメモします。※ちなみにファビコン変更作業は、長年使い慣れているWindowsで行いました。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<事前情報として>
■テンプレートはENJIさんのStinger3を使用中です。
■作業工程は5分程度(デザイン時間は除く)です。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<作業手順>
1.「ペイント」の編集サイズを64×64に設定しておきます。
ペイント起動→白紙状態の右下をつまむ→縦横サイズを64×64にします。

2.適当にデザインしてください。(最も悩む部分です)
細かい部分は端折ってください。どうせ縮んで見えなくなります。

3.デザインしたものを「favicon」と名前を付けて保存します。
デスクトップにでも置いといてください。

4.ファビコン変換サービスに行きます。
ここです→http://favicon.qfor.info/c/

5.先ほど保存したファイルを選択して16×16にリサイズします。
「アイコン作成」をクリックして.icoデータを保存します。

6.作ったアイコンをワードプレスの「メディア」にアップロード。
その際に「ファイルのURL」をメモ帳にコピーしてください。

7.テーマ本体のheader.phpを触ります。
外観→テーマ編集→ヘッダー(header.php)の順です。

8.これに似た部分を探してください。(<>を全角にしています)
<link rel="shortcut icon" href="<!--?php *******('template_directory'); ?-->/images/rogo.ico" />

9.手順6でコピーしたものを突っ込みます。(本来<>は半角です)
<link rel="shortcut icon" href="http://eyelovephoto.chu.jp/wp-content/uploads/2014/06/favicon.ico.ico" />

0.ファイルを更新を押せば完了です。
念のために「何を」「どのように」変更したか残すと安心です。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<お願い>
※この手順で問題なくファビコンを設定することができましたが、
 あくまでも参考程度にして、必ず自己責任でお願いします。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ELPロゴ
上記の手順で、PCブラウザのタブ部分に表示されるファビコンが変更されます。ですがスマートフォンで「お気に入り」として保存した場合、初期設定のファビコン(stingerロゴ)のままとなっていました。細部までこだわりたいのですが、現状では知識が不足しているため、作業方法等が分かり次第変更してみたいと思います。

PR



-WordPress
-