iPhoneのブラウザでブログを「ホーム画面に追加」した時のアイコンをオリジナルにする方法

IMG_8455

こないだ、「オニマガをスマホのホーム画面に入れてますよ!」って人がいて、
さらにその後に、初めて知り合った人との会話でブログやってるという話になって、
その場で「じゃあホーム画面に追加しておきます」ってなって、
えー!そんなカジュアルにみんなホーム画面に追加しちゃうの?とビックリ。

ワタクシ、ホーム画面のアイコンなんて1ページで収まる位しか置きたくない派なので、
軽くカルチャーショックを受けたわけですが、
たしかにホーム画面に追加しとくと便利ですよね!(で、自分もその後やっておいた)

ただiPhoneのsafariでそのまま「ホーム画面に追加」ってやると、
ブログのアイコンが適当な感じのが出ちゃうんですよねー。
なので、ちゃんとオリジナルのアイコンが表示されるようにブログ側で指定しました。

ブログやってる人で、自分もそれやっときたいーって人がいるかもしれないので、
以下、そんなののやり方。

簡単にシンプルでおしゃれなホームページが作れるWordPressテンプレート「Minimal WP」

iPhoneのブラウザで「ホーム画面に追加」した時のアイコンをオリジナルにする方法

IMG_0997

とりあえず一番簡単な方法。

  1. apple-touch-icon.png って名前のpng画像を作成
  2. ドメイン直下にアップロード

以上!簡単!たったこれだけ。

一応、もうちょっとちゃんとしたやり方で、
<link rel=”apple-touch-icon” href=”/custom_icon.png”>
って感じでヘッダーにコードを書くやり方もあるみたいだけど(詳しくはapple公式で)、
コード入れるのめんどくさいので、画像アップだけでいいかなーっと。

画像のサイズは今のところ一番デカいiPhone 6 Plusに合わせて、
180×180ピクセルで作っちゃえばいいんじゃないでしょうか。
複数の解像度ごとに作成して、コードでそれぞれ読み込ませる方法もあるけど、
これまためんどくさいので、1個で全部兼用。勝手に縮小してくれるし。

ただAndroid用とかはまた別のコード書かなくてはいけなくって、
そっちはそっちでもっとめんどくさいので今回は省略。

と言う感じで、イッチバン簡単にアイコンを表示させる方法でした。

iPhoneのブラウザからオニマガを「ホーム画面に追加」する方法

IMG_0996

ブログをいつでも読みたい!って人は、
Safariでオニマガを開いたら、ブラウザの一番下の真ん中の、
□から↑が飛び出てるボタン押して、
下の段の右の方にスクロールすると出てくる「ホーム画面に追加」ってのを押すと、
iPhoneのホーム画面にアイコンが追加されます。
これでいつでもパッとアクセス出来ますよ!

ちなみに、ブログ用レンタルサーバーはWordPressが簡単にインストールできる、
ロリポップ!(月額250円〜)」「wpXクラウド(月額500円〜)」「エックスサーバー(月額900円〜)」がオススメです。

関連記事:超初心者でも簡単にWordPressでブログを始める方法(ドメイン&サーバー取得からの手順をイチから全部解説します!)

人気ブログを作る10の秘訣
by
オニマガ特製 WordPressテンプレートで
ブログやホームページ始めませんか?
ワードプレステーマ「Minimal WP」
Minimal WPのテンプレートを使ってブログの月間アクセスが最高45万PV超を達成しました。そんなノウハウ満載のシンプルデザインのWordPressテンプレート。HTML不要で初心者でも簡単におしゃれなサイトが作れます。ブログやお店のホームページ始めませんか?
Minimal WPテーマ

集客できるブログ型ホームページを自分で作ろう!

集客・ファン獲得・ブランディングに効果抜群なブログ型ホームページを自分で作ってみませんか?自営業・個人ショップ・フリーランスなら、デザインテンプレートを使って自分で簡単に作れる「WordPress(ワードプレス)のブログ型公式サイト」がオススメです!

初心者向けマニュアル

オニマガ執筆の完全ガイドです。

おすすめWordPressテーマ

オニマガ制作のMinimal WPテンプレートなら、HTML不要でおしゃれなミニマルデザインのブログやホームページが簡単に作れます。