スポンサーリンク

[iPhone][iPad]マイブログをホーム画面に追加したときのショートカットアイコンを作ってみたよ


スポンサーリンク

IMG_3424-1 2

はじめに

私のブログをiPhoneやiPadでホーム画面に追加した際、お気に入りアイコンにするためにやったことをまとめてみました@fwhx5296ことShigeです。
 
ブログ歴は2年少々あるのですが、サイトのカスタマイズやワードプレスの構造等については初心者に毛が生えている程度の知識と技術しかないので、悩みながらの作成でしたw

私のブログをホーム画面に追加したときに表示されるショートカットアイコンをマイアイコンにしてみたよ

マイアイコンとは、最愛の彼女です。
IMG 4562

iPhoneやiPad等で閲覧されているという前提で・・・
まずは、何も設定していない場合はどのように表示されるか試してみました。
 
 

ウェブサイトをホーム画面に追加する手順について

▼まずはこちらをタップすると表示されます。そして矢印の「転送」をタップします。
IMG 3420 2

▼「ホーム画面に追加」をタップします。
IMG 3421 2

▼表示されるのが、こちらの画面。右上の「追加」をタップしてホーム画面に追加します。
IMG 3422

▼このアイコンかっこ悪いし、一目みて何のアイコンかわかりづらいw
IMG 3423

 
ということで、指定アイコンを設定する方法です。
初心者に毛の生えた私でもできたので、どなたでもできます。
それも10分もかかりません( ー`дー´)キリッ
(10分以上かかったらごめんなさいw)

画像の設定方法について

▼画像のアップロード方法はご存じの方が大半だと思いますが…
 ワードプレスのダッシュボードを開いて、メディアから「新規追加」で指定するアイコン画像をアップロードしてください。(このスクショは既にアップロード済みの画像です。)
スクリーンショット 2014 02 21 8 39 10 PM 2

▼アップロードした画像を開きます(リンクをクリックします。)
スクリーンショット 2014 02 21 9 59 30 PM 2

▼「画像を編集」をクリックします。
スクリーンショット 2014 02 21 9 59 57 PM 2

▼「画像の拡大縮小」をクリックします。
スクリーンショット 2014 02 21 10 00 31 PM 2

▼iPhoneのアイコンとするため「114×114」としましょう。
スクリーンショット 2014 02 21 10 00 43 PM 2

▼画像が設定できたならば、あとで必要になる「絶対パス(URL)」をテキストエディットなどにコピペしておきましょう。カーソルは表示されないので、マウスポインターをドラッグしながら選択してコピーします。
スクリーンショット 2014 02 21 8 41 03 PM 2

これで画像の準備はOK!

指定アイコンの表示設定方法について

▼ワードプレスのテーマ(twentytenやtwentyelevenやSTINGER、el_planoなど)によって違いはると思いますが、一般的にメニューから「外観」>「テーマ編集」を選択します。
スクリーンショット 2014 02 21 8 34 33 PM 2

▼通常のテーマであれば(画面右側に表示される)テンプレートの中の「ヘッダー(header)」を選択して問題ないと思います。しかし、私が愛用しているテーマは「el_plano」。モバイルテーマの「header」を選択しなければなりませんでした。
スクリーンショット 2014 02 21 8 35 01 PM 2
これに気付くのに二日がかりでしたw

headタグ内に下記を追加します。

<link rel=”apple-touch-icon” href=”画像パス”>

※「<」「>」は表示の都合上、全角で表示していますので半角に修正して追加してください。
 また、「“画像パス”」については、さきほどテキストエディットにコピーしたパスをペーストしてください。

▼追加場所は</head>の直前にしました。「ファイルを更新」で完了です。
スクリーンショット 2014 02 21 8 42 12 PM

▼ではみてみましょう。再度こちらをタップします。そして矢印の「転送」をタップします。
IMG 3420 2

▼「ホーム画面に追加」をタップします。
IMG 3421 2

▼表示されるのが、こちらの画面。右上の「追加」をタップしてホーム画面に追加します。キタ━━━━(゚∀゚)━━━━ッ!!
IMG 3419

▼アイコンを並べてみました。一目見てわかるのがいいですね。
IMG 3424

おわりに

いろんなサイトをみて回ったのですが、なかなかマイアイコンが表示されなくて悩みました。
ということで備忘録がてらエントリーしてみました。
どなたかの参考になれば嬉しゅうございます。
大したことではありませんが、やはり親しみのあるアイコンが表示されるというのは嬉しいものですね。

他にも簡単に設定できるアプリもあります。
それが、こちら。またエントリーしますね。

Touch Icon Creator

100円
(2014.02.21時点)
posted with ポチレバ

この記事が気に入ったら
いいね ! してくださいね

Twitter で

コメントはこちら

*
*
* (公開されません)

COMMENT ON FACEBOOK

スポンサードリンク

Return Top