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

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

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

このガイドには、コア、プラス、アドバンス、ビジネス、コマース ベーシック、コマース アドバンスの各プランで利用できるコード挿入の説明が含まれています。詳細については、「適切なSquarespaceプランを選択する」をご覧ください。

ステップ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を雇い、ご自分のサイト用のカスタム コードの作成を依頼しましょう。