WordPress

WordPressのページ内リンクが出来ない対処法 6/10追記

今回は住宅関係ではない記事です。

私自身出来なくて迷った部分なので、もしかしたら同じような人がいるのではないかと思い、書こうと思いました。

それはページ内リンク(ページ内ジャンプ)の方法です。

とりあえずこのページ内リンクの一般的に説明されている方法をご説明させていただきます。

 

 

ページ内リンク(ページ内ジャンプ)とは

ページ内リンク(ページ内ジャンプ)とは同じ記事内の特定の場所まで一気に飛ぶためのリンクです。

いろんな記事を見ていると、目的としているものが中盤とか終盤に書いていて、そこまでの記事が長いとスクロールするのも面倒で、さらに飛ばしてしまってわからなくなったりする事がありますよね。

そんな時は目次があって、それにリンクがついていたらすごく便利です。

記事を書いている人は一手間かける事ですごく読みやすい記事になるので、ぜひ採用してください。

とは言っても私も最近覚えたばっかりで偉そうには言えませんが・・・(笑)

 

TinyMCE Advancedを使った方法

これはいろんな記事でも紹介されていますがTinyMCE Advancedというプラグインを使った方法です。

これを使う事でビジュアルだけの作業でページ内リンクをつける事ができるので、とても楽です。

まずリンクをつけたい文字を選択し「リンクの挿入」というアイコンをクリック

WordPressのページ内リンクが出来ない対処法 6/10追記

すると、下記のような画面が出るので頭に「#」を入れてから任意のリンク名を記入します。

WordPressのページ内リンクが出来ない対処法 6/10追記

これで目次の「ページ内リンク(ページ内ジャンプ)とは」という文字にリンクをつける事が出来ました。

では次に飛び先にアンカーをつけましょう。

まずは飛び先を選択し、アンカーのアイコンをクリックします。

WordPressのページ内リンクが出来ない対処法 6/10追記

アンカーのアイコンをクリックすると、下記のような画面が出るので、先ほど記入したリンク名を入力します。

この時「#」はつけないようにしてください。

WordPressのページ内リンクが出来ない対処法 6/10追記

これでページ内リンクの設定は完了です。

プレビューで飛べるか確認してみましょう。

 

TinyMCE Advancedを使わない方法

TinyMCE Advancedのプラグインを使わずにHTMLに記入してリンクをつける場合やり方です。

まずはテキストのタブへいき、リンクをつけたい文章に下記のように記入します。

<a href=”#リンク名“>リンクをつけたい文章</a>

次にアンカーを設定します。

<a id=”リンク名“></a>リンク先の文章

これで設定は完了です。

プレビューで飛べるかを確認してみましょう。

 

リンク先に飛ばない

飛びましたか?

これで読みやすい記事が出来てよかった。

と言いたいところなのですが・・・

上記の方法では私は飛びませんでした。

URLを見ると、クリックしたらリンク先に変わっているのですが、なぜか飛ばない・・・

ほかの記事で見つけた方法を見つけたのでそちらも紹介させていただきます。

リンクをつける方法は上記と同じです。

アンカーの部分を下記のように記入します。

<span id=”リンク名“>リンク先の文章</span>

はい、私はこれでも飛びませんでした。

多分みなさん同じように書かれているので、おそらく私のやり方が間違っているのだと思いますが

飛ばないのは事実なので、色々と試行錯誤した結果、どうにか飛ぶようになりました。

 

私の解決策

では、私なりの解決策です。

まずテキストの方にいきます。

WordPressのページ内リンクが出来ない対処法 6/10追記

こんな感じになっていますよね。(見にくくてすいません)

私がアンカーをつけたい部分は

<h3>ページ内リンク(ページ内ジャンプ)とは</h3>

上記の部分なので、この部分に直接idを書いちゃいます。

<h3 id=”contents1″>ページ内リンク(ページ内ジャンプ)とは</h3>

これで私は飛ぶようになりました。

ただこれだとリンクで飛んだ時に

見出しが見切れてます・・・

という事で、リンク先の1行前に何も記入していない空欄の行を作りそこにリンクを書きました。

<p id=”contents1″>&nbsp;</p>
<h3>ページ内リンク(ページ内ジャンプ)とは</h3>

こんな感じです。

これでいい感じにリンク先に飛ぶようになりました。

みなさんは最初のTinyMCE Advancedを使った方法を説明されてるので、おそらく私のやり方が間違っていると思いますが、とりあえずはこれで飛ぶので、応急処置として、この方法でやってます。

もし私と同じように、書いてる通りにやってるのにリンク先に飛ばないって方はお試しください。

TinyMCE Advancedを使ったやり方の解決方法がわかったら、追記したいと思います。

 

2019/06/10追記

ブログを確認していておかしいことに気づきました。

此方で書いているテキストは合っているのですが、ブログ投稿したら「”」が変換された状態で表示されています。

もしコピペされた方は「”」の部分だけ半角英数にして記入し直して下さい。

コピペだと飛びません。

<p id=contents1>&nbsp;</p>

黄色の2箇所を記入し直してみてください。

ブログの設定をいじってコピペでも大丈夫なように訂正出来ました。

申し訳ありませんでした。