Appleのタッチ アイコンを作成して、iOSユーザーがデバイスのホーム画面にサイトをブックマークできるようにします。

Appleのタッチ アイコンを作成すると、訪問者はiOSデバイス (iPhone、iPad、iPod) でサイトをブックマークすることができます。ブックマークは、ホーム画面上の他のアプリまたはブックマークと並んだアイコン インラインになります。

これらのアイコンに関するAppleの画像ガイドラインを確認するには、Appleの画像に関するガイドライン ページをご覧ください。

このガイドのソリューションには、コード挿入が含まれます。これは、BusinessとCommerceプランで利用できるプレミアム機能です。

ステップ1 - アイコン画像をアップロードする

サイトのアイコンを作成します。アイコンは、.pngファイルで透明ではないものを必ずご使用ください。外観に一貫性を持たせるために、ファビコンやサイト ロゴと同じデザインを使用することをおすすめします。

画像を作成したら、サイト上の任意のレイアウト ページのページ エディターを開き、リンクとして機能するテキストを入力します。テキストを強調表示し、テキスト ツールバーのリンク アイコンをクリックします。

リンク エディターが開きます。[ファイル] タブをクリックし、[ファイルを追加] をクリックしてタッチアイコンの画像ファイルをアップロードします。 [リンクを追加] をクリックしてリンクを挿入します。

ステップ2 - アイコン画像のURLを取得する

リンクされたテキストを再度クリックし、ファイルのURLをコピーします。ファイルのURLは次のような形式になります。

/s/file-name.extension

ステップ3 - コード挿入を追加する

[コード挿入] パネルを開きます。

以下のコードをコピーして、ヘッダーのコード挿入フィールドに貼り付けます。

<link rel="apple-touch-icon" href="/s/file-name.extension">

/s/file-name.extensionを、アイコン ファイル用にコピーしたURLに置き換えます。

[保存] をクリックします。

ステップ4 - タッチ アイコンを表示する

iOSデバイスを使用してサイトにアクセスします。サイトをホーム画面に追加するには、[共有] オプションを使用します。表示の例を以下に示します。

備考: このコードベースのカスタマイズは、Squarespaceのサポート範囲外です。コード挿入にコードを追加する前にコーディングの知識を習得しておくことを強くおすすめします。当社は、このトピックに関してこれ以上サポートを提供できかねますが、次のように、お客様が問題解決のために参照できるリソースが多数あります。

• Appleのタッチ アイコンに関するヘルプについては、Apple開発者サイトをご覧ください。
• 当社のお客様と開発者のフォーラムであるSquarespace Forumをご覧ください。
• カスタム コードを追加するためのベスト プラクティスについて学びましょう。
• 「コードベースのカスタマイズに関する基本ガイド」をお読みください。
• Squarespace Expertを雇い、ご自分のサイト用のカスタム コードの作成を依頼しましょう。