スマホのホーム画面用に、アイコンを作ってみました。

更新情報
06 /25 2015
このブログ、FC2に移転して、レイアウトかえたり、更新頻度あげたりして、最近ちょっとずつカウンターが増えてきているのがわかるので嬉しいばかりです。増えて行くアクセス解析が、励みになっています。

ここはiPhoneの話題もちょくちょく書いてるブログなので、iPhoneから見てくださっている方も多いのかなと。

th_622P6252588.jpg
PC表示でしょうか?

th_622P6252589.jpg
スマートフォン表示でしょうか。

最近のトレンド的には、「スマホにはスマホ画面」らしいですが、3GS時代からPC画面が見れることを魅力の1つにあげていた私には相変わらず馴染めていません。
自分自身iPhoneからPC表示で見ているので、PC画面での見易さにも気を配ってブログを作っています。
普段スマホ表示にしている方、よかったらPC表示に切り替えていただくと、色使い含めた私の意図した世界観をより楽しんでいただけるのかなぁと。よかったらためしに切り替えてみてください。



さてさて、iPhoneでの閲覧のはなしですが、iOSのSafariはホーム画面にお気に入りのサイトのリンクをアプリのように設置することができます。

iconcm6.png
アクションボタンからー


iconcm2.png
ホーム画面に設置します。こんな感じ。


iconcm4.jpg
で、追加すると


iconcm3.png
あっという間にホーム画面にリンクができました。
が、これだとアイコンは画面のキャプチャがそのままという。

気にならない方は気にならないでしょうが、
「ホーム画面の他のフラットなアイコンたちに並ぶと浮いちゃう!こんなの俺のホーム画面にはにあわねぇよ!!」
という方もいると思うので、アイコンをせっせと制作してみました。

homeicon04_2015062522304176b.jpg
こんなかんじ。
GIMPとExcelの図形作成を使ってサクッと。


設定の仕方は意外にも簡単で、ブログのHTMLの中に、1文書き足すだけ。
表示名を指定したいならさらに1文足すだけ。


こちらのブログ記事を参考にさせていただきました。HTMLの知識とか別にない私ですが、おかげで躓くことなく作業ができました。

iPhone、iPadのホーム画面にWebページを追加したときのアイコンとタイトルを変更する方法
-マコトのおもちゃ箱 ~ぼへぼへ自営業者の技術メモ~




iconcm5.jpg
設定反映後に同じ手順を踏むと、こんどは新しく設定したアイコンが現れました。
表示名も「tadatchiのおもちゃばこ」だと字数長すぎて省略されてしまうので「tadatchi blog」になるようにしてみました。

iconcm1.png
どうでしょうか!!←


iconcm7.jpg
iOSのAppStoreのアイコンと、iTunesStoreのアイコンと並んで違和感ないようにと狙って作成しました。
下に向かって暗くなるグラデーションもiOSのを参考にしました。


th_622P6252564.jpg
自分自身使っていなかった機能なので、完全自己満足ですが、よかったら設置してみてください。



追記(2015/6/25 23:20):記事更新時点で、スマートフォン表示でアイコンが正しく反映されていませんでした。というかスマートフォン表示での設定を忘れていました。慌てて修正したので、現在はスマートフォン表示、PC表示ともにアイコンが登場します。


追記(2015/6/26 00:01):そういえばと思ってAndroidでも確認してきました。

torqueicon3.png
AndroidはTORQUE G01 Android4.4.2のGoogleChromeで検証しました。

torqueicon.png
こんな感じ。

torqueicon2.png
iPhoneでは動作したブログ名指定は動作しないので、任意で好みの名称を指定してください。
ここではiPhoneのときと同じ「tadatchi blog」にしています。

torque2.png
じゃーん。

th_622P6252591.jpg
Androidでもホーム画面に指定したアイコンを表示させることができました。よかったよかった。

Androidはスマホ画面ではうまくいきませんでした。改良の余地はあるかもしれませんが、それはまたいずれ。
Sponsored Link


 

コメント

非公開コメント

Sponsored Link


にほんブログ村 コレクションブログ ミニカーへ Push7で購読する follow us in feedly Twitterボタン Instagramボタン

“86/BRZまとめ”

Sponsored Link