文章が長くなると設置したくなる「目次に戻る」のボタン。
この記事では、THE THORのボタン機能を使って「目次に戻る」のボタンを作成する手順を紹介しています。
当然ですが、「目次に戻る」という文字のボタンを作成しただけでは戻ってくれません(笑)
使用しているバージョン Wordpress 5.6 THE THOR 2.2.2
使用しているエディタ ブロックエディタ
「目次に戻る」ボタンを作成する２つの手順
- THE THORで「目次に戻る」ボタンを作成する
- カーソルをジャンプさせる時に使用する「アンカー（着地場所）」を設定（クラシックエディタならエディタの拡張が必要）
この記事では、下の☆部分にアンカーを設定してありますので、「目次に戻る」ボタンをクリックするとここに戻ります。
THE THOR（ザ・トール）目次に戻るリンクボタンはどれで作る？
- 「スタイル」のボタン
- 「共通ボタン」
この２つの種類のボタンのどちらかで作成します。
この記事では「共通ボタン」を例に「目次に戻る」のボタンを作成します。
THE THORのボタンはエディタの拡張をしてから「クラシックエディタ」か「ブロックエディタ」の「クラシック」スタイルで作成します。
エディタの拡張については下の記事で紹介してます♪
≫THE THOR(ザ・トール）クラシックエディタを拡張♪ページ内リンク作成
＜ PR ＞
「スタイル」のボタンはカスタマイズできる
ボタンを選択して作成した後に、自分で色々カスタマイズが出来るボタンです。
このボタンのカスタマイズ方法は下の記事で紹介しています。
≫THE THOR（ザ・トール）ボタンの使い方♪カスタマイズ設定手順紹介
「共通ボタン」のボタンは３種類設定してある
「共通ボタン」は見た目が違うボタンが３種類用意されています。
「共通ボタン」の３種類それぞれの、文字色・背景色を自分で設定し使用することも出来ます。(ノーマルボタンは背景色のみ設定）
THE THOR（ザ・トール）共通ボタンの設定方法
画面左側「外観」→「カスタマイズ」→「パーツスタイル設定（THE）」→「共通ボタン設定(全ページ用)」の順にクリックしてください。
「プライマリーボタン」「セカンダリーボタンの設定」「ノーマルボタンの設定」それぞれ設定します。
＜ PR ＞
ボタンの「文字色：白」「背景色：ピンク」を選択した場合
THE THOR（ザ・トール）目次に戻るリンクボタンを「共通ボタン」で作る
表示場所はそれぞれ 右 ・ 中央 ・ 左 に指定できます。
「目次に戻る」と書いてからドラックして文字を反転させてから「共通ボタン」をクリック → 「ボタンを選択」 →「表示場所を選択」をクリックしてください。
THE THORリンクボタンに目次のリンクを設定
作成した「目次に戻る」ボタンをクリックしてください。
リンクボタンの下に吹き出しが出て、鉛筆マークが表示されますのでクリックしてください。
すると下の画像に変わりますので右端にある「歯車マーク」をクリックしてください。
THE THORリンクボタンのリンク先の名前
ここにリンク先（ジャンプ先名）を記入します。
今回作成するのは他ページではなくページ内リンクなので、「＃」+「文字」でアンカー名を記入します。
例として「#mokuji」と記入してください。
赤丸の歯車マークをクリックすると、リンク先の詳細を設定できます。
THE THOR（ザ・トール）目次に戻るのアンカーを設置
クラシックエディタを使用している方は、エディタの拡張をした後「アンカー」アイコンか、「挿入」の中の「アンカー」（エディターメニューを有効化してあるなら）をクリックしてください。
THE THOR目次に戻るのアンカー名（ジャンプ先）を記入
リンクボタンのジャンプ先にしたい、「目次」の前にカーソルを置いてクリックした後に「下向きの旗アイコン」か「アンカー」をクリックしてください。
下の画像のように「＃」をつけないで「mokuji」と記入してOKをクリックしてください。
これで、リンク先（目次）の設定が終わりました。
【THE THOR】目次に戻るバックリンクボタンを作る まとめ
目次へ戻るボタン リンクボタン。
ジャンプリンク、ページリンクの応用編。
何となくあった方がいいのかなぁと思うくらいなので、自分のサイトであまり使ってませんね(;^_^A
あ、最後に一言！ リンク先を設定する時は「＃」+「文字」なので、この「＃」を忘れないことが大事です！
アンカー設定の時は 反対に 「＃」を付けないでください。
【THE THOR】ボタンリンクの記事を書いていた後話 2019/11/16
WordPressを5.31かな？に昨日更新したら・・・・もうさんざんでした。今はプラグインを入れてダウングレードしました。
【THE THOR】ボタンリンクの記事を書いていた後話２ 2021/01/25
【THE THOR】でブログをはじめて１年が経ちました。
この記事を改めて見たら、直したくなってリライトしちゃいました(;^_^A
見やすくなったと思っていただけたらうれしいです♪
ランキングサイトに登録していますのでクリックしてくれると嬉しいです(^^♪
コメントもおまちしてます♪
アフェリエイトの登録は無料です！
Amazonなどの物販に興味がある方は、アソシエイトの保険として「もしもアフィリエイト」からの申請もお勧めします。
私のサイトは、アソシエイトは落ちて「もしもアフィリエイト」でAmazon提携出来ました(笑)
A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。 ここもおすすめ♪アフィリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/
