THE THORのHTMLアンカーの使い方

THE THORのHTMLアンカーの使い方

こんにちは、NOSE YUJIです。


2006年頃からプログラミングを独学し、2015年頃からワードプレスでウェブサイト構築のフリーランスとして活動しています。


最近、THE THORのテーマを購入してこちらのブログサイトを立ち上げましたが、HTMLアンカーを利用出来ないことに本日気が付きました。


いろいろ調べるとプラグインを利用してHTMLアンカーを作成することができるようですが、あまり余計なプラグインを入れてサイトの読み込み速度を遅くしたくありません。


そこで今回は、HTMLに少し手を加えるだけでアンカーを指定する方法をご紹介します。


HTMLに慣れている人であれば、簡単にできるのでぜひ参考にしてみてください。

THE THORのHTMLアンカーの使い方 – プラグインを利用しない解決方法

THE THORのテーマはデザイン性にも優れとても使いやすいのですが、今回はHTMLアンカーをダッシュボードから指定しても機能しなかったので、その解決策をご紹介します。


⇨【圧倒的にSEOに強く・上位表示されやすいWordPressテーマ】 THE・THOR

 

いろいろ調べるとこちらの「TinyMCE Advanced」というプラグインをインストールすれば、HTMLアンカーを作成できるようですが、HTMLアンカーを作成するためだけに重いプラグインを入れてサイト読み込み速度が遅くなっても嫌です。


そこで、下記にHTMLを修正するだけでHTMLアンカーの作成方法をご説明しますので参考にしてください。

課題：ワードプレスデフォルトのHTMLアンカーが機能しない

ワードプレスで記事を書くとき、HTMLアンカーを使った記事内や特定の記事の特定のh2タグなどにリンクを飛ばしたい時もあるかと思います。


ところが、THE THORのテーマでワードプレスのダッシュボードから記事を書く際に「高度な設定」⇨「HTMLアンカー」へ値を入力してもその入力した値に対してHTMLアンカーリンクは飛ばされません。


例えば、H２タグのHTMLアンカーに任意の値(例: example1)を入力するとします。

そして、リンク先を下記のように書いたとします。

しかし、実際のリンク先のコードでは下記のような状態となっています。

そのため、HTMLアンカーに任意の値を入力しても、HTMLアンカーとしては機能しなくなってしまいます。


では、どうすれば良いのか。

HTMLアンカーをタグ内で使う方法

通常、HTMLアンカーでリンクを飛ばしたい場合はタグ内にidを指定して、そのidに対して頭に「#」を付ければHTMLアンカーリンクとして自分の指定した場所にリンクを飛ばすことが可能です。


※下記はh3タグで説明しています。

■HTMLアンカー

こちらがHTMLアンカー

■リンク先

こちらが飛ばし先

以上の基本的な使い方が分かったらあとは簡単です。

解決策：リンク先idを確認する

簡単ですが、以下に手順を解説します。

• ブラウザ上でリンク先のタグの上で右クリックします
• 検証をクリックします
• h2タグ内にあるidを確認します
• そのidをリンク先に指定して完了です

1. ブラウザ上でリンク先のタグの上で右クリックします

2. 検証をクリックします

3. h2タグ内にあるidを確認します

4. そのidをリンク先に指定して完了です

以上で、リンク先に飛ぶようになったと思います。

まとめ

如何でしたでしょうか。


意外と簡単に設定出来たのではないでしょうか。


毎回HTMLのidを調べるのは面倒ですが、余計なプラグインを入れてサイト読み込み速度が遅くなっても嫌なのでこの方法が最も最適かなと思います。


ただ、この課題ももしかしたら将来アップデートで改善されるかも知れませんね。


ブログ運営に関する記事は下記にまとめていますので、良かったら参考までにどうぞ。