Webテク倉庫

レスポンシブテンプレートにて運営しております。

ブロガー必見!iPhoneのホーム画面に自分のブログのオリジナルアイコンを設定する方法 

Embed

スマホ使いの皆さんでしたら、何かのアプリを使おうとした時に、ホーム画面上に表示されているそのアプリの「アイコン」をタップして起動させますよね。


アプリじゃなくて、お気に入りのブログやサイトを閲覧しようとした時に、あなたは「お気に入りやブックマーク」に登録してそこからから閲覧したり、YAHOOやGoogle検索からアクセスしたりしてませんか?(笑)
スマホの機能を知っている人でしたら、スマホのホーム画面に直接そのブログを登録して、それをタップすることで1発でアクセス出来ることを知ってますよね。

私のiPhone6のホーム画面を例にすると


2016-04-08-touroku-0m.png


この赤枠で囲ってありますアイコンのことです。
これ、弊ブログのオリジナルアイコンなんですけどね。

念のため、iPhoneのホーム画面へブログやサイトを登録する方法もご案内しておきましょう。
登録したいブログやサイトをSafariで表示させてから、、、


2016-04-08-touroku-1w.png


赤枠部分のマークをタップすると


2016-04-08-touroku-3.png


このように「ホーム画面に追加」が現れますのでタップして登録することが出来ます。

さてさて、本日の記事の本題はここからなんです(笑)

ブロガー必見!iPhoneのホーム画面に自分のブログのオリジナルアイコンを設定する方法

この記事タイトルのように、ここからはブログやサイトを運営なさってる人向けの記事になりますのでご了承下さい。

上記のように普通にブログやサイトをホーム画面登録をすると、実は弊ブログの今のテンプレートデザインの場合のアイコンは


2016-04-28-icon.png  2016-04-28-icon2.png


この左のような感じでアイコン表示が変と言うか、貧弱なものになってしまうんです (^_^; アハハ…
こんなのじゃ全くインパクトないし、何がなんだかよく分かりませんよね~ (^^ゞポリポリ
実は、この「ホーム画面登録」して表示されるアイコンとは、それぞれのブログやサイトの「スクリーンショット画像」が自動的に取得されて表示されるようになっているのです。
ですから、あなたのブログ等のテンプレートデザインによって表示されるアイコンデザインが左右されると言う意味なんです。
ブログ運営しておりますと、テンプレートデザインを季節や気分(笑)によってチェンジしたりして楽しむこともありますよね。
そうすると、あなたのブログをスマホのホーム画面に登録してくれてある閲覧ユーザーさんのそのアイコンもデザインが変わってしまうのですよ(笑)
デザイン的にもいつも綺麗に表示されてくれれば何も言うことはないのですが、その時のテンプレートによっては「なにこれ~? アイコンが壊れた?」なんてこともあって、ユーザーさんをびっくりさせてしまうこともあるんです。

ですから、時々のテンプレートのチェンジにもアイコン表示が左右されない、いつも固定的に表示される方法を考えた方があなたのブログの常連ユーザーさんにも親切なのではないでしょうか? (笑)

ん? アダルトブログだと、ちょっとマズイですかね?
肌色なアイコンがスマホのホーム画面にあったとしたら (^_^; アハハ…



2016-04-28-kangaecyu2.png


では、その方法をご案内しましょう。

先ずはとにかく、あなたのブログのイメージに合った独自のアイコン用画像を作ることです。
私の場合は、自分で描画出来るようなデザインセンスはまったくありません(笑)からネット上から貰って来たキーボードを叩いてるお姉さんの画像の一部分を切り取って、そこに「Web」と文字入れしただけの簡単なアイコン用画像を下記のように作りました(笑)

このような場合には、著作権侵害にならないようなライセンスフリーな画像を選択するようにしましょう。


apple-touch-icon.png


アイコン用のその画像サイズは、私の場合は 144×144px(ピクセル) で作ってあります。
ご覧のように正方形画像で良いんです(自動的に角丸なアイコンで表示されるようになります)。
その画像ファイル名の拡張子は 「○○○.png」 のようにpng形式の画像になっている必要があります。
元々が「.jpg」や「.gif」のようなファイル拡張子の画像を、勝手に「○○○.png」とファイル拡張子を書き換えようとすると画像が壊れてしまいますからご注意下さい。

そのような「画像の拡張子変換」をしたい場合には

Vector-ドラッグ&ドロップ画像変換
動作OS:Windows XP/Me/2000/NT/98/95 となっておりますが、Windows10でも問題なく動作しております。

のような簡単操作の無料ソフトを使うのも便利です。

ロゴデザインを作成するには 無料ロゴ作成.com さんのようなサービスを利用する方法もあります。
弊ブログのアイコンの「Web」の文字は、こちらのジェネレーターを利用して作成させていただいてキーボード画像にペチョっと合成させて戴きました、どうもありがとうございました(笑)
手抜きいっぱいですよね~(笑)

さてさて、このように作成したアイコン用画像をどうアイコン化するかですが、、、。

そのアイコン用画像を自分のブログスペースにアップロードして、その画像のURLをメモ帳などにコピーしておきましょう。


2016-04-28-iconurl.png


そのURLを下記の"アイコン画像のURL"部分に挿入して、その全体をまたメモ帳等にコピーしてください。

<link rel="apple-touch-icon" href="アイコン画像のURL">

を、弊画像例のURLでは

<link rel="apple-touch-icon" href="http://blog-imgs-92.fc2.com/o/o/p/oops0011/apple-touch-icon.png">


のようになりますから、これをメモ帳等にコピーしておく訳です。

それを、あなたのブログのテンプレートのHTML編集欄のソースの <head>~</head> の間に挿入して「更新」をします。
これで設定は全て完了です。

ものは試し(笑)ですから、弊ブログをあなたのiPhoneのホーム画面に登録してみて下さいね~ ^^


■ 注意

① アイコン用画像の作成サイズですが、私の場合には記事中に 144×144px(ピクセル) というサイズを書きましたが、iOS7以降から最大サイズが 152×152px(iPad-Retinaでのサイズ) になったようです。
アイコンの表示サイズは、そのデバイス(iPhone5やiPhone6やiPad等の機種)によっても違うのです。

従って「大は小を兼ねる」(笑)ってことで、アイコン用画像は 152×152px にて作成した方がよいのかもしれません。
デザイン的には、実際に各デバイス上に表示されるアイコンは「縮小表示」される訳ですから、縮小されても潰れないでアイコンとしてしっかり見えるデザインにする必要はあります。

まあ、私は 144×144px のままにしてありますけどね~ (^^ゞポリポリ

② アイコン用画像のファイル名ですが、必ずapple-touch-icon.png」という名称でないとアイコン表示出来ないような記述をしてあるネット記事をたまに目にしますが、私が試したところではabc.png」でも表示出来ておりました。
つまりは、ファイル名は何でも良いけど、その拡張子は「.png」であることが必要ってことですね。



トップページへもどうぞ

関連記事

iPhone ホーム画面 ブログ アイコン作成 アイコン表示が変

Comment

Name - メグ  

Title - ふうううう~~!!

♪⌒ヽ(*゚ω゚)ノ ヤッターッ!!

頑張って作りましたよ!>アイコン
ぱっと見エロくない絵柄にしましたよ。
清純そうなお花の。(o_ _)ノ彡☆ポムポム

他にもトップ記事の中に画像のスライドショー入れたりしてるので
テンプレ変える度にHTMLをいじるのが面倒くさいですけどー。(笑)
んで、メグとこみたいなエログだとホームに追加する時にタイトルを変えるといいですよね~。

そうそう!
拡張子の変換って解からない方もいらっしゃるかも???
機会があればわかりやすく解説して下さいませ~。
メグからのリクエストです~~~( ̄ー ̄)

真夜中のメグたんより♡
2016.06.25 Sat 01:56
Edit | Reply |  

Name - ぼっちん  

Title - メグたん♪へ

メグたん♪ いらっしゃ~~~い ^^
またまた真夜中過ぎのご登場で(笑)

頑張って作りましたよ!>アイコン
ぱっと見エロくない絵柄にしましたよ。
清純そうなお花の。(o_ _)ノ彡☆ポムポム

w(゜o゜)w オオー! 私のiPhoneのホーム画面に登録しましたよ~ 清純(笑)花柄アイコン ^^
可愛らしく作れましたね~ さすがメグたん♪ ヽ(^^ ) ヨシヨシ
先夜にメグたん♪が弊記事「ブロガー必見!iPhoneのホーム画面に自分のブログのオリジナルアイコンを設定する方法」をじっくりと読んでくれてたのがアクセス解析で分かったもんだから「きっとメグたんなら実現しちゃうだろうね~ o(^-^)oワクワク」って思ってたところだったのよ(笑)

他にもトップ記事の中に画像のスライドショー入れたりしてるので
テンプレ変える度にHTMLをいじるのが面倒くさいですけどー。(笑)

(〃^▽^〃)oあはははっ♪ そそそ、テンプレをカスタマイズして使うと、なかなか他のテンプレに替える時に躊躇っちゃうよね~(笑)
またテンプレのHTMLやCSSを弄くらなくちゃ (´ヘ`;)ハァ なんて気が重くなっちゃったりして(爆)
私はね、そういうカスタマイズ部分を丸ごとコピペして、新しいテンプレに「移植」しちゃう方法をとってるのよ(笑)
だから、新しいテンプレにチェンジする時に殆ど困ってません(笑)

んで、メグとこみたいなエログだとホームに追加する時にタイトルを変えるといいですよね~。
(〃^▽^〃)oあはははっ♪ そうじゃんねぇ(笑)
iPhoneのホーム画面に追加操作する時に「ブログタイトル名」って任意に書き換えることが出来るじゃんね(笑)
妖しいブログタイトル(笑)だったらそうやってカモフラージュしたらいいじゃんね(爆)
メグたん♪ ナイスだね~ ヽ(^^ ) ヨシヨシ

拡張子の変換って解からない方もいらっしゃるかも???
機会があればわかりやすく解説して下さいませ~。
メグからのリクエストです~~~( ̄ー ̄)

あっ\(◎o◎)/! そう言えばそうだよね~ その手の記事ってまだ書いてなかったねぇ (^^ゞポリポリ
じゃあ、追々記事にするね~ ああ、やっと記事ネタが1つ出来た(爆)

真夜中のメグたんより♡
相変わらずの忙しさみたいだね~(笑)
お身体大切に~ ヽ(^^ ) ヨシヨシ
2016.06.25 Sat 09:16
Edit | Reply |  

Add your comment

【 AOSSL化が完全スタートするまで暫定的にパスワード欄を外してあります 】

(チェック入れると管理人のみ閲覧)