「WPtouch Pro」の使い方(7)ブックマーク用のアイコンを設定する方法ーfor iPhone,iPad

WordPressのスマートフォン最適化プラグイン「WPtouch Pro」のブックマーク用カスタムアイコン（Homescreen Icons）の設定方法がやっとわかりました。無表情なディフォルトのアイコンから固有のアイコンに変更する方法を以下にメモしておきます。

カスタムアイコンの設定

PCによる検索数は世界的にピークに達し、スマートフォンやタブレット端末へ急激にシフトしてゆくことが明らかになっているようです。PCの検索量はピークに達した可能性あり | SEO Japan

ますます、ブログのスマートフォン表示の最適化に迫られています。そこでこのブログでも、さらにカスタマイズしていこうと考えています。

ブックマーク用のアイコンです。iPhoneなどのiOS用のブラウザSafariでは、ホーム画面にブックマークできます。（Androidも可能）つまりホームスクリーン用のアイコンをスマートフォン用のテーマに用意する必要があります。

しかし「WPtouch Pro」によるブックマーク用のアイコン（Homescreen Icons）は以下のように無味乾燥なものです。

そこでこのブックマーク用のHomescreen Iconsを、カスタム設定したいと思います。用意するアイコンは、公式説明では「For images that will used as a Homescreen (Bookmark) icon, they should be 59×60 pixels or higher for best results on iPhone 2G, 3G and 3GS, and 113×114 pixels for iPhone 4.」となっています。

しかしおすすめは、Retinaディスプレイ対応にするために、72ｘ72、128×128（Retinaディスプレイ対応）のサイズのpngファイルを用意したほうがよさそうです。オンラインアイコンジェネレーターなど無料のブックマークアイコン作成サイトはたくさんあるようです。

次に作成したアイコンを以下のようにアップロードします。以下のようにWorpdressの管理画面で、「WPtouch Pro」から、「メニュー＋アイコン」から、「アイコンとセットを管理」へ。「アイコン/セットをアップロード」をクリックして、PCからアップロードします。

その後、上のように「カスタムアイコン」のところにアップロードできたことが確認できます。

最後に、「メニューとアイコンセットアップ」へ行き、「アクティブアイコンセット」のプルダウンメニューから「カスタムアイコン」を表示。128×128の画像を、iPhone/Android Homeへ、72ｘ72をiPad Home screen へドラッグ＆ドロップします。

そうすると以下のように、カスタムアイコンをセットできました。

動作確認をしてみます。iPhoneのブラウザSafariでブログを表示、「共有」ボタンをタップ。

見事に、カスタムアイコンを表示できました。「ホーム画面に追加」します。

こんな感じで、Homeへ我がブログをブックマークできました。

以上が、WordPressのスマートフォン表示最適化プラグイン「WPtouch Pro」によるカスタムアイコンの設定方法でした。このプラグインはかなり奥が深いですね。