【ブロガー必見】ホーム画面に追加したときのアイコンを好きな画像に設定する方法 !

cal03

どうも、@NewsBank7です。

iPhoneにはSafariから閲覧しているウェブサイトを、ホーム画面に追加する機能が備わっています。

今日は自分のブログやサイトをホーム画面に追加されたとき、自分の設定した画像をアイコンとして表示させる方法を紹介していきたいと思います。

デフォルトでは微妙・・・

ホーム画面に追加したときの画像を設定しないと、デフォルトでは追加したサイトのキャプチャーがアイコンになって表示されます。

ホーム画面に追加のアイコン設定

これだとちょっとダサいですし、ホーム画面にある数あるアイコンの中から、自分のブログをアピールすることができません。

せっかくなのでブログの顔とも言える素敵なアイコンに設定をし、自分のブログの存在をアピールしてやりましょう!!

画像を用意しよう!

まずはアイコンとして設定したい画像を用意しましょう。

サイズは114×114の正方形で、フォーマットはgifjpgpngbmpのいずれかでも可能です。

にゅーすばんくではこの画像をアイコンに設定していきたいと思います。

image

タグを追加しよう

画像をサーバーに画像をアップロードしましょう。

画像のアップロードが完了したら、下のコードをheader.phpにあるheadタグ内にコピペしてください。の手前にコピペすればいいはずです。

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

ちなみに画像パスってのはアップロードした画像のURLです。WordPressから画像をアップロードしたなら、http://newsba-nk.com/wp-content/uploads/2014/11/IMG_3146.jpgみたいなURLが画像パスとなります。

光沢を消す

以上で設定は完了なのだが、このままだと設定した画像がApple特有の光沢感を出したアイコンになってしまいます。

個人的にはこの光沢感は出しておいたほうが好きなのですが、これを消す場合はこちらのコードをお使いください。

<link rel="apple-touch-icon-precomposed"href="画像パス" />

登録したアイコンを確認しよう

以上で設定は完了です、

早速自分のブログをホーム画面に追加してみます。Safariから「ホーム画面」を追加をタップ。

20141107_170643000_iOS

しっかり設定したアイコンになっていますね!

管理人みずほのぼやき

FJw4R4Lj

自分のブログを覚えてもらうためにも、ブロガーなら是非とも設定しておきたいものですね!

自分もとりあえず設定していますが、もう少しいい画像が欲しいな。時間があるときに気合入れて作るかなー。

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。