各種リンクの設定方法

Studioのリンク設定では、以下6種類のリンクを設定できます。

この記事では、リンクの基本設定手順と代表的なリンク種類についてまとめています。

リンクが設定されたボックスには、ボックスの右上に遷移先が表示されます。

以下のリンクを設定した際は、リンク遷移時の開き方（新規タブまたは同一タブ）を指定できます。

リンク設定欄下部の、[新規タブで開く]の有効・無効を切り替えて設定してください。

公開サイトへ反映する際は、公開パネルからサイト更新をしてください。

ここからは、６種類のリンク別に具体的な設定手順を紹介します。

外部のWebサイトへのリンクを設定します。

右パネルの[設定]タブ内のリンクの設定箇所に、直接URLを入力してください。

プロジェクト内の別ページへのリンクの設定は、右パネルの[設定]タブ内のリンクの設定箇所で、リンク先ページをリストから選択します。

Studio CMSで管理する記事などのコンテンツを反映した動的ページも、リンク先として選択できます。詳細な設定手順は、CMS記事詳細ページへのリンク設定手順をご覧ください。

遷移先のページが非公開設定されている場合

非公開設定済みのページはグレーアウトされ、右側に非公開マークが表示されます。

非公開ページもリンク先として設定できますが、公開されていない場合はライブプレビューや公開サイトでリンクが動作しません。公開ページを後から非公開にした場合も同様です。

ページ内の特定箇所へ移動するリンクを設定できます。リンク先となるボックスにIDを設定しておくと、リンク設定時に選択肢として表示されます。

モーダルページが作成されたプロジェクトでは、他のページ上のボックスにリンクを設定する際、選択肢として作成済みモーダルページが表示されます。

モーダルページ上のボックスには、「モーダルを閉じる」選択肢が表示されます。

詳しくは、モーダルへのリンク設定方法をご覧ください。

リンク設定欄の「＋」をクリックすると、$urlが表示され、リンク内にそのページのURLを挿入できます。$urlをSNSのシェア用リンクと組み合わせると、「この記事をシェアする」ボタンを設置できます。

また、ページのURLを後から変更しても、$urlを使っているリンクは自動的に最新URLに更新されるため、手動で修正する必要はありません。

詳しくは、「この記事をシェアする」ボタンの設置方法をご覧ください。

リストのアイテムごとに異なるURLを設定する場合は、リストのプロパティを活用してください。 ※プロパティを使わず、右パネルの[設定]タブからリストアイテムにリンクを設定すると、リスト内の全アイテムに共通して同一のリンクが設定されてしまいます。

詳しい設定方法は、以下を参考にしてください。

link anchor link button modal

ボタン テキストリンク ページ内リンク