リンクの設定
Webサイト内の別ページや外部サイトへ移動するリンクは、エディタ上で簡単に設定ができます。この記事ではリンクの種類と設定手順をご紹介します。
別ページへのリンク
アンカーリンク
動的ページへのリンク
外部サイトへのリンク
モーダル開閉リンク
現在のページシェア用のリンク
プロパティを使ったリンク
リンクの種類
1. 別ページへのリンク
プロジェクト内の別ページへのリンクを設定するには、リンク先のページをリストから選択します。
2. アンカーリンク（ページ内リンク）
ページ内の特定箇所に直接移動するためのアンカーリンクの設定も可能です。設定する前に、リンク先となるボックスにIDを設定しておく必要があります。
アンカーリンクの種類
アンカーリンクには種類があります。
リンクの種類（例） | 移動方法 | 使用用途 |
#id | IDが設定された同一ページ内でのみ使用可能です。 | 同一ページからの移動に最適です。 |
/page#id | IDが設定されたページ、および他のページからID設定箇所に移動できます。 | ヘッダーなどでの利用に適しています。 |
3. 動的ページへのリンク
CMSで管理する記事などを表示する動的ページがある場合は、リンク先として選択できます。
設定手順の詳細は、CMS記事詳細ページへのリンク設定手順をご覧ください。
4. 外部サイトへのリンク
外部のWebサイトにリンクさせる場合は、直接URLを入力します。
5. モーダルの開閉リンク
モーダルページを選択すると、「モーダルを開く」リンクが作成できます。
モーダルページをエディタで開いている状態では[モーダルを閉じる]が選択できるようになります。
詳しくは、モーダルへのリンク設定方法をご覧ください。
6. 現在のページシェア用のリンク
リンク設定欄の[+]をクリックすると、プロパティが選択できます。
$urlは現在のページのURLを表しており、現在のページをシェアするときのリンクなどで活用いただけます。後からそのページのパスが変わったとしても、変数箇所は都度更新する必要がありません。
詳しくは、「この記事をシェアする」ボタンの設置方法をご覧ください。
7. プロパティを使ったリンク設定
リストのプロパティやCMSプロパティを使って、リストアイテムやCMSリスト内のアイテムにリンクを設定することができます。
リンクの設定方法
リンクの設定は、下記方法で行えます。
リンクを設定したいボックスを選択します。
エディタ右側の設定パネルを開きます。
[+]をクリックして、ページを選択するか外部リンクを直接入力します。
さらに[＋]をクリックするとプロパティを追加することもできます。
ライブプレビューURLを開き、リンク設定の動作確認をします。
公開サイトへ反映するには、公開パネルからサイトを更新します。
リンク設定時のオプション
新規タブで開く設定
リンクを設定後、[新規タブで開く]を有効にすると、閲覧中のページとは別のタブでリンク先ページを開く設定ができます。
非公開設定ページの選択
非公開設定済みのページは、画像のようにグレーアウトの上で非公開ページアイコンが表示されます。
リンク先ページとして設定は可能ですが、そのままの状態ではライブプレビューや公開サイト上で正しくリンクとして動作しないためご注意ください。
また、リンク先として設定済みのページを後から非公開設定に切り替えた場合でも、リンクの設定は残りますが、そのままの状態ではライブプレビューや公開サイト上で正しくリンクとして動作しません。
リンクの設定解除方法
リンクが設定されたボックスを選択します。
エディタ右側の設定パネルを開きます。
リンク設定に表示される[-]をクリックします。
公開サイトへ反映するには、公開パネルからサイトを更新します。
link anchor link button modal
ボタン テキストリンク ページ内リンク