【WordPress】iPhoneホーム画面「ウェブクリップアイコン」の設定方法について。

2014/07/18

前回の記事では「ファビコンの設定方法」を紹介しましたが、今回はiPhoneのホーム画面に表示されるアイコンの設定方法を紹介したいと思います。ちなみに今回設定を行う、iPhoneのホーム画面に表示されているアイコンのことを「Webclip(ウェブクリップ)アイコン」と呼ぶそうです。スマホ最適化などが重要視されている昨今、ファビコンとウェブクリップアイコンの設定は必須ですね。それでは早速設定してみましょう。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<事前情報として>
■テンプレートはENJIさんのStinger3を使用中です。
■作業工程は5分程度(デザイン時間は除く)です。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~手順1~
「ペイント」で画像を作ります。
FACEBOOK/TwitterなどのSNSに流用する場合のことも考慮して、
180×180サイズで作ることをおすすめします。作り終えたら保存します。

EyeLovePhoto

実はこの作業(デザイン)が一番大変かもしれません。センスが問われます。参考までに、センスの有無はさておき、私の場合は「Eye Love Photo.」から「Eye=目」と連想して、目という漢字の中に「枠が3つ」あることを発見したので、その枠の中に再度アルファベットの「EYE」と「LOVE」と「PHOTO.」を突っ込んでみたら、良い感じに仕上がりました。そして最後に、枠ごとに少しずらしてみたところ、自分好みのデザインに!

~手順2~
作った画像をワードプレスの「メディア」にアップロードします。
アップロード後は「ファイルのURL」をメモ帳にコピーしておきます。

~手順3~
ファビコンの時と同じようにテーマ本体のheader.phpを触ります。
外観→テーマ編集→ヘッダー(header.php)の順です。

~手順4~
これに似た行を探してください。(<>を全角にしています)
<link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icon-precomposed.png" />

~手順5~
手順2でコピーしたURLを突っ込みます。(本来<>は半角です)
<link rel="apple-touch-icon-precomposed" href="ここに突っ込みます" />

~手順6~
ファイルを更新して作業完了です。

ウェブクリップ確認

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<お願い>
※上記手順でウェブクリップが反映されることを確認済みですが、
 あくまでも参考に留めていただき、実行は自己責任でお願いします。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ワードプレスは触っているけど、ファビコンやウェブクリップは初期設定のままになっている、ちょっと残念なブログやサイトを多くみかけます。デザイナーが使う「Illustrator(イラストレーター)」「Photoshop(フォトショップ)」といった有料ソフトは必要とせずに、誰でも簡単に設定できることなので、まだ初期設定のままの方は是非、ファビンコン&ウェブクリップの設定にチャレンジしてみてください。楽しいブロガーライフを!

PR



-WordPress
-