THE THOR【ザ・トール】「目次に戻る」のバックリンクボタンを作る

THE THOR【ザ・トール】「目次に戻る」のリンクボタンを作る

文章が長くなると設置したくなる「目次に戻る」のボタン。
この記事では、THE THORのボタン機能を使って「目次に戻る」のボタンを作成する手順を紹介しています。

当然ですが、「目次に戻る」という文字のボタンを作成しただけでは戻ってくれません(笑)

使用しているバージョン Wordpress 5.6 THE THOR 2.2.2
使用しているエディタ  ブロックエディタ


「目次に戻る」ボタンを作成する2つの手順

  • THE THORで「目次に戻る」ボタンを作成する
  • カーソルをジャンプさせる時に使用する「アンカー(着地場所)」を設定(クラシックエディタならエディタの拡張が必要)
そら
記事最後にページ内リンクが使用できるようにクラシックエディタを拡張する方法についての記事を紹介してます

この記事では、下の☆部分にアンカーを設定してありますので、「目次に戻る」ボタンをクリックするとここに戻ります。

THE THOR(ザ・トール)目次に戻るリンクボタンはどれで作る?

  • 「スタイル」のボタン
  • 「共通ボタン」

この2つの種類のボタンのどちらかで作成します。
この記事では「共通ボタン」を例に「目次に戻る」のボタンを作成します。

そら
どちらも、通常時・ボタンの上にカーソルが乗った時・ボタンをクリックした時にボタンの色や文字色が変わる効果がついています。

THE THORのボタンはエディタの拡張をしてから「クラシックエディタ」か「ブロックエディタ」の「クラシック」スタイルで作成します。
エディタの拡張については下の記事で紹介してます♪
THE THOR(ザ・トール)クラシックエディタを拡張♪ページ内リンク作成

「スタイル」のボタンはカスタマイズできる

ボタンを選択して作成した後に、自分で色々カスタマイズが出来るボタンです。
このボタンのカスタマイズ方法は下の記事で紹介しています。

THE THOR(ザ・トール)ボタンの使い方♪カスタマイズ設定手順紹介

「共通ボタン」のボタンは3種類設定してある

「共通ボタン」は見た目が違うボタンが3種類用意されています。
「共通ボタン」の3種類それぞれの、文字色・背景色を自分で設定し使用することも出来ます。(ノーマルボタンは背景色のみ設定)

THE THOR(ザ・トール)共通ボタンの設定方法

画面左側「外観」→「カスタマイズ」→「パーツスタイル設定(THE)」→「共通ボタン設定(全ページ用)」の順にクリックしてください。

目次に戻るボタンを共通ボタンでつくる

「プライマリーボタン」「セカンダリーボタンの設定」「ノーマルボタンの設定」それぞれ設定します。

ボタンの「文字色:白」「背景色:ピンク」を選択した場合

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】ボタンリンクの記事を書いていた後話2 2021/01/25

【THE THOR】でブログをはじめて1年が経ちました。
この記事を改めて見たら、直したくなってリライトしちゃいました(;^_^A
見やすくなったと思っていただけたらうれしいです♪

ランキングサイトに登録していますのでクリックしてくれると嬉しいです(^^♪
コメントもおまちしてます♪

 ランキングサイトに参加しているのでクリックしていただけると嬉しいです(^^♪

アフェリエイトの登録は無料です!

Amazonなどの物販に興味がある方は、アソシエイトの保険として「もしもアフィリエイト」からの申請もお勧めします。
私のサイトは、アソシエイトは落ちて「もしもアフィリエイト」でAmazon提携出来ました(笑)

A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。 ここもおすすめ♪アフィリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/

/Decoration/TOOL/そらのまなびぶろぐ/THE THOR/AFEREIT/

THE THOR【ザ・トール】「目次に戻る」のリンクボタンを作る
最新情報をチェックしよう!
>

そら

プログラマーとして働いていたが結婚後を機に田舎に戻り、独学でHTML・Perlを勉強し自宅でWEBの仕事をはじめるも、アレルギー児の子育てで断念。子供の手が離れたのを機にWorldpressの勉強をしながらブログをはじめました。

 そらのまなびぶろぐ について 


そらのまなびぶろぐでは、wordpressの有料テーマ【THE THOR(ザ・トール)】を使用して収益化ブログの作り方を初心者向けに紹介しています。エディタの使い方、アドセンス申請に必要なページの書き方&作り方、ブログの装飾の方法までを紹介しています。