記事ボックス毎にインデックスを付ける

  • # ホームページ制作について
  • Eye155
  • UserMASS
  • Calender2019/06/18

解決
済み

同一ページの記事ボックス毎にインデックスを付け、所望の記事ボックスに移動することはできるのでしょうか?


解決しました。
 higuita 様
ありがとうございました。本当はトップページの新着情報から直接飛ばしたかったのですが、でもページの最初の記事ボックス内に記事一覧表をもうけてそこから、別の記事ボックスに飛ぶようにできたので、少し遠回りかもしれませんができて良かったです。

 higuita様、またまたありがとうございました。トップページから直接飛ばすことができました。記事一覧表はそのままにしても直接飛ばせるので大分使いかっての良いHPらしくなってきました。

みんなの回答を見る

  • Userhiguita
  • Calender2019-06-19 16:55:10

下の方の記事とかに移動できるように設定できると、ホームページを見に来た方にも分かりやすくていいですよね。

HTMLの知識がちょっと必要になりますが、【a href】タグと【id】タグを設定するとできます。
ただし、記事の見出しにはHTMLタグを設定できないので、本文中へ移動するようになります。

例えば、1つのページに以下のような複数の記事がある構成の場合、

ページ:AAAサービス
記事1:AAAサービス内容
記事2:AAAサービス費用
記事3:AAAサービス受付時間

記事2の本文編集画面で「HTML」アイコンをクリックします。
一番上に

<span id="hiyo"></span>

と入力し、「OK」をクリックして、「上記の内容を設定」をクリックします。

次に記事1の本文編集画面で「HTML」アイコンをクリックします。
一番下に

<a href="#hiyo">費用はこちら</a>

と入力し、「OK」をクリックして、「上記の内容を設定」をクリックします。
(#の後に移動させたいidを入力すると、そのidに飛びます)

これで記事1の「費用はこちら」をクリックすると記事2の先頭にジャンプします。
※同じidを使用すると正常に動作しなくなるので、記事ごとにidを変えてください。

それか記事を一つにまとめてしまって、内部リンクを使うのもいいかもしれません。
上記の例で言えば、記事1~記事3をまとめて、

記事の見出し:AAAサービス詳細

として、以下のような感じで記事の本文をHTML編集画面から入力します。

--------------------------------------
<h3 id="naiyo">AAAサービス内容</h3>
AAAサービスの内容は○○○です。

<a href="#hiyo">●費用はこちら</a>
<a href="#jikan">●受付時間はこちら</a>

<h3 id="hiyo">AAAサービス費用</h3>
AAAサービスの費用は○○○です。

<a href="#naiyo">●内容詳細はこちら</a>
<a href="#jikan">●受付時間はこちら</a>

<h3 id="jikan">AAAサービス受付時間</h3>
AAAサービスの受付時間は○○○です。

<a href="#naiyo">●内容詳細はこちら</a>
<a href="#hiyo">●費用はこちら</a>

--------------------------------------

ページ内リンクについての詳細は以下のページが参考になると思います。

https://saruwakakun.com/html-css/reference/link_jump

MASSさんがやりたいこととちょっと違うかもしれませんが、参考になれば幸いです。

記事を編集する
  • Userhiguita
  • Calender2019-06-20 16:12:35

トップページの新着情報から直接飛ばしたかったんですね。
失礼しました。

もしかしたら、もうこの回答見てないかもしれませんが、前回記載した内容を利用すればできますよ。

手順としては、前回記載したようにidを設定して、そのidを含めたURLを最新情報のリンクに設定すれば可能です。

id設定後の手順としては

1.idを設定したページを開き、URLをコピーします。

例:https://www.●●●.com/cont2/5.html

2.とりあえずHPの管理画面から「トップページの編集」をクリックします

3.リンクを設定したい最新情報右側の「編集画面へ」をクリックします

4.「リンクURL」の欄に1でコピーしたURLを貼り付けます

5.貼り付けたURLの後に「#設定したid」を入力します

例:https://www.●●●.com/cont2/5.html#hiyo

6.「上記の内容で設定」をクリックします

これで最新情報から記事のidが設定されている部分に一気に飛びます。

記事一覧表を作成したとのことなので、そのままでも良さそうな気がしますが、参考になれば幸いです。

記事を編集する
次のページ