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

Tweet

Pocket

こんにちは、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で開いて、四角に上矢印のアイコンをタップすると「ホーム画面に追加」ボタンが表示されます。

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

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

まとめ

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

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

関連

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

こんにちは、okutani(@okutani_t)です。本記事ではWordPressのテーマであるStin...

2015-03-09 06:22

Tweet

Pocket

okutani (@okutani_t) のヒトコト

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