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

目次を作って、その項目をクリックすれば、ジャンプして目的の記事が読めるという記事を以前書きましたが、今回はその応用編を紹介。

応用編の前に基本編~という方は

>>>【THE THOR】ページ内部リンクボタンが使えるエディタにカスタマイズ

こちらを先に見ることをお勧めします。

文章が長くなると、”文頭・目次に戻るボタン” リンクボタンを作りたくなりませんか?

その”目次に戻るボタン” リンクボタンの作成の紹介をします。

リンクボタンの作成に必ず必要

これはページ内部リンクで使った” リンク ” と ” ボタン ” そして ” アンカー ”です。

THE THOR(ザ・トール)目次に戻るリンクボタン1

リンクボタンのジャンプ先として使うアンカーの説明

押すと別の場所に移動する仕組みが「アンカー」です。

(「ハイパーリンク」や「リンク」と呼ばれることもあります。)

” <a> ~ </a> ”が「アンカータグ」と呼ばれています。

ページ内の好きな場所にジャンプしていく時に使うのが、” リンク ” と ” ボタン” そして” アンカー ”になります。

 エディタ

WordPressではブロックエディタが標準になっているようですが、ここではクラシックエディタを使っている前提での紹介をしています。

クラシックエディタを使ってもよいと思った方は「Classic Editor」プラグインをインストールして有効化してください。

画面左側のコンセントマーク「プラグイン」→「新規追加」をクリックしてください。

プラグインの検索窓に「プラグイン名」を記入して検索してください。

ボタンを押してインストール

プラグインが表示されると思いますので、インストールボタンをクリックしてください。

その後、有効化をクリックしてください。

プラグインのインストール・有効化の画像付きでの説明は下の記事でしていますので参考になさってください。

>>>テーマTHE THOR購入後~記事を書くまでを初心者に説明

THE THOR(ザ・トール)目次に戻るリンクボタン2

THE THORリンクボタンで使うアンカー作成に必要なプラグイン

THE THOR(ザ・トール)で”アンカー”を作成する為に必要なプラグインは「TinyMCE Advanced」です。

「TinyMCE Advanced」をインストールして有効化してください。

プラグインのインストールの説明はここでは省かせていただきます。

THE THORクラシックエディタに「スタイル」ボタン復活

画面左横の「設定」→「TinyMCE Advanced」をクリックします。

THE THOR(ザ・トール)のエディター設定画面になります。

「 ▶Classic Editor (TinyMCE)  」のタブをクリックしてください。

下にある「スタイル」ボタンをクリックしたまま、上のバーの空いているところに持っていきます。

保存ボタンをクリック

できましたら画面右上にある「変更を保存」ボタンをクリックしてください。

画像付きの詳しい説明は下の記事でしています。

>>>【THE THOR】ページ内リンクが使えるエディタにカスタマイズ

THE THOR(ザ・トール)目次に戻るリンクボタン3

THE THOR目次に戻るリンクボタンを作成

「共通ボタン」を使用した紹介をします。

共通ボタンには三種類用意されています。

THE THORリンクボタンの種類

プライマリボタン・セカンダリボタン・ノーマルボタンの3種類が用意されています。

表示場所はそれぞれ 右 ・ 中央 ・ 左 に指定できます。

「共通ボタン」をクリック → 「ボタンを選択」 →「表示場所を選択」をクリックしてください。

THE THORデザイン09のリンクボタンを紹介

プライマリボタンで 右表示

セカンダリボタンで 中央表示

ノーマルボタンで 左表示

THE THOR(ザ・トール)目次に戻るリンクボタン4

THE THORリンクボタンに目次のリンクを設定

表示されたリンクボタンをクリックしてください。

リンクボタンの下に吹き出しが出て、鉛筆マークが表示されますのでクリックしてください。

すると下の画像に変わりますので右端にある「歯車マーク」をクリックしてください。

THE THORリンクボタンのリンク先の名前

青丸が点滅していると思います。

青丸に「#mokuji」と記入してください。

THE THORリンクボタンの名前を変更

赤丸の「リンクテキスト」を消して「目次に戻る」を記入してください。

最後に右下にある「更新」ボタンをクリックしてください。

これでリンクボタン側の「 #mokuji にジャンプしなさい 」の設定が終わりました

THE THOR(ザ・トール)目次に戻るリンクボタン5

THE THOR リンクボタンのジャンプ先は目次

次に リンクボタンのジャンプ先になる「 #mokuji 」の設定には アンカー を使用します。

リンクボタンのジャンプ先にしたい、「目次」の前にカーソルを置いてクリックしてください。

「挿入」クリック すると下の画像になります。

アンカーをクリックしてください。

下の画像のように「#」をつけないで「mokuji」と記入してOKをクリックしてください。

これで、リンク先(目次)の設定が終わりました。

これで目次に戻るリンクボタンができました。

【THE THOR】目次に戻るリンクボタンを作る まとめ

目次へ戻るボタン リンクボタン。 ジャンプリンク、ページリンクの応用編。

何となくあった方がいいのかなぁと思うくらいなので、自分のサイトであまり使ってませんね(;^_^A

この記事を書いたので、他のページにもリンクボタン作っていこうかなと思いました。

あ、最後に一言! リンク先を設定する時は「#」+「文字」なので、この「#」を忘れないことが大事です!

アンカー設定の時は 反対に 「#」を付けないでください。

【THE THOR】(ザ・トール)関連記事まとめ

WPの有料テーマ【THE THOR】(ザ・トール)初心者でもわかるテーマの購入後の手順

【THE THOR】(ザ・トール)を購入してからの手順を画像を使って紹介しています。

WPの有料テーマ【THE THOR】(ザ・トール)初心者でもわかる着せ替えのやり方

【THE THOR】(ザ・トール)を購入したポイントにもなっているであろうスタイルの「着せ替え」機能のやり方を紹介しています。

WPの有料テーマ【THE THOR】(ザ・トール)初心者でもわかるページ内リンクボタンの設定

どんな記事が書いてあるのか始めに紹介したい時に使うアンカー。WPの有料テーマ【THE THOR】(ザ・トール)はデフォルトの状態のままだと使用できないので、これを使えるようにするためのカスタマイズ方法を紹介しています。

WPの有料テーマ【THETHOR】(ザ・トール)初心者でもわかる「プロフィール」の設定

【THE THOR】(ザ・トール)の固定ページを使っての「プロフィールページ」のプロフィールの書き方や作成方法を紹介しています。

WPの有料テーマ【THE THOR】(ザ・トール)初心者でもわかる自作ロゴ画像の作成から設定まで

【THE THOR】(ザ・トール)のヘッダーエリアのカスタマイズをしてロゴ画像を変更するやり方の紹介をしています。

WPの有料テーマ【THE THOR】(ザ・トール)初心者でもわかる「お問い合わせ」ページの設定

【THE THOR】(ザ・トール)の固定ページを使っての「お問い合わせ」ページの作成方法や返信文のカスタマイズの紹介をしています。

WPの有料テーマ【THE THOR】(ザ・トール)初心者にもわかる「プライバシーポリシー」ページの作り方

【THE THOR】(ザ・トール)の固定ページを使っての「プライバシーポリシー」ページに書く文章や作成方法を紹介をしています。

WPの有料テーマ【THE THOR】(ザ・トール)カスタマイズで改行設定

【THE THOR】(ザ・トール)の文章を読みやすくする為にCSSを使っての行間をあけるカスタマイズ方法を紹介しています。

WPの有料テーマ【THE THOR】(ザ・トール)初心者でもわかるメニューのカスタマイズ

【THE THOR】(ザ・トール)のロゴ画像の下にあるメニューバーのカスタマイズ方法を紹介しています。

WPの有料テーマ【THE THOR】(ザ・トール)サイドエリアの表示項目をカスタマイズ

【THE THOR】(ザ・トール)のサイドエリアの項目を自分好みにカスタマイズをする方法を紹介しています。

WPの有料テーマ【THE THOR】(ザ・トール)カテゴリページをカスタマイズ

【THE THOR】(ザ・トール)のサイドエリアに表示されている「カテゴリー」のカスタマイズの方法を紹介しています。

WPの有料テーマ【THE THOR】(ザ・トール)サイトマップをカスタマイズ

【THE THOR】(ザ・トール)作成したページでサイトマップを作製する方法を紹介しています。

【初心者専用】ブログで使いたいオリジナルのロゴ画像を作る説明

【THE THOR】(ザ・トール)のフェフォルト状態のままだと、デモサイトのロゴが表示されています。

自分のブログのロゴ画像を自分で作成するやり方を紹介しています。

ブログで使いたいフリーイラストとフリー写真のおすすめサイト6選

ブログで使う画像を無料でダウンロードさせてくれるサイト様の紹介をしています。

【THE THOR】ボタンリンクの記事を書いていた後話 2019/11/16

WordPressを5.31かな?に昨日更新したら・・・・もうさんざんでした。今はプラグインを入れてダウングレードしました。

【THE THOR】(ザ・トール)のリンクボタンをカスタマイズ。

カスタマイズしたリンクボタンを使用して目次に戻るについての記事でした。

リンクボタンとアンカーとの合わせ技。

最後まで読んでくださってありがとうございました。

ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪ 人気ブログランキング

私が個人でAmazonアソシエイトに応募して落ちましたが、

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