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

Byクアトロ

スマートフォン画面とスマートフォンを持つ手の画像

こんにちは、クアトロです。


いろんな部分をちょっと弄ってブログ飾りたいって思う方は多いですよね。

どんな方でも時間を割いてブログ書いてるんですもん。愛着はさまざまなところででてくるものです。


ファビコンは楽に設置できたものの、はてスマホアイコンはどうするか?PC上、スマホブラウザではしっかりとファビコン表示できているものの、ことホーム画面用アイコンとなると面倒くさい。俗に言う「ウェブクリップアイコン」というやつです。

(余談ですが、自分の友人はスマホアプリとブラウザホーム画面のショートカットアイコンの区別がついておらず「アプリ消してしもたばい!」とかイタイことを言っていましたorz)


iPhoneの設定に慣れている自分はまだまだXperiaの機能を全く使いこなせてない部類です。(ガジェット好き公言のクセに)

で、一応予備端末として使っているXperia XZ1 SOV36でひいこら言いながら設定・表示することに成功しましたので、微力ながら手順と設置方法を書きたいと思います。

こんな悩みにお困りの方へ

  • スマホ用ブラウザアイコンの設定方法が分からない
  • iOS(iPhone)とAndroidで設定が違うのか?
  • 反映されない時はHTML記述と半角、拡張子を疑ってみる


Contents of articles



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


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

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


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


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


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


スマートフォンメニュー画面

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

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


Xperia SOV36(OS Ver.8.0.0)の場合


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


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


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


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


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

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


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



私物Xperiaホーム画面

アイコン画像は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からの流入、スマホでのブログ閲覧がかなり増えてきてますから、テンプレのレスポンシブ化は今後必須になりそうです。


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


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

Share

Comments 0

There are no comments yet.

Leave a reply