作業時間3分!超簡単にWEBクリップアイコンを実装だ![webの話] | おむすび

作業時間3分!超簡単にWEBクリップアイコンを実装だ![webの話] | おむすび

作業時間3分!超簡単にWEBクリップアイコンを実装だ!

webの話


こんにちは18号です。

スマホの画面にアイコンっぽくwebサイトをおいて置けるやつ

webクリップアイコン

めっちゃ簡単に設定できるので是非やってみて下さい。

まずはクリップ方法から

 

iPhone編

登録したいサイトをsafariで開いて下さい。

(残念ながらsafariからでないと出来ません…)

 

画面一番下、真ん中にある□から↑が飛び出したアイコンをクリック!

 

 

 

するとこんな感じのアイコンが出てきます。

その中の「ホーム画面に追加」を押してみましょう!

 

 

そしてホーム画面に戻ってみると…!

 

 

わーい!

追加されてる〜!という感じです。簡単!

 

 

Andriod編

Androidの実機がないので、詳しい説明ができませんが…

 

まずはブラウザでサイトをブックマーク。

それからホーム画面の何もないところを長押しすると「ホーム画面に追加」というメニューが出るので「ショートカット」⇒「ブックマーク」でサイトを選らんで下さい。

 

 


 

 

では、本題のwebクリップアイコンの実装へ〜

 

アイコンの作成

アイコンのサイズはだいたいどんなもんでも大丈夫です。

まぁ大きすぎても負荷がかかるだけなので

145pxの正方形を推奨しておきます!

大きすぎても、小さすぎても、拡大縮小してくれます。

 

おむすびのアイコンはこんなのにしました。

超シンプル!

 

そしてこれをpngで書き出します。

 

名称は「apple-touch-icon.png​」にしましょう!

 

 

★実装★

名称を変更したアイコンをサーバに上げます。

トップページのindexとかを置いている、最上階層(伝わるかな…?favicon置いてるところと同じ!)で大丈夫です。

 

はい!これで完了!!超カンタン!

スマホでチェックしてみましょー

 

一度ホーム画面のクリップしたアイコンからアクセスして、

再度見てみると!

 

わーい!

おむすびになりました!

 

 

 

ちょっと自己満感はありますが…

よく見るサイトだし、クリップしとこう…って時にちゃんとアイコンが設定されていると

なんとなく嬉しいもんです。

 

まだやってなかった!って方はぜひwebクリップアイコンの設定を◎



3年半ほど制作会社で働いたのち、おむすびを始めました。デザインやマーケティングなどを担当しております。人見知りですが、めちゃくちゃアウトドア派です。おもしろい、役に立つ、使い易い、そんな感じのサービスを山盛り作っていきたいと思っております。 おむすび!



更新日:2016-06-23

コメントを投稿する
投稿名
コメント内容
画像認証 CAPTCHA Image
[ 認証画像を変える ]

関連記事

(direct) / (none) が急に増えた!
あなたのアナリティクス 正確なデータとれていないかも
CSSの背景画像でスライドショーを実装【jQuery】
アナリティクスを登録する際に絶対しておきたい3つのこと
自分で出来る!MEO(ローカルSEO)でやっておくべきこと6つ
他社サイトのアクセス数などが分かるサービス

人気記事

分かりやすい地図をデザインする為に押さえておきたい4つのポイント
CSSの背景画像でスライドショーを実装【jQuery】
夏っぽい色のバナーデザイン
市立吹田サッカースタジアム観戦の感想
TBSラジオクラウドの保存方法
(direct) / (none) が急に増えた!



ブログ

作業時間3分!超簡単にWEBクリップアイコンを実装だ!

webの話




こんにちは18号です。

スマホの画面にアイコンっぽくwebサイトをおいて置けるやつ

webクリップアイコン

めっちゃ簡単に設定できるので是非やってみて下さい。

まずはクリップ方法から

 

iPhone編

登録したいサイトをsafariで開いて下さい。

(残念ながらsafariからでないと出来ません…)

 

画面一番下、真ん中にある□から↑が飛び出したアイコンをクリック!

 

 

 

するとこんな感じのアイコンが出てきます。

その中の「ホーム画面に追加」を押してみましょう!

 

 

そしてホーム画面に戻ってみると…!

 

 

わーい!

追加されてる〜!という感じです。簡単!

 

 

Andriod編

Androidの実機がないので、詳しい説明ができませんが…

 

まずはブラウザでサイトをブックマーク。

それからホーム画面の何もないところを長押しすると「ホーム画面に追加」というメニューが出るので「ショートカット」⇒「ブックマーク」でサイトを選らんで下さい。

 

 


 

 

では、本題のwebクリップアイコンの実装へ〜

 

アイコンの作成

アイコンのサイズはだいたいどんなもんでも大丈夫です。

まぁ大きすぎても負荷がかかるだけなので

145pxの正方形を推奨しておきます!

大きすぎても、小さすぎても、拡大縮小してくれます。

 

おむすびのアイコンはこんなのにしました。

超シンプル!

 

そしてこれをpngで書き出します。

 

名称は「apple-touch-icon.png​」にしましょう!

 

 

★実装★

名称を変更したアイコンをサーバに上げます。

トップページのindexとかを置いている、最上階層(伝わるかな…?favicon置いてるところと同じ!)で大丈夫です。

 

はい!これで完了!!超カンタン!

スマホでチェックしてみましょー

 

一度ホーム画面のクリップしたアイコンからアクセスして、

再度見てみると!

 

わーい!

おむすびになりました!

 

 

 

ちょっと自己満感はありますが…

よく見るサイトだし、クリップしとこう…って時にちゃんとアイコンが設定されていると

なんとなく嬉しいもんです。

 

まだやってなかった!って方はぜひwebクリップアイコンの設定を◎



3年半ほど制作会社で働いたのち、おむすびを始めました。デザインやマーケティングなどを担当しております。人見知りですが、めちゃくちゃアウトドア派です。おもしろい、役に立つ、使い易い、そんな感じのサービスを山盛り作っていきたいと思っております。 おむすび!



更新日:2016-06-23
コメントを投稿する
投稿名
コメント
内容
画像認証 CAPTCHA Image

[ 認証画像を変える ]


関連記事

AJAXで簡単にドラッグ&ドロップで順番を変更する方法
あなたのアナリティクス 正確なデータとれていないかも
情報量が多いページから一瞬で知りたい情報を見つける方法
アナリティクスで電話番号タップをコンバージョン計測する方法
(direct) / (none) が急に増えた!
SEOはシンプルに考えるべき!絶対外せない重要な事3つ!


人気記事

分かりやすい地図をデザインする為に押さえておきたい4つのポイント
CSSの背景画像でスライドショーを実装【jQuery】
夏っぽい色のバナーデザイン
市立吹田サッカースタジアム観戦の感想
TBSラジオクラウドの保存方法
(direct) / (none) が急に増えた!

ブログ