日々精進 お役立ち情報

日々の生活の中で、気になる情報やお役立ち情報を自分の経験談など交えながら解説しています

STINGER5でファビコンを設定する方法 プラグインを使わない

   

ワードプレスで当サイトを作った際に
使用されていただいたテンプレートは

こちらのサイトで配布されています。

http://wp-fun.com/

STINGER5 というテーマです。

 

このSTINGER シリーズは3から私も利用されていただいて
非常に使いやすく、検索エンジンにも強いワードプレスのテーマなのですが、

一つ気になっていたのが、
この部分!

fabikon01

いわゆる ファビコン という

サイトのロゴマーク的な部分です。

 

楽天 や amazon でいうならこれです。

fabikon02

 

このファビコンが、STINGER の場合には、
制作者側で設定したロゴがすでに導入されているために、

他と差別化ができなく

やはりブックマークなどした際にも
このファビコンのアイコンですぐにサイトを判断できる
といったメリットもありますし

このファビコンを設定するだけで、
アクセスが伸びるという実際の検証結果もあるようですので、

今回、独自アイコンを設定してみることにしました。

 

ファビコンを作成する方法

まず、ファビコンの画像を作成します。

ファビコンは、16px×16px と非常に小さいアイコンですので、

一般的な画像作成ソフトを使っても良いのですが、

見え方などがぼやけてしまう場合もありますので、

今回はファビコンを作成できるサイトを利用して作成してみました。

http://ww-vision.com/fav/

 

作成方法は、サイトを見ればすぐにわかりますが、

カラーパレットで色を決めて、

あとはグリッドごとにクリックして
色を変更するだけです。

 

作成しましたら、右下の

completed の部分をクリックしますと

下図のように、作成したファビコンファイルと
ダウンロードする というボタンが出てきますので

クリックしますと、ダウンロードできます。

fabikonn03

スポンサードリンク

 

この時点で、右上のURLバーのところに
今作成したファビコンアイコンの表示されていますので

これを参考に一度ダウンロードした後でも
変更も可能ですので

納得がいくまで作成されてみてください。

 

STINGER5にファビコン設定する方法

ワードプレスにファビコンを設定するには、
プラグインを利用する方法もありますが、

極力余計なプラグインを入れない方が、
表示速度の遅れの防止にもなりますので、

今回はプラグインは使わない方法で行ってみます。

 

STINGER5で作成した当サイトのソースを見てみますと
以下の表記がありました。

(link rel=”shortcut icon” href=”http://siawase-no1.net/wp-content/themes/stinger5ver20141227/images/logo.ico” /)
つまり、この部分に現在表示されているファビコンが保存されているということです。

 

ですので、先ほど作成したファビコンの画像と

現在保存されている画像を上書きして入れ替えたいと思います。

 

そこでまず、先ほど作成したファビコン画像のネームが

favicon.ico

となっていますので、

そちらを

現在の設定に合わせて、

logo.ico

に名前を変更します。

 

次に、FFFTPなどのWEB上へアップロードできるソフトを使用して

ワードプレスが導入されているドメインから

wp-content ⇒ themes ⇒ stinger5ver20141227 ⇒ images

と開いていくと

imagesフォルダ内に、logo.ico

というアイコンの画像が入っていますので、

そこで、先ほど、リネームした

作成したファビコンのアイコンを上書きアップロードします

 

これで設定は終わりです。

 

設定を完了しましたら、

サイトをF5キーなどを使って更新すると

このように作ったアイコンにファビコンが変更されました。

fabikon04

 

 

まとめ

ファビコンはちょっとした設定ですが、

最初にも書かせていただいたように

こんな簡単な設定をするだけで、
サイトの印象度が上がり

アクセスアップにもつながるのであれば

やらない手はないと思いますので、

ご参考にされてみてください。

スポンサードリンク

 


にほんブログ村 その他生活ブログへ

 - IT情報

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  関連記事

chui02
forum.topic59805907.darodar.com はスパム?検索結果に表示

  ワードプレスで当サイトを作り、 グーグルアナリティクスを設定したの …

youtube1
youtube動画をリピート再生する方法?スマホAndroid iphoneも

  youtubeの動画を見ていて 気に入った音楽をリピート再生したい …

sio
Microsoft SilverlightがChromeで使えなくなった原因と対策

先日のChrome(クローム)のアップデート後(バージョン42)、 Micros …