vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

Stinger5にファビコンを設置する方法

      2017/02/01

LINEで送る
Pocket

stinger5-favicon
こんにちは、okutani(@okutani_t)です。本記事ではWordPressのテーマであるStinger5ファビコン(favicon)を設置する方法を説明しています。

ファビコンは「検索画面のタブ」「ブックマーク時」「ショートカット」等々に使用される、小さな画像のことを指します。

ファビコンを設置すると自分のサイトに愛着が湧きますし、訪問した人にも良い印象を与えます(なにより小さくてかわいい)。

Stinger5を使ってサイトを構築している人の参考になれば幸いです。では、さっそく作業していきましょう。

スポンサーリンク

子テーマのimagesフォルダにファビコンを設置

まず設定をおこなう前に、.icoで終わる16×16のファイルを用意しておきます。下記の参考サイトを見ながら作成してみると良いかと思います。

参考favicon.ico(ファビコン)の作り方 | IDEA*IDEA

私はStinger5の子テーマを使ってサイトを構築しているので、子テーマ内の「images」フォルダにファビコンを設置しました。FTPソフト等でアップロードしておけばOKですね。

子テーマのimagesフォルダの場所は、

(WordPressをインストールした場所)/wp-content/themes/stinger5子テーマ/images

です。

もしimagesフォルダを作成していない方は、この時点で上記と同じになるよう作成しておきましょう。

header.phpにファビコンの設定を記述

子テーマの「header.php」に設置したファビコンを反映させていきましょう。

header.php内の下記を、次のように変更します。適宜、設置するファビコンの名前に変えておいてください。

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

↓

<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/images/favicon.ico" />

上記の<?php bloginfo(‘stylesheet_directory’); ?>は、現在使っているテーマのディレクトリのパスを返してくれます。

今回は子テーマにfaviconファイル「favicon.ico」を配置しているので、上記のとおりの設定になりました。

ファビコンの設置を確認する

ブラウザでサイトを開いてファビコンを確認してみましょう。

stinger5-favicon

無事にファビコンが設置ができました!小さくてかわいいですね。

もし反映されていない場合はブラウザの更新ボタン(F5キー)を押してみましょう。ちゃんと設置されていれば、ひょっこり表示されるはずです。

まとめ

faviconファイルさえ作ってしまえば、比較的かんたんにファビコンを設置することができました。

↓iPhone用アイコンの設置方法も記事にしています。この機会に合わせてどうぞ↓

関連

Stinger5にiPhone用のアイコンを設置する
こんにちは、okutani(@okutani_t)です。iPhoneのホーム画面にサイトのショートカットを...
2015-03-09 06:48
はてブ

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
ファビコンってなんか可愛いですよねー。ちっちゃい感じが◎。お洒落なファビコンを設置しているサイトを見るとワクワクしちゃいます。

 - Stinger5

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

Stinger5の導入&子テーマの作成方法

こんにちは、okutani(@okutani_t)です。WordPressはブロ …

[Stinger5] 固定ページにSNSシェアボタンを追加する

こんにちは、okutani(@okutani_t)です。私はWordPressテ …

[Stinger5] リード文下のAdSense広告をPC・スマホ用サイズに分岐して表示する

こんにちは、okutani(@okutani_t)です。AdSenseの広告サイ …

[Stinger5] 関連記事の見出しを任意の文字に変更する

こんにちは、okutani(@okutani_t)です。 このサイトはWordP …

Pocketボタンをサイトに設置してみよう!Stinger5編

こんにちは、okutani(@okutani_t)です。今回はサイトのSNSシェ …

[Stinger5] スマホレイアウトのナビメニューをカスタマイズしてみよう

こんにちは、okutani(@okutani_t)です。Stinger5のスマー …

Stinger5で文字色が変更できない!テーマカスタマイザーの削除で解決しました

こんにちは、okutani(@okutani_t)です。先日、Stinger5で …

[Stinger5] スマホのブログタイトルを画像に変更する

こんにちは、okutani(@okutani_t)です。WordPressのテー …

[Stinger5] デフォルトのツイートボタンからブログ名を含めて投稿する

こんにちは、okutani(@okutani_t)です。Stinger5では初め …

Stinger5にiPhone用のアイコンを設置する

こんにちは、okutani(@okutani_t)です。iPhoneのホーム画面 …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。