作業時間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
[ 認証画像を変える ]

関連記事

KPI・KSF・KGIをすっごく簡単に解説
あなたのアナリティクス 正確なデータとれていないかも
もしかしてWebの書き出し、まだpng…!?
SEOの時代は終わり?店舗型に向いていると思うweb集客
スマホ投稿にも使えるWYSIWYGエディッタsummernote
「ブログを書こう」って言う業者おおすぎ

人気記事

分かりやすい地図をデザインする為に押さえておきたい4つのポイント
夏っぽい色のバナーデザイン
l.instagram.com / referral ってなんだろう
CSSの背景画像でスライドショーを実装【jQuery】
結婚式の二次会やパーティーで使える◎可愛いスピードビンゴ作りました!
雨の野外フェスで用意しておきたいもの



ブログ

作業時間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

[ 認証画像を変える ]


関連記事

アナリティクスデータ無期限保存期間を5月25日まで
もしかしてWebの書き出し、まだpng…!?
CSSの背景画像でスライドショーを実装【jQuery】
たった3分で実装出来るJqueryで簡単スマホ用メニュー実装!
1分で出来る簡単にランダムバナーを設置する方法「jQuery」
l.instagram.com / referral ってなんだろう

人気記事

分かりやすい地図をデザインする為に押さえておきたい4つのポイント
夏っぽい色のバナーデザイン
l.instagram.com / referral ってなんだろう
CSSの背景画像でスライドショーを実装【jQuery】
結婚式の二次会やパーティーで使える◎可愛いスピードビンゴ作りました!
雨の野外フェスで用意しておきたいもの

ブログ