プラグイン【ザ・トール】「目次に戻る」のリンクボタンを作る

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

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

この作業で必要になるのは” リンク ” と ” ボタン ” そして ” アンカー ”です。

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

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

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

「アンカー」とは、ジャンプ先の目印です(笑)

検索して調べると、「押すと別の場所に移動する仕組みが”アンカー”である」とか「”ハイパーリンク”や”リンク”と呼ばれる」とか出てくると思います。

本当は、仕組みの事なのでしょうが( ̄▽ ̄;)

いいのです。

ジャンプ先の目印と覚えて使いましょう♪

この記事で説明に使用するエディタ

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

初心者ならクラシックエディタの方が使いやすいので、使用している方の方が多いかなと思ったので(;^_^A

もし、ブロックエディタを使用している方だったらごめんなさい!!

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

プラグイン「classic Editor」をインストール

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

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

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

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

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

>>>THE THOR【ザ・トール】でブログ♪設定&記事の書き方を初心者に説明

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

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

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

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

クラシックエディタにTHE THOR(ザ・トール)の「スタイル」ボタンを表示

「投稿」でも、「固定ページ」でもいいのですが戻って確認してみてください。

今まであった「スタイル」ボタンが消えていると思います。

マーカーなどTHE THOR(ザ・トール)の便利機能が沢山あるのにつかえなくなってはたまりません(;^_^A

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

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

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

>>>【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】ボタンリンクの記事を書いていた後話 2019/11/16

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

 

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

NO IMAGE
最新情報をチェックしよう!
>

そら

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

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


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