サービスの一覧記事などの冒頭の部分で
こういう↓目次を見かけたことはないですか？
※このサンプルはわたしのサービス一覧記事です
この目次の下にサービスのご案内が続いているのですが
自分が興味を持っているサービスが一番上にあるとは限りません。
そ こ で！目次を設置しておくと
興味のあるサービスのタイトルをクリックするだけで
サービスのトップの位置に移動してくれるのです！
まぁなんて便利！！！
※なぜか移動先のトップの位置が若干ずれる...
実際にブログを徘徊していても
設置している方が増えてきている感じがしています。
※ヤヨイ調べ
増えてきている、のですが...
同時に「別ウィンドウで開く」の意味を持つ
「target="_blank"」が入ったままになってることが多いこと！！！
HTML表示のときにこの赤く囲んだタグのことです↓
別ウィンドウ開くんだったら
目次設置してる意味ないよー(；ω；)
Twitterでもつぶやいてみました↓
フジムラヤヨイ｜ブログ管理・アメブロサポート@fujimurayayoi
最近、アメブロでidタグを使って目次作る人が増えてきてる感じがする。 idタグは「記事内のリンク先に飛ばすことが目的」になるので、別ウィンドウで開くtarget="_blank"のタグは削除することを激しくオススメします。 そもそ… https://t.co/FMamakfniY
2023年03月13日 21:36
説明がわかりにくいので
もう少し詳しく書いてみたいと思います！！
「目次のタイトルをクリックするだけで
サービスのトップに移動してくれる」
というのは
「idタグ」というのを使って
「ページ内リンクを作成」することで可能になります。
「ページ内リンクを作成」する
「idタグ」を設置する目的は
「記事内の目的の位置にスムーズに移動できること」です。
なので、目次を設置するのであれば
同じ記事の中で移動できないと意味がないのです...。
一度体験していただけるように下記に設置しています。
サービスタイトルをクリックすると
かっこ内の動作がおきますので
実際にどう違うのか体験してみてください！
※アメブロアプリではidタグは機能しないため、WEBでアメブロを開いてお試しください。
目次
と、この真下にリンク先があっても分かりにくいので
ここでidタグの設置方法について書いてみます。
HTML画面を触ることに抵抗のない方でしたら
方法さえわかれば設置するのは（おそらく）簡単かと。
idタグを使って目次を設置する方法
①通常のサービス一覧を作成する。
サービス一覧のサンプル↓
②記事のトップに目次を作成する。
目次のサンプル↓
③サービス一覧にリンクを貼る。
このとき貼るURLは「ページ内リンク」なのでこの記事のURLをリンクします。
④HTML画面に切り替えて、上から順にタイトルにidタグを割り振っていく。
※詳しい手順と記述内容は下記参考
この記事のこの部分をHTML画面に切り替えると↓
この記述の部分があります↓
この記述の部分の一番初めにある
<p>（赤い囲み）の部分にidタグを追加します↓
ピンクが追加した部分→ <p id="サービス2">（pとidの間に半角スペース）
idタグ追加後の記述はこちら↓
引き続きサービス一覧にも同様にidタグを追加します。
⑤目次のサービスタイトルにリンクを追加していきます。
このとき貼るURLは「ページ内リンク」なのでこの記事のURLをリンクします。
＜サービス１＞
＜サービス２＞
最後の「html」の後ろに「#サービス2」を追記します。
「サービス2」は④で追加したidタグの名前です。
＜サービス一覧＞
最後の「html」の後ろに「#サービス一覧」を追記します。
「サービス2」は④で追加したidタグの名前です。
⑥HTML画面に切り替えて、サービス2とサービス一覧の「target="_blank"」を削除します。
※詳しい手順と記述内容は下記参考
この部分をHTML画面に切り替えると↓
この記述の部分があります↓
この記述の部分のtarget="_blank"（赤い囲み２箇所）の部分を削除↓
削除後がこちら↓
以上で完成です！
では目次に戻って実際に試してみてください！
※やっぱり移動先のトップの位置が若干ずれる...
サービス２
サービス一覧
いかがでしたでしょうか？
ちょっと面倒かもしれないですが
サービス一覧記事など長くなりがちな記事は
目次があると読者さまやお客さまに優しいかな〜？と
個人的には思います。
設置をチャレンジしてみたけど難しい！
パソコンが苦手で複雑すぎる！
設置したいけど忙しくてできない！
そんな方は代行いたしますので
ぜひお気軽にご相談ください！
現在ご提供中のサービス一覧｜ご提供中のサービス一覧
お客様のご感想｜ご感想リンク集
よくあるご質問｜お仕事Q&A
制作実績｜デザインメニュー ／アメブロ運用サポート
ご相談・お問合せ｜お問合わせフォーム
こんなことできる？など、お気軽にご相談ください
各種SNS｜
Facebook / 
Twitter / 
Instagram
お気軽に友達申請＆フォローお待ちしてます