Stinger5にiPhone用のアイコンを設置する
2017/02/01
こんにちは、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用のファビコン設定の記事も書いてます。この機会に合わせてどうぞ↓
関連
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています。
「Ruby on Rails」「HTML5」「CSS3」「JavaScript（jQuery, Reactなど）」を用いたシステム開発、「Heroku」を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
