【STINGER3】TipsTipsのファビコンを設定しみた

皆さんはファビコンの設定をしていますか?おそらくファビコンって何?という方も大勢いると思いますが、WEBサイトを開くとタブに表示されるアイコンがきちんとオリジナルのマークになっていることがあると思います。このマークが通称ファビコンです。

favicon1
このファビコンが設定されているとユーザーがきちんとしたサイトだと認識しやすくなり、より閲覧してくれやすくなるそうです。というわけで、今回はSTINGER3のファビコンの設定の仕方を紹介します。

ファビコン用の画像を準備する

今回、参考にしたのは以下の2つのサイトです。

「Stinger3カスタマイズ」ブログのシンボルであるファビコン(favicon)を変更する方法 | Leeway’s Life Log
/images/rogo.ico” /> …

WordPressでファビコンを表示させる方法 | WordPress設置ブログ

どちらもWordPressやSTINGER3 に関することもいろいろと書いてあるので、これからもお世話になりそうです。

まずは、ファビコン用の画像を準備することからはじめます。ファビコン用の画像は、前回作成したロゴマークの頭の部分をつかいたいと思います。大きさは後から適正な大きさに調整されるので、iPhotoでもSkitchでもいいので、まずは正方形にトリミングすればOKです。

fabikon2
そして、正方形になった画像をファビコン画像変換サイトのFavicom from Picsで変換します。
まずは、画像をアップロードして生成ボタンをクリックします。

favicon3
出来上がったZIPファイルをデスクトップに登録します。デスクトップのZIPファイルを開くと、gifファイルとicoファイルの画像が生成されていました。おそらくどちらでも大丈夫どと思いますが、icoファイルの方がより確度が高そうです。

favicon4

ファビコン用の画像を登録しよう

テーマをいじるときは、バックアップをとることを忘れずに!

まずは、サイト内に先ほど作ったファビコン用の画像をアップロードします。

favicon5
アップロードがすんだら、画像の登録先のURLをきちんとコピーしておきましょう。

favicon6
そして、画像の登録先のURLを次のコードの中にペーストします。

<link rel=”shortcut icon” href=“ここに先ほどコピーした画像のアップ先のURLを登録します“ />

続いて出来上がったURLを登録します。ファビコンの設定は、テーマのヘッダー部分にあります。

favicon7
ヘッダー内の34行目(ぼくの場合は)にある次のコードと先ほど作成したコードを入れかえます。

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

これでファビコンが正しく登録できているはずです。すごく小さなことですが、自分の中ではその効果は絶大で、サイトの“格”があがったような気がします。









コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です