ページ内リンクの設定方法|サンプルテストクリニック|神楽坂にある秘密の診療所

〒105-0022
東京都港区海岸1-11-11 ニューピア竹芝ノースタワー
03-0000-0000
WEB予約 WEB問診 お問い合わせ
ヘッダー画像

ページ内リンクの設定方法

ページ内リンクの設定方法|サンプルテストクリニック|神楽坂にある秘密の診療所

ページ内リンクを活用しましょう

下記の編集ページには「コンテンツ」という、タイトル見出し付きの枠を増やせる項目があります。

  • 下層ページ
  • 料金表
  • 初診の方へ
  • 求人情報

コンテンツではページ内リンクのボタンを簡単に作成することができます。

ページ内リンクとは?

ページ内リンクとはその名のとおり、「同じページの中で指定された場所」に飛ぶためのリンクのことです。
1ページが長く、複数の見出しによる情報が含まれている内容の時に、ページにアクセスした人がスクロールして探さずとも、飛びたい内容へのボタンで移動ができればとても便利です。

今回ご用意している仕様では、コンテンツのタイトル(大見出し)部分にIDが設定できるようになっており、そのIDに対応するリンクを各管理画面内「ページ内リンク」項目にて設定することによって、ページの一番上あたりにリンクボタンが自動生成される仕様になっています。(画像赤枠部分参照)

設定方法は下記に説明していきます。

ページ内リンクの設定方法

1.リンクIDに名前をつけます。

まず、コンテンツ内の項目にある、リンクIDの欄を確認してください。既にこの項目には「link」という文字が初期値で入っていますが、必要に応じて変更しても問題ありません。但し、同じページ内でID名の重複が起きないようにご注意ください。
ここでは「link01」と名前を付けます。

2.ページ内リンク項目でリンクを設定

次に、この編集画面内に設置されている、「ページ内リンク」項目を見てください。枠が一つもない状態であれば、「行を追加」ボタンを押してください。
画像のような項目を確認できましたら、下記を設定します。
表示名…リンク用の自由な名称
リンクID…先ほどコンテンツで設定した内容と同じもの

※表示名は必ずしもコンテンツのタイトルと同じでなくてもいいですが、訪問者が混乱しないような名称にしましょう。
※リンクIDは大文字小文字、全角半角も完全一致である必要があります。ご注意ください。

3.画面で確認してみましょう

ここまで進みましたら、一度保存を行ってみて、実際の画面がどうなっているのかを確認してみましょう。
上手く設定されていれば、画像のようなボタンが追加されているはずです。
実際に押してみて、正しい位置に移動するか確認しておきましょう。動作しないようであれば、リンクIDの名称に誤りがある可能性が高いのでご確認ください。

 

ページ内リンク設置の注意事項

  • あまりたくさんのページ内リンクを設置しない
    →ボタンが増えるほど上部領域が長くなっていく仕様なので、ボタン領域がスクロールするほどになると利便性に影響が出ます。
  • 飛ばしたい項目とボタンに表示されているテキストの内容が乖離している
    →訪問者に伝わらないボタンの名称にならないようご注意ください。
  • リンクIDに記号を使用しない
    →記号を使用すると不具合の原因になりやすいため、使用しないでください。