モバイルSafariでウェブサイトのホーム画面アイコンをより美しく作成する[iOSのヒント]

モバイルSafariでウェブサイトのホーム画面アイコンをより美しく作成する[iOSのヒント]

  • Oligur
  • 0
  • vyzf
モバイルSafariでウェブサイトのホーム画面アイコンをより美しく作成する[iOSのヒント]
画像_0262

モバイル Safari でホーム画面に Web サイトを追加しようとしたときに、ごちゃごちゃして判別不能な状態になっていることに気づいたことはありませんか?

ほとんどのサイトが iOS のホーム画面のブックマーク用に特別なアイコンを作成する方法を習得したため、これはもうあまり発生しませんが、カスタム アイコンがないサイトに時々遭遇します。

そんなとき、ホーム画面のアイコンの見栄えをちょっと良くする簡単な方法があります。

ウェブサイトのコードにカスタムアイコンが組み込まれていないサイトの場合、Safariはウェブページのスクリーンショットを撮り、「ホーム画面に共有」を押した際にそのスクリーンショットをアイコンに貼り付けるという仕組みです。これでは、かなり見苦しいアイコンになってしまいます。

この問題を解決するには、まずiPadでピンチアウトジェスチャーを使ってウェブページを拡大し、アイコンスペースを埋めたいものをSafariの画面中央に持ってくることです。こうすることで、Safariがスクリーンショットを撮る際に、拡大された部分だけがキャプチャされるので、実際のウェブサイトから小さな画像を切り取ってホーム画面のアイコンにすることができます。

例えば上のスクリーンショットでは、Pugs.com にアクセスして共有ボタンを押しました。すると、Safari が表示したアイコンはウェブページ全体の縮小画像でした。共有をキャンセルし、ページ中央のパグの写真にズームインして、もう一度共有ボタンを押しました。すると、アイコンはつまらないウェブページの画像ではなく、ズームインされたパグの画像(とても可愛いパグでした)になりました。

iMore の皆さんからの素晴らしいヒントですよね?

出典: iMore