vdeep

*

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

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

      2017/02/01

LINEで送る
Pocket

stinger5-iphone-ico
こんにちは、okutani(@okutani_t)です。iPhoneのホーム画面にサイトのショートカットを作成すると、デフォルトではTOPページのスクリーンショットがアイコンとして使われます。

デフォルトのままでは味気ないので、iPhone用に用意した画像をサイトに設置して、自分の好きなようにデザインしたアイコンを使ってみましょう

設置する際、事前に「114×114px」のpngファイルを用意しておく必要があります。また、今回はStinger5の子テーマ上で設定を行っています。

では、さっそくiPhone用の画像アイコンを設置していきましょう。

スポンサーリンク

子テーマのimagesにアイコンを設置

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

子テーマのimagesフォルダは

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

にあります。

もしimagesフォルダを作成していない場合は、子テーマの直下に作成しておきましょう。

子テーマを利用していない方は、メディアの追加から画像ファイルをアップロードしておき、そのURLをメモしておきましょう。

header.phpに設定を記述する

子テーマの「header.php」に、imagesフォルダに設置したアイコンを反映させましょう。

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

<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />

↓

<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('stylesheet_directory'); ?>/images/apple-icon.png" />

上記の<?php bloginfo(‘stylesheet_directory’); ?>は、現在使っているテーマのディレクトリのパスを返してくれます。今回は子テーマにアイコンファイルを配置しているので、上記の書き方で設定しましょう。

子テーマを使っていない方は、次のようになります。

<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />

↓

<link rel="apple-touch-icon-precomposed" href="アップロードしたアイコンのURL" />

iPhone用のアイコンが設置されたか、実際に確認してみます。

設置されたか確認する

アイコンが反映されたか確認してみましょう。サイトをsafariで開いて、四角に上矢印のアイコンをタップすると「ホーム画面に追加」ボタンが表示されます。

stinger5-iphone-ico

タッチするとサイトのショートカットがホーム画面に作成されます。

stinger5-iphone-ico2

これでiPhone用のオリジナルアイコンが設置されました!

まとめ

アイコン画像さえ作ってしまえば、かんたんにiPhone用のアイコンを設置することができましたね。iPhoneユーザーは非常に多いので、気が付いたときにこの設定をしてあげておくとGoodですね。

↓PC用のファビコン設定の記事も書いてます。この機会に合わせてどうぞ↓

関連

Stinger5にファビコンを設置する方法
こんにちは、okutani(@okutani_t)です。本記事ではWordPressのテーマであるStin...
2015-03-09 06:22
はてブ

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

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
お洒落なアイコンを設定しておけば、iPhoneからサイトを見てもらえる回数が増えるかもしれませんね。それに、iPhoneを持っている人との話のネタにもなるかも...!

 - Stinger5

スポンサーリンク

PC用AdSense

PC用AdSense

▼格安のWebサイト制作はじめました▼

格安のWebサイト制作
Share
  • このエントリーをはてなブックマークに追加

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

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

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

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

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

Simplicity,Stinger5で超簡単にアイコンを使う方法

こんにちは、okutani(@okutani_t)です。あ、もう一度言いますね。 …

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

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

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

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

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

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

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

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

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

こんにちは、okutani(@okutani_t)です。本記事ではWordPre …

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

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

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

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

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