こんにちは、テンテンです。
先日、THE THORでアンカー設定をしてみようと思ったのですが、デフォルトでは、そういった機能はないようで…
プラグイン（TinyMCE Advanced ）を使えば簡単にできるそうなのですが、THE THORとは、相性が良くないプラグインなんですよね。
THE THORの相性悪いプラグイン一覧
ということで、今回はプラグインなしでアンカー設定できましたので、今回はその方法について備忘録用として記録に残しておきます。
では、早速解説に進みます。
アンカー設定とは?
文章で説明するより、動画で実際に見た方が早いので、まずは下記動画をご覧ください。
※動画の時間は7秒です。
このように、同じページ内で指定の場所まで移動できる機能をアンカー設定と言います。
このようにアンカータグを使うことで、指定の場所まで素早く移動できるので、ユーザーからもありがたい機能だと考えています。
アンカータグの設定方法とは?〜プラグインなしで設定する〜
ここからは、実際にアンカー設定をしてみましょう。
プラグラミングコードを実際に入力することになりますので、まずはこれから解説することと同じようにやってみましょう。
アンカー設定手順①
(1)テキストを入力します。
※今回は、サンプルの為、「ここをクリック」というテキストにしています。
(2)リンクの挿入をします。
※コマンド＋Kでリンクの挿入を呼び出すことができます。
※WordPressには、様々なショートカットキーがあるので、覚えておくと効率化できます。
(3)#aと入力します。
※aでなくても良い！1でも2…とりあえず、aとしています。「＃」は忘れずに付けてください。
(4)適用をクリックします。
アンカー設定手順②
移動させたい場所のテキストを入力します。
※今回は、わかりやすく「これがアンカー設定だよ！」というテキストを入力しています。
アンカー設定手順③
(1)「テキスト」に進みます。
(2)移動させたい箇所に<a id=”a”></a>というコードを追加します
※aとidの間のスペースは、半角スペースです。
※”a”は、アンカー設定手順①でリンクの挿入をした際に入力したaのことです。ここかなり重要です。
(3)最後に「プレビュー」に進んで、動作を確認をしてみてください。
これでアンカー設定はできました。
なんとなく理解できましたか？
余談ですが、WordPressには様々なショートカットキーがあります。覚えておくと記事を書くスピードも早くなりますので、後ほど覚えておくと良いですよ。
下記の記事では、WordPressで使えるショートカットキーについてまとめていますので、興味があったら読んでみてください。
こんにちは、テンテンです。 今回は、WordPressで記事を書く時にガチで使えるショートカットキーをランキング化してご紹介します。 Tenten ランキングにつきまして[…]
アンカータグの設定方法〜もう少し詳しく解説します〜
ここからは、もう少し詳しく知りたい方向けの内容となります。
アンカー設定の手順は以下2つです。
①テキストにリンクを設定
②リンク先にアンカータグを設定
※テキストにリンクを設定する際のコード ・<a id=”なんでもよい“></a>
※リンク先にアンカータグを設定する際のコード
①<a></a> → アンカータグでそのリンク先とページの紐付け
②href=”#” → リンクの飛び先を指定
例）href=”#a”→リンクの飛び先aと指定
③id=”” → id属性をつけて、特定の場所を伝達している
例）ここに飛んできて(a)と指定している
なんとなくイメージできましたか？
はじめはざっくり程度で理解しておけば良いかと思います。
さいごに
アンカーの設定方法は、しっかり習得できましたか？
『俺のブログ運営』では、ブログで学んだ来たことや副業についてなどを多数アウトプットしていますので、もし良かったらいろいろ読んでみてください。
また、THE THORの初期設定から細かい設定などについても教科書をイメージしてまとめていますので、もし良かったらブックマークなどして参考にしてみてください。
▶︎THE THOR（ザ・トール）のカスタマイズ・初期設定・使い方一覧【完全版マニュアル】
最後まで読んでいただき、ありがとうございました。