たけちんです^^
今回は、同じページで任意の場所へ飛ばす(リンクを張る)方法を解説します。
ページ内リンクは超簡単です!!
プラグインは使用しません。
また、ページ内リンクが飛ばないなど、うまくいかなかった時の対処方法も解説します。
参考になれば嬉しいです。
この記事の信頼性

当ブログの運営環境
レンタルサーバー
【ロリポップサーバー】
ロリポップを選んだ[3つ]の理由
WordPressテーマ
【THE THOR(ザ・トール)】
設定方法
1.リンク元の設定
ワードプレス投稿画面の「ビジュアル」タブをクリックし、記事内容を表示させます。
そして、リンク元(離陸地点)の文字を選択します。
次にリンクボタンをクリックします。

下記の表示になりますので、
「#任意の文字」を入力し、適用をクリックします。
※下の画像は例として、#test としています。

2.リンク先の設定
飛ばしたい記事の位置(着陸地点)をクリックします。
その位置に、カーソルがとどまって点滅します。
ワードプレス投稿画面のツールバーから【挿入】→「アンカー」をクリックします。
アンカーのID入力画面が表示されるので、「1.」で入力した#を除いた任意の文字を入力します。
ここでは、test
【テキスト】タブでHTMLコードを見てみると、リンク先の部分は下記のようになっています。
「<a id=“test”></a>」
※testの部分が任意の文字です。
3.設定完了
完了です。
プレビュー画面で確認してみましょう。
内部リンクのテスト
・「最上部へ飛ぶ」ここをリンクさせます!
※上のリンクをクリックすると、最上部へ飛びます。
テキストモードにしてHTMLコードを見てみると、下記のようになります。
正常な記述例
【着陸地点の記述】
<a id="test"></a>
こんにちは! ← 【ここがページ最上部のところ(着陸地点)】
【離陸地点の記述】
「<a href="#test">最上部へ飛ぶ</a>」ここをリンクさせます!
↑ 【ここがリンク表示になり、着陸地点へ飛びます】
※ページ内リンクが飛ばない時は?
リンクできない!
リンクがうまくいかない!
そんな時に確認してみることは?
確認する部分
ワードプレスの【テキスト】タブで、HTMLコードを確認します。
【”】ダブルコーテーションを確認
「”●●”」の記述部分で、「””●●””」(ダブルコーテーションがダブっている)となっている時があります。
このダブっているダブルコーテーションを削除してみましょう。
一つの”(ダブルコーテーション、しかも半角で)で、文字を囲みます。
ダブルコーテーションは半角で記述します!
NGな例
<a id=""test""></a>
↑ 【ダブルコーテーションがダブっているのがNG】
「<a href=""#test"">最上部へ飛ぶ</a>」ここをリンクさせます!
↑ 【ダブルコーテーションがダブっているのがNG】
#の付け方
飛んで行った先(着陸地点)の記述には、「#」は付けないこと。
NGな例
<a id="#test"></a>
↑ 【リンク先のID名に#が付いている→NG】
「<a href="test">最上部へ飛ぶ</a>」ここをリンクさせます!
↑ 【リンク元に#が無い→NG】

#はいらないんですね(=^ェ^=)
#をつけるんじゃよ!
最後に
どうでしたか?
うまくいきましたか?
最初は難しいと思いますが、一度やってみれば超簡単なのでぜひチャレンジしてみてください^^
・この記事を読むと 自分のブログ記事内から、他の記事へリンクさせる方法が分かります。【動画解説あり】 他のページへ飛ばしたい時に使用します。 この記事についてすべて実際に作業し、簡単に出来た内容を紹介しています! &[…]
wordpress(ワードプレス)テーマのザ・トール(THE THOR)を、ワードプレスにインストールする方法(手順)を…
今回は、wordpress(ワードプレス)テーマのザ・トール(THE THOR)で、デザイン着せ替え機能によるデモデザイ…