ブログのスマホクリップアイコンを設定してみました Xperia SOV36編

ウェブクリップアイコンとはなんぞ？

簡単に言ってしまえば「ウェブ上のクリップアイコンです。」（そのまんまｗ）

すいません。ただ、ほんとに言葉の解釈そのままの意味です。

スマホでインターネット見るときにブラウザ（SafariとかChrome）からアイコンタップして閲覧しますよね。もしくはブラウザアプリをダウンロードして、アプリから見るとかです。

インターネット上のお気に入りのホームページやブログをブックマークして登録、そこからとぶことが多いわけですけど、今のスマホって「ホーム画面への追加」機能（これがウェブクリップの意味ですね）がありまして、それをしておくとホーム画面にそのサイトのアイコンができます。

前使ってたiPhoneだと、見てるサイト上で下記のホーム画面に追加をタップでOK、ホーム画面にそのサイトのアイコンが追加されてます。

わざわざブラウザ立ち上げてお気に入りからサイトに飛ぶっていう手順を、ホーム画面アイコンワンタップで飛べるという嬉しい機能です。

お気に入りサイトを、そのままスマホのホーム画面にもってくるっていう感じです。

Xperia SOV36（OS Ver.8.0.0）の場合

ピンポイントで同じ機種を使われている方ならこの方法でそのまま設定できますし、おそらくVer.7.0でも仕組み的に大丈夫だと思いますが、確信はありません。

Chromeブラウザでご自分のブログを表示してお気に入り登録、そのままハンバーガーボタンの下の方に「ホーム画面追加」項目がありますので、それをタップ、追加でデフォルトのアイコンがホーム画面にできます。

次にオリジナルのアイコンに使う画像を用意するわけですけど、まずは画像の著作権（下記にも改めて記載しますが）はくれぐれも細心の注意を払ってください。ライセンスやフリー素材でも、管理サイトによって利用規約はそれぞれ違います。

Androidの場合注意すべき点は2つ。

• 名前にicon_○○と半角英数字名を含めたPNG拡張子の画像を用意
• link属性に"apple-touch-icon"を含める

あとはできた構文をテンプレートのヘッダー内に貼り付けて更新するだけです。

ちょっとカッコイイ(笑)感じにしたかったので、背景透過させてアイコンらしさを出さないようにしてみました。出来上がりはこんな感じです。

アイコン画像は192×192pxで正方形で設定してますが透過なのでほぼ意味なしという・・・。

コツは必ず正方形で画像を用意することと、容量の大きすぎる画像は利用しないことですね。（200×200pxくらいで良いかも）

iOS（iPhone）の場合もこれでいける

iOS（iPhone）の場合も基本はlink属性に"apple-touch-icon"を含める構文と、画像ファイルのPNG拡張子さえ間違わなければAndroidと同じ手順で大丈夫だと思います。（現在は手元にiPhoneを持っていないので未確認ですけど）

できれば、画像ファイル名も【apple-touch-icon.png】にしておいた方が良いかもしれないですね。

iOS（iPhone）とAndroidで設定が違うのか？という部分では、OSがサポートされていない旧バージョンのものだと、だいぶ仕様が変わりますので、設定基準も違ってくると思います。

HTML記述ミスと使用画像著作権は厳守

私なんかが言わなくても良いかもしれませんが、くれぐれも著作権の厳守、画像やイラストなどをお使いになる場合はご注意ください。

あとほんっとによく自分もやるんですけど、テンプレート内のヘッダーに触る時はくれぐれも注意してくださいね。半角抜けてたり、スペース（空白なんでめちゃくちゃ分かりにくい）が空いてたり、記号が抜けてるだけで致命的になりますから＾＾；バックアップも含めて必ず取っておくことをおすすめします。

【本項のまとめ】

結構自分でいろんなカスタマイズができると、改めてブログ作りがとても楽しくなりますね。

最近はSNSからの流入、スマホでのブログ閲覧がかなり増えてきてますから、テンプレのレスポンシブ化は今後必須になりそうです。

スマホでも自分のブログが良い感じにホーム画面にアイコン化されてたらテンション上がりますし＾＾（ちなみにブログタイトルと全く関係ないアイコンは、相方のアルファベットです笑）

ぜひオリジナルの触りたくなるスマホアイコンを作ってみてください。