この記事では、リンクの基本設定手順と代表的なリンク種類についてまとめました。
ボックスにリンクを設定する
リンクが設定されたボックスには、ボックスの右上に遷移先が表示されます。
Tips：テキストの一部だけリンク色を変えたい場合は、リッチテキスト内で、文字色や文字背景色を部分的に変更する方法を参照してください。
リンク先の開き方（新規タブ・同一タブ）を指定する
リンク先に遷移時に、新規タブまたは同一タブどちらの方法で開くかを指定します。
以下のリンク設定時にのみ、指定が可能です。
外部サイトへのリンク
プロジェクト内の別ページへのリンク
リンク設定欄下部の、[新規タブで開く]でトグルのオン・オフ切り替えて設定します。
公開サイトへ反映する際は、公開パネルからサイトの更新をしてください。
リンク設定を解除する
リンクが設定されたボックスを選択します。
右パネルの[設定]タブ内のリンクの設定箇所で、[リンクを削除]をクリックします。
公開サイトへ反映する際は、公開パネルからサイト更新をしてください。
ここからは、６種類のリンク別に具体的な設定手順を紹介します。
1. 外部サイトへのリンクを設定する
外部のWebサイトへのリンクを設定します。
右パネルの[設定]タブ内のリンクの設定箇所に、直接URLを入力してください。
注意：リストで外部サイトへのリンクを設定する
リストの各アイテムに外部サイトへのリンクを設定する場合には、リンク先URLをプロパティとして登録後、ボックスと紐付け設定をします。
静的に機能するリスト（通常リスト）では、リストプロパティのURLプロパティ、動的に機能するCMSリストでは、CMSプロパティのテキストプロパティとして登録してください。
詳細は、それぞれ以下のヘルプ記事を参照してください。
リンク先の開き方はリスト内のすべてのアイテムで共通です。
2. プロジェクト内の別ページへのリンクを設定する
プロジェクト内の別ページへのリンクの設定は、右パネルの[設定]タブ内のリンクの設定箇所で、リンク先ページをリストから選択します。
遷移先のページが非公開設定されている場合
非公開設定済みのページはグレーアウトされ、右側に非公開マークが表示されます。
非公開ページもリンク先として設定できますが、公開されていない場合はライブプレビューや公開サイトでリンクが動作しません。公開ページを後から非公開にした場合も同様です。
3. プロジェクト内の動的ページへのリンクを設定する
他の別ページへのリンクと同様に、右パネルの[設定]タブ > [リンク]欄をクリックして、リンク先ページをリストから選択します。
動的ページは、リンク先候補として二つの同名ページがリストされます。リンク元のボックスにより、指定すべきページが異なるため注意が必要です。
リンク元が動的リストの場合
動的リストからアイテムごとにリンクする設定をする場合は、リンク先候補のページリストに表示される対象の動的ページのうち、リンクの末尾が:slug ではないページを選びます。
設定手順の詳細は、CMSリスト：詳細ページにリンクする記事一覧を作成するを参照してください。
リンク元が静的なボックスの場合
静的なボックスにCMSを接続した動的ページをリンクする場合には、動的ページに接続しているCMSアイテムのうち、どのアイテムへのリンクを設定するか選ぶ必要があります。
以下の手順で設定します。
右パネルの[設定]タブ > [リンク]欄をクリックします。
[リンク]欄に対象の動的ページ名を入力し、検索します。
動的ページが二つ表示されるので、リンクの末尾が
:slugのページを選びます。
[CMSアイテム]リストから、リンクしたい接続コンテンツを選びます。
4. アンカーリンク（ページ内リンク）を設定する
ページ内の特定箇所へ移動するリンクを設定できます。リンク先となるボックスにIDを設定しておくと、リンク設定時に選択肢として表示されます。
5. モーダルの開閉リンクを設定する
モーダルページが作成されたプロジェクトでは、他のページ上のボックスにリンクを設定する際、選択肢として作成済みモーダルページが表示されます。
モーダルページ上のボックスには、「モーダルを閉じる」選択肢が表示されます。
詳しくは、モーダルへのリンク設定方法をご覧ください。
6. ページのSNSシェア用リンクを設定する（URL変数）
リンク設定欄の「＋」をクリックすると、$urlが表示され、リンク内にそのページのURLを挿入できます。$urlをSNSのシェア用リンクと組み合わせると、「この記事をシェアする」ボタンを設置できます。
また、ページのURLを後から変更しても、$urlを使っているリンクは自動的に最新URLに更新されるため、手動で修正する必要はありません。
詳しくは、「この記事をシェアする」ボタンの設置方法をご覧ください。
link anchor link button modal rink rinku
ボタン テキストリンク ページ内リンク ハイパーリンク