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

スポンサーリンク

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

image


カスタムアイコンの設定

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

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

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

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

image

そこでこのブックマーク用の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ディスプレイ対応にするために、72x72128×128(Retinaディスプレイ対応)のサイズのpngファイルを用意したほうがよさそうです。オンラインアイコンジェネレーターなど無料のブックマークアイコン作成サイトはたくさんあるようです。

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

image

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

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

image

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

image

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

image

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

image

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

image

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

スポンサーリンク

シェアする

フォローする

関連記事