[WordPress] STINGER FANSでファビコンを設定してみた

突然ですが、ファビコンって知ってますか?お恥ずかしながら私は最近知りました。知っちゃうとあれ?このブログはStingerのままだ~と気付いちゃったので設定してみました。

今日はそんなお話です。

スポンサーリンク




ファビコンとは?

ファビコンは、ブラウザのタブとかに出てくるあれです。小さいバナー画像です。サイズは16×16らしいです。

ファビコン

ホームページを開いた時に出てくるので、オリジナルのファビコンがあった方が良いですね。

ファビコン設定までの流れ

  1. ファビコン画像を探す
  2. ファビコンをダウンロードする
  3. ファビコンをアップロードする
  4. header.phpをちょっといじる

では。

1.ファビコン画像を探す

まず画像を用意するのですが、センスがないのでフリーでFaviconを配布しているサイトから調達することにします。
使わせていただいたのは、freefaviconさまです。ありがとうございます。

freefavicon

下にスクロールして、アルファベットの部分をクリックすると色々とファビコン画像が出てて来ます。

ファビコン画像

2.ファビコンをダウンロードする

freefaviconから気に入った画像をダウンロードします。
Zipファイルを解凍すると、「.ico」というファイルがあるのでテスクトップに保存。

私は、hat_grayを選択。

ファビコン

3.ファビコンをアップロードする

WordPressのメディアの追加から先程のファビコン画像をアップロードします。

メディアのアップロード

画像がアップロードされたら編集をクリックします。

右の方のファイルのURLをコピーしておきます。

ファイルのURL

4.header.phpをちょっといじる

header.phpのコードをちょっといじる

そして、WordPress初心者はちょっと難関のコードをいじります。

私は前回子テーマを作ったので、子テーマのheader.phpをいじりたいと思います。私はちょっと慣れてきました。

WordPressの管理画面の「外観」→「テーマ編集」→「ヘッダー」をクリックします。

え~と、下にスクロールして、ファビコンのコードを探します。
</title>のちょっと下あたりです。

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

※「Ctrl」+Fを押すとサイト内検索ができます。「shortcut icon」で検索してみつけてください。

この赤字部分のコードを先程のコピペした画像のURLに変えます。

<link rel=”shortcut icon” href=”https://shinmai-web.com/wp-content/uploads/2014/06/hat_gray.ico />

最下部の「ファイル更新」で終了です。

よし、ブラウザでホームページを表示してみます。
キャッシュをクリア(F5を押す)してと。

ファビコンの確認

これでOK!

いい感じですね。まだファビコンを設定していない方は意外と簡単ですので、お試しください。

今日はここまでです。

チャオ!

スポンサーリンク




シェアする

フォローする

スポンサーリンク