こんにちは、解説ゾロです！
同一のページ内（同じタイトル記事）で、好きな場所へ飛ばすことができる「ページ内リンク」の「画像」から飛ばす方法をクラシックエディターでの解説します。
前回の記事では、主に文字から文字に飛ばす内容でしたが、今回は、画像を使って、画像から飛ばしたり、画像に飛ばしたりする場合の「ページ内リンク」の方法です。
WordPressで画像を使った「ページ内リンク」の「コード」の書き方
「画像」をクリックするとページ内の特定の場所へ飛んで行くようにするには、前回の記事でも解説しましたように、ここから飛ばす出発点「a href=”#○“」と、ここに飛んでくる着地点の「id=”○“」のセットが必要です。
「○」は、わかりやすい半角英数字でOKですので、ここでは「a01」とします。（a01って、ぜんぜんわかりやすくないですよね！笑、スミマセン。）それぞれの「コード」は、
- 出発点は、「a href=”#a01“」で、
- 着地点は、「id=”a01“」となります。
それでは、実際に画像に「コード」を書いていきますので「ここから飛ばす画像」をご用意ください。ここでは、私が超おすすめのケンジントンのスリムブレードというマウスのAmazon限定ホワイ版の画像で進めていきます。コレいいなぁ～！笑
WordPressで「画像」から「見出し」に飛ばす「ページ内リンク」
「ここが着地点です！」
飛びました・・・よね！笑。体験していただきましたので「コード」の書き方を解説していきます。
ここから飛ばしたい「画像」の表示ができましたら、WordPressのいつも記事を書いている「投稿を編集」の画面で通常は「ビジュアル」の画面になっていると思いますので、右隣の「コード」をクリックしてください。
すると「コード」の画面に変わりますので、その表示した画像の「コード」を探してください。頭に「img」という画像を表示するためのタグを目印にすると、探しやすいかもしれません。今回の解説用の画像は、下記のように書かれています。
WordPressで「画像」から「見出し」に飛ばす「コード」の書き方
このコードに、ここから飛ばす出発点のリンクコード「a href=”#a01“」を書いてみますと、
となります。
これで、飛ばす準備はできました。
次は、飛んで行った先の着地点が必要です。着地点は、下記のように、段落の「h2」の見出しの「ここが着地点です！」という文字列にしていますので「コード」を「h2」で囲っています。
「ここが着地点です！」のリンク前の「コード」を探すと、下記のように書かれています。
このコードに、ここに飛んでの着地点のコード、 id=”a01″ を書いてみますと、
今は「見出し（h）2」に着地点を設定していますので「h2」で囲っていますが、もちろん、見出しの3でも4でも、又、<p> タグ、<div>タグなどにも「ページ内リンク」の設定が可能です
プレビュー画面に変更し、おすすめのマウスの「詳しい内容は画像をクリック」の画像をクリックしますと、見出し2の「ここが着地点です！」に、一瞬で飛びます。
WordPressで「画像」から「画像」に飛ばす「ページ内リンク」
⇩次は、画像から飛ばして、画像に着地させる方法です。ここでも一応、体験版です。下記の画像をクリックしますと、少し下にあります「エキスパートマウス」の画像に飛んで行きますので、クリックしてみてくださいませ。⇩
ハイ、飛びました！
では、画像から飛ばして、画像に飛ばすリンクコードの書き方を解説していきますが、
ここで気を付けることが1つあります。
それは、同じページ（同じタイトルの記事）内で「ページ内リンク」を複数設定する場合は、IDである赤い○の部分は他のIDと重複しないように、それぞれを変える必要があります。
- 「a href=”#○“」
- 「id=”○“」
先ほどは、IDの「○」を「a01」にしましたので、重複しないように今度のIDは「a02」にしてみます。
ここから飛ぶ出発点の画像は先ほどの画像に「スリムブレード ホワイト」という違うタイトルを付けて使っています。リンクを設定する前が下記のコードです。
WordPressで「画像」から「画像」に飛ばす「コード」の書き方
では、このコードに、ここから飛ばす出発点のコードの <a href=”#a02″> を書いてみますと、
こちらも、プレビュー画面に変更し画像をクリックしますと、画像から画像へと一瞬で飛びます。
WordPressのページ内リンクのジャンプをシュルシュル
一瞬で飛ばさないで、少しゆっくりとシュルシュル移動させるには、スタイルシートに下記コードを書けばOKです。前回の記事で詳しく解説していますので、よろしければご覧くださいませ。
html {
scroll-behavior: smooth;
}
上記のリンクは、同じ「解説ゾロ」というサイト内で別の解説記事の任意の場所に飛ばすリンクです。
通常の「内部リンク」は記事の頭に飛んで行きますが、この方法ですと必要な場所へダイレクトに飛んでくれますので、閲覧者様にとってのユーザビリティが高くなります。この方法も簡単ですので、次？の記事で解説いたしますので、少々お待ちくださいませ。笑
まとめ
画像を使った場合の「ページ内リンク」で「画像」から「文字」への「ページ内リンク」や「画像」から「画像」への「ページ内リンク」の「コード」や「書き方」の解説をいたしました。
「文字」から「文字」への「ページ内リンク」の書き方と、ちょっとだけ違いますので、わかりやすいかなと思います。
次回の予定は、同じサイト内の別の記事の途中に飛ばすリンクを予定しております。
最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした！
関連記事：リンクの貼り方｜WordPressで好きな所へ飛ばせる方法
関連記事：WordPress「ページ内リンク」で好きな場所へ飛ばす方法
関連記事：「Gmail」本文中のURLに、飛ばせるリンク設定が簡単！
関連記事：WordPress ウィジェットで記事一覧のサイトマップへのリンクを表示
