BloggerやWordPressに、apple-touch-iconを導入する

apple-touch-iconって何？

iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう | Web担当者Forum

404のアクセスを調べていたら、apple-touch-iconが出てきてたので、調べたら上記のようなものでした。iOS系で、ホーム画面にブックマークのショットカットを置く時のアイコン画像のことのようです。

apple-touch-iconの作成の仕方

「iphone-icon-generator」で検索すると、いろいろ出てくるかと思います。

今回、私はここで作成しました。ファビコンの時使用した画像をそのまま使いました。
http://www.iconj.com/iphone_style_icon_generator.php

上記のような感じで、必要な画像を作成してくれます。

WordPressの場合

<link rel="apple-touch-icon" href="/apple-touch-icon-iphone.png" /> 
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-ipad.png" /> 
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-ipad3.png" />

Wordpresの本体があるところに、上記で作成した画像を置きます。
テンプレートのheader.phpのheadタグの部分に、上記を追加してください。

Bloggerの場合

Bloggerの場合、画像はPicasaあたりに置くしかないかと思います。置いた場所のURLを書くようにすればどこにおいても表示されます。

たとえば、Wortdpressの4行の最初の１行だけだと、以下のような感じになります。

<link rel="apple-touch-icon" href="https://3.bp.blogspot.com/-p-9PM1s3zKs/UdcjIvXkohI/AAAAAAAAMHc/QxB8aut39H0/s1600/apple-touch-icon-iphone.png" /> 

実際には4行分用意したほうがよいでしょう。

モバイル表示の問題

モバイルバージョンではapple-touch-iconが使えない
ものすごく意外な原因でした。bloggerにはモバイルからアクセスした場合にモバイル用のテンプレートで表示するようできるのですが、モバイルテンプレートからはapple-touch-icon(ウェブクリップアイコン)が使えないらしいのです。

対処法は
・モバイルテンプレートを無効にする(PCテンプレートのみにする)。
・モバイルテンプレートをカスタムに変更する。
apple-touch-icon.png(ウェブクリップアイコン)がbloggerでうまく表示されない時の対処法。 | tamanblog

Bloggerの場合はモバイルテンプレートは、「カスタム」にしないと、ユーザーが設定したものを使用してくれません。

「Bloggerのモバイルテンプレートのカスタマイズに挑戦しよう」を参考にしてみてくださいね。

apple-touch-iconを使用しているユーザー層は、どうもiPad系の人が多いようなので、モバイル表示の時はあきらめるというのも一つの解決策です。（iPadの場合は、PCバージョンが表示されるはず）