【iPhone IOS】Safariで「ホーム画面に追加」されるアイコンを変更する方法!

Sponsored Link


【iPhone IOS】Safariで「ホーム画面に追加」されるアイコンを変更する方法!

 

はいさーい!

沖縄セドリスタREDです!(`・ω・´)

 

【人気ブログランキング】
こちらからポチポチ応援よろしくお願いしますm(__)m

 

 

 

今回の記事では
【iPhoneで「ホーム画面に追加」した時のアイコンの設定方法】
についてお話致します(‘◇’)ゞ

 

 

 

1:アイコン未設定時の「ホーム画面に追加」はこうなる!

iPhoneのブラウザSafariの機能に【ホーム画面に追加】というものがあります。

「ホーム画面に追加」はブックマークとはちょっと違っていて、
閲覧しているウェブサイトを丸々iPhoneのホーム画面に追加して、
いつでもすぐに見れる状態にしておくコト
をいいます。

 

 

その時のアイコンを未設定にしているとこんな感じになります。

20151015121915ZEROstaブロガーのブログアイコンです

 

分かりますか??

9つあるブログのうち3つがアイコンを設定しており、残りの6つは未設定の状態なので、
STINGER5のアイコンのままになっています。

 

これだとパッと見ではどれが誰のブログなのかが分かりません(>_<)

 

というワケで!

他者と差別化するためにもぜひ設定しておきたいトコロです。

 

 

 

2:【ホーム画面に追加】時のアイコン設定の手順

1-アイコンで使用したい画像を用意

2-画像ファイルをワードプレス内のメディアライブラリにアップして、URLをコピペしてメモなどに残しておく

3-【header.php】の該当箇所をコピペしておいたURLに書き換え、再読み込みをして確認

以前の記事で紹介したファビコンの設定方法とほとんど同じってワケです(゚∀゚)

 

 

1-アイコンで使用したい画像を用意

ホーム画面に追加した時に表示されるアイコンのコトをウェブクリップアイコンとも言いますが、

ウェブクリップアイコンのサイズは様々な端末によって異なります。

 

端末によって異なるものの、144×144のサイズで作っておけば

あとは勝手にリサイズしたりして調整されるので、

144×144サイズで作っておけばOKです。

 

 

ちなみに下記画像が私のウェブクリップアイコンなんですが、

今チェックしてみたら152×152で作成していました(^-^;

photo3(クリックで拡大します)

2-画像ファイルをワードプレス内のメディアライブラリにアップして、URLをコピペしてメモなどに残しておく。

メディアライブラリには、【メディア】⇒【新規追加】で画像ファイルをアップできます。

アップが完了したら、画像のURLをメモ帳などにコピペして残しておくコト。

15101402(クリックで拡大します)

3-【header.php】の該当箇所をコピペしておいたURLに書き換え、再読み込みをして確認。

はい!

htmlをいじります!

まずはバックアップをとるコトを忘れずに!

 

 

ファビコンの時と同じように、【外観】⇒【テーマの編集】の中にある【ヘッダー(header.php)】をクリックして、header.phpの中身を表示させてください。

15101403(クリックで拡大します)

 

 

実際に書き換えるのは真ん中辺りにあるココ。

15101404-2(クリックで拡大します)

header.phpの中身が表示された状態で【Ctrl】+【F】を押してください。

すると画面の右上に検索窓が出て来るので、そこに【apple-touch-icon】と入力して検索をかけると、該当箇所に色がついて簡単に探せるようになります。

 

該当箇所を見つけたら、

<link rel=”apple-touch-icon” href=”画像のURL” />

こんな感じで先ほどコピペして残しておいた画像のURLに書き換え、【ファイルを更新】ボタンを押して更新します。

更新が完了したら再読み込みして、iPhone上できちんと表示がされるかを確認して、問題がなければおしまいです。

 

 

 

3:「ホーム画面に追加」されるアイコンを変更する方法についてのまとめ

今回の記事の通りに変更すれば、iPhoneのSafariでホーム画面に追加した際のアイコンを、

オリジナルのアイコンで表示させるコトができます。

 

スマホからのウェブサイト閲覧が増えているのは間違いないので、ウェブクリップアイコンを変更して他者との差別化をしておきたいですね!

 

 

そーしーて!!!

何度も何度も言うけど、htmlの書き換えを行う際は、
絶対にバックアップをとってからにしてくださいね(>_<)

 

 

 

ちなみに以前の記事では【favicon画像の変更方法】についても書いているけど、読んでくれてるかな??

同じような作業でパパっと変えられるので、そっちについても変えておこうね(*´▽`*)

↓ ↓ ↓ ↓ ↓

ファビコンを無料で作成&設置!faviconを設定してブログの差別化!

 








「タダほど怖いモノはない」
世間ではそういった常識(?)が
広がっていますが、


ネットビジネスの世界に限っては
そうとは限りません。





こんな優秀なせどりツールが
【無料】だなんて信じられません。





私が特に気になっているのは
TSUTAYA
GEO
BOOKOFF
インストアコードに対応している点。




この機能はこれまでの常識であれば
有料ツールにのみ
搭載されている機能。




それが
メールアドレスを登録
するだけでもらえるのだから
いますぐ手に入れるべき。





しかも!

今なら期間限定特別特典
3つももらえるから、


「せどりってなに?」
「何から始めたらいいの?」
という初心者の方でも
なんの心配もいりません。






GmailやYahoo!メールなどの
フリーメールアドレスで登録できるので、
今すぐ登録して手に入れてください。



Sponsored Link

サブコンテンツ

このページの先頭へ