毎日、Twitterで日々の成果や頑張りをツイートしてします!

【WordPress初心者】ページ記事内リンクの作成方法を解説!

アイキャッチ画像

みなさん、お疲れ様です!カズトンです!

ブログ記事を書いていると、このリンクから、記事内のある見出しへジャンプさせたいなぁって思ったことないですか?

どういうことかといいますと、次の画像みたいなことです!

このリンクのことを、「ページ(記事)内リンク」と言います!

自分もこの「ページ内リンク」を作りたいと思い、ネットで調べたのですが「自分のテーマとは合わず」に苦労しました汗

ですので、今回はWordPressのテーマが違っても「ページ内部リンク」が作れるように徹底的に解説していきたいと思います!

最後に実際にWordPressの画面の画像を使って、一緒に2つほど内部リンクを作って見たいと思います!自分が使っている「stork19」のテーマを利用しているので、他のテーマの人は、わかりずらいと思います。

ですが、テーマに関係なく「ページ内部リンク」を作成するための手順を説明しますので読んで参考にして頑張って下さい!

また今回の記事は、ブログやWordPress初心者の方でもスムーズにできるように画像をたくさん使っていますので、ぜひ読んでみて下さい!

今回の記事は、「WordPressでページ記事内リンクの作成ガイド」です!

今回の記事は、こんな人におすすめ!
  • ページ内リンクの作り方を詳しく知りたい人
  • WordPress初心者で操作がイマイチわかっていない人

では、スタート!!

その前に、今回利用するWordPressのテーマ「Stork19」を紹介します!

本編はこちらから!

今回利用するWordPressのテーマ「Stork19」

本編の前に、少し「Stork19」というWordPressのテーマを紹介させてください!

まずは、このサイトのトップページを見て下さい!

WordPress初心者の自分でも、ここまでのデザインをたった2日で作り上げることができました!

この「Stork19」と写真や画像を編集するツール「Canva」だけでこのクオリティ!

「Stork19」は難しいカスタマイズをしなくても、オシャレに!そして、ブログに特化したデザインとなっています!

これは間違いなくおすすめのテーマです!

また、このサイトのロゴやTop画像はすべて「Canva」で作りました!

無料でもすごいクオリティのものが作れますし、無料トライアルで有料版を利用することでロゴなどの背景を透明化させる機能まであります!

ぜひ、使ってみて下さい!詳しく説明している記事を読んでみては??笑

アイキャッチ画像

紹介失礼しました!

では、本編です!!

ページ内リンクとは

ページ内リンクとは、なんなのでしょうか。

冒頭で少しお話をしたと思いますが、記事の中にあるリンクを押すと、記事内の違う場所へジャンブできるものです!

簡単に言いますと、「クリックすると記事内の好きな場所まで、スクロール(移動)してくれるリンク」です!

作成するための知識を身につけよう!

では、「ページ内リンク」を作成するためには、なにをする必要があるのでしょうか!

手順は、たった2つです!

以下の手順を見て下さい!

  1. クリックしたあとにジャンプされる場所を指定する。(ゴールを決める。)
  2. 実際にクリックしたら、ジャンプされるリンクに①を指定する。

まずは、ゴール地点を決めます!

どこまで移動してほしいのかを決めることから初めます!(例えば、見出しとか)

目標に向かうためにゴールを決めるのは当然ですよね!笑

次に、どこをクリックしたら目的地につれていってくれるのかを決めましょう!

ゴールが大阪で、スタートが岡山なら、「岡山駅から行けばいい的な笑」

これは、あくまで例です!

ちゃんといいますと、

  1. ジャンプさせたいブロックにHTMLアンカーを指定する。
  2. リンクにHTMLアンカーの値を指定する。

難しそうに聞こえるかもしれませんがメチャクチャ簡単ですよ!

HTMLアンカーとは

HTMLアンカーとは、「ゴール地点の旗」です!

WordPressの設定の中にHTMLアンカーがあります。そこに「文字」を設定することによって、リンクボタンにその文字を指定するとそこまで移動してくれます!

詳しくは、次のsectionで!

WordPressでページ内リンクを作成する方法!

では、WordPressの画面を使って実際にページ内リンクを作成していきましょう!

今回作るページ内リンク

今回作るページ内リンクは、

このブログ記事の冒頭にあった「本編はこちら!」をクリックすると、「ページ内リンクとは」までジャンプしてくれる

というものを作ります!

実際に作りながら、説明していきますね!

イメージでは、こんな感じ↓↓↓

手順1.HTMLアンカーに任意の文字を指定しよう!

では、まずWordPressの記事投稿画面の右上にある「歯車」をクリックして、右の欄に設定画面を表示させましょう!

Step1:ゴール地点である「ページ内リンクとは」の見出しブロックをクリック

Step2:「高度な設定」→「HTMLアンカー」→「好きな文字を入力」

今回は、「a」としました!(自分は、a,b,c…の順番につけています!)

手順2.リンクにHTMLアンカーを指定する!

続いて、リンクを設定します!

この設定したリンクをクリックすると、先ほどの見出しブロックに自動で移動するようになります!

Step1:「リンクにしたい場所」を選択して、「リンクボタン」をクリック!

Step2:リンク欄に、「#HTMLアンカー」で指定して、Enterキーを押す!

指定するときは、「#指定した文字」でしてください!

完成

実際に、クリックしてみると見出しまで動くようになっているはずです!

お疲れさまでした!

まとめ

最後まで読んでいただきありがとうございました!

今回の記事のポイントをまとめておきます!

見返すときは、このまとめポイントを見てくださいね!

まとめポイント
  1. 飛ばしたいブロックにHTMLアンカーを指定する。
  2. リンクを作りたいところを範囲指定し、「#HTMLアンカー」として設定する。

この2つをすれば問題ないですね!

また、WordPressのカスタマイズに興味のある方はこちらの記事を読んで見て下さい!

アイキャッチ画像