【WordPress】ページ内リンクの作り方!簡単にページ内で飛ばす方法

【WordPress】ページ内リンクの作り方!簡単にページ内で飛ばす方法

ブログを書いていると、ページ内で「ここをクリックしたら、あの文章の所に飛ばせるようにしたいな~」って思うときありますよね。

 

今回紹介するのは、プラグイン【TinyMCE Advanced】を使った方法です。

 

簡単に表やテーブルなども作れるようになるプラグインなので、多くのブロガーさんは使ったことがあるプラグインなのかなと思います。

 

もしまだインストールしていない方がいれば、色々と便利なプラグインなのでインストールしてみてください。

 

リンクの作り方

リンク元を設定する

これが実際にページ内リンクを使用したゲームの記事を書いたブログです。

私の場合は下の文章をクリックすると、上の画像の所に飛ぶように設定しました。

 

今回はこれを例にやってみようと思います。

 

まずは「飛ばしたい文章を選択」します。

青くなる文章のところですね。

 

この場合は

【※見た目は「ストームストリンガー(試作)」と同じです。】

の文章の、ストームストリンガー(試作)を範囲選択します。

 

そうしたら、赤矢印の所のリンクを押します。

 

リンクを選択すると文字を入力する画面が出てきますので、その枠に「#○○○」と入力します。

〇の中身はなんでもOKですが、先頭にはかならず「#」を付けることを忘れずに行ってください。

 

私の場合は、#a,#b,#c,#d…という感じにリンクをつけています。

どの文章にどのリンクを付けたかを忘れずに覚えておいてくださいね。

 

エンターを押してリンクを作ると、範囲指定した文字が青く変わります。

 

これで、#aというリンクが完成しました。

 

もし飛ばしたい所を別のタブで開きたい場合は、下に表示されている「新しいタブで開く」というところのマークをクリックすると、リンク先が別のタブで開かれるようになります。

 

リンク先の作り方

それでは次は、飛ばしたい場所を設定していきましょう!

 

と、その前にリンク先を作る際の注意点を先にお伝えしておきます。

 

画像を説明している文章も一緒に表示させたいので、飛ぶ場所は赤線のところくらいから表示されるように設定したいですね。

気を付けたいのが、リンクを設定したところよりも下のほうしか表示されないので、画像の上の文章にリンクを付けると文字よりも下しか飛んだ時に表示されません。

 

なので、実際にリンクを作るのは表示させたい所よりも少し上の文章に設定することを意識すると綺麗に飛びますよ。

この場合は、もう一つ上の文章、【このクエストでは、…】のところにリンクを作るとOKですね~!

 

それではリンク先の作り方です。

 

まずは飛ばしたいブロックをクリックして、ブロックをクラシック版に変換してください。

 

アンカーのアイコンをクリックします。

 

アンカーのアイコンが無いという方は、【プラグイン】→【インストール済みプラグイン】から「TinyMCE Advanced」の設定を開いて、アンカーをメニューバーに追加してください。

 

そして、アンカーを押すと入力画面が開かれます。

 

IDの枠の所には、先ほど設定した「#○○○」の【#を抜いたもの】を入力します。

私の場合は、【#a】でしたので入力するのは【a】のみです。

 

そしてOKを押すと、リンク先(アンカー)が設定完了となります!

アンカーが設定された文章の脇には、アンカーのマークが表示されます。

 

 

実際にリンク先に飛ぶか確認してみる

それでは実際にどのように表示されるか見てみましょう!

きちんと設定したリンクに飛ぶのか、自分で思い描いている場所がしっかりと表示されるのかを必ず確認してください。

 

リンクをクリックして飛ぶと~、

 

こんな感じで表示されます。

 

狙い通りの場所に飛ぶことが出来ましたね!!

 

リンク先で設定した文章はこの上になるので、少し上にスクロールしないと表示されません。

 

たまに飛んだ先がちょっとずれているサイトとかよく見かけますよね。

自分のサイトがそうならないように、プレビュー画面でも確認してみましょう!

 

まとめ

プラグインの【TinyMCE Advanced】は表やテーブルだけでなく、リンクを作ったりできる非常に便利なプラグインですね。

 

少しずつブログにも機能が付いてきて読者の方も少し見やすくなってきているのかな?

 

なにより自分のブログが見やすくなると自分が一番うれしいですよね♪

またブログを書いているときに便利だな~と思う機能があれば紹介したいと思います!