スマホにアイコン(ウェブクリップアイコン)を出す!

   

                  

                              

こんにちは。

アロマンシェス名古屋のHPをブックマークしてウェブクリップアイコンとして追加した時に味気ないブックマークアイコンではなく、ちょっとかっこよく表示させようと頑張りました。

 

Screenshot_

 

その設置に至るまでの過程を書いておこうかと思います。

 

①アイコンにしたい画像を作成する

これは好きな画像や、作成ツールを使ってオリジナルのアイコンを作成します。

参考サイト:CroudWorks

こちらのサイトでご自分にあったやり方を探してみてください!

私はバナーなど作るのを楽しんでおりますので自分でアイコンを作成してからリサイズしてくれる

 

makeappicon

 

コチラを使用させていただきました!

結果的に、大は小を兼ねるという事ですので、大き目のサイズで作っておけばOK!

後は勝手にリサイズしてくれる模様です

 

②設置したいサイトにhtmlを追加する

もうクライマックスです(早っ)

アイフォンの場合はルートディレクトリにアイコン画像をアップロードするだけで完了するようです。(htmlの書き加えは不要。)

僕はアンドロイドなのでアイフォンのことはよく分かりませんが・・・

 

アンドロイドで表示させるためには、下記のlink要素を表示させたいページの<head>~</head>内に書き加えましょう。

<link rel="apple-touch-icon" href="apple-touch-icon.png">

画像のファイル名(上記のapple-touch-icon.png)は、お好きな名前で大丈夫。

 

参考サイト:TAGindex

 

あと、アイフォンで表示させる場合の光沢のありなしなどを設定できるようですが、ここでは割愛します。

アイフォンを使わないので、有り無しがどう違うのかもよく分かりませんし・・・

参考サイト内に詳しく書いてあったので、もし光沢もこだわりたい人でしたらそちらで勉強してみてください

 

 

③実際に設置してみる

早速、実際に設置してみました。

 

設置する大前提として、アイコン表示させたいサイトをブックマーク保存しておいてください。

アンドロイド

ホーム画面を長押しすると下記のような画面になります。

Screenshot_2015-10-23-16-35-40

一番上のショートカットを選択して、次の画面ではブックマークを選択。(次の画面はスクリーンショットが出来ない・・・)

ブックマークしたサイトを選択すればはい出来上がり~!って確認できると思います

Screenshot_2015-10-23-16-36-45

できました

 

ちなみに、アイコンを設定していないサイトは右側のようになります。(機種によって違うアイコンかもしれません・・・。)

Screenshot_2015-10-26-12-57-13

 

※追記

どうも新しいタイプのアンドロイドは少々違うようですので書き加えておきます。

(もしかしたら機種ごとに設定の仕方が違うのかもしれません・・・)

エクスペリアSOL25の場合

ホーム画面長押しをしてアプリをタップ。

7653

 

 

 

 

そうするとこのような画面が出てきますので一番左端のショートカットをタップ。

 

7655

 

 

 

右の方にスライドさせるとブックマークがありますので、そこから希望のサイトを選ぶと出てきます

 

7654

 

できあがり~

 

7656

 

 

アイフォン

Safariでサイトを開き、下部中央の共有ボタンを押して「ホーム画面に追加」を選べばOK!

 

 

 

少しの事で、こんなにも違いますのでまだの人は是非やってみてください。

 

 

担当 : ウェブ担当他

趣味 : モノ作り・競馬

LDS designs


「名ばかりの」ウェブ担当ミツロックでございます。

アロマンシェスをご利用してくださるお客様が笑顔でいてくれればなぁと思います。

もちろん、スタッフもセラピストもです。


趣味以上、仕事未満であるアクセサリーも宣伝させてもらいます(笑)

アロマンシェスともども宜しくお願いします。

 - CUSTOM, ミツロック