- 目次に戻るのボタンってどうやって作るの？
- クリックしたら違うところに飛んでほしい
THE THORの目次機能には当然(笑)ながら「目次にもどる」の機能まではついていません。
記事が長くなると「ここに目次に戻るってボタンを作りたいなぁ・・・」って思いますよね。
このページ内部リンクをしようする為に必要になるのは「リンク」と「アンカー」です。
THE THOR（ザ・トール）目次に戻るのボタン作成の手順
- アンカーが使用できるエディタにする(クラシックエディタ）
- 目次に戻るのボタンを作る
この記事では、エディタをカスタマイズして「アンカーが使用できるエディタにする（クラシックエディタ）」手順と「ページ内リンク」と「アンカー」の作り方を紹介します。
そして、記事最後にブロックエディタのアンカー作成の場所も紹介してあります。
目次に戻るのボタン作成は別記事で紹介しています。
記事最後にリンクを張っておきます。(^^♪
＜ PR ＞
THE THOR（ザ・トール）デフォルトのクラシックエディタの機能ボタン
デフォルトのTHE THOR（ザ・トール）のエディタ画面は機能ボタンが少ない場合があります。
このままでは「アンカー」どころかTHE THORのマーカー機能やショートコード・吹き出しなどTHE THORの標準装備の便利機能が使えません。
THE THOR（ザ・トール）クラシックエディタをカスタマイズする手順
- プラグイン「Advanced Editor Tools (previously TinyMCE Advanced)」をインストールして有効化にする。
- 必要なボタンを使えるように設定する。
使用できる機能のボタンは沢山あるのですが、設置するボタンが多いほど記述する画面が狭くなりますので注意です(笑)
THE THOR（ザ・トール）のエディタに必要なページ内部リンクのプラグインをインストール
THE THOR（ザ・トール）でページ内リンク（ジャンプリンク）を作成する為にインストールするプラグインは「Advanced Editor Tools (previously TinyMCE Advanced)」です。
画面左側の「プラグイン」→「新規追加」の順にクリックしてください。
「Advanced Editor Tools (previously TinyMCE Advanced」を検索してください。
＜ PR ＞
Advanced Editor Tools♪エディタに機能ボタンを増やす設定
画面左側の下の方にある「設定」の上にカーソルを置くか、もしくはクリックしてください。
「設定」にカーソルを置いた場合は「設定」の横に、「設定」をクリックした場合は「設定」の下に、設定の項目が表示されます。
「プラグイン」→「インストール済みのプラグイン」をクリックして表示された一覧の中にある「Advanced Editor Tools (previously TinyMCE Advanced」の「設定」をクリックしてもOK♪
THE THOR（ザ・トール）のクラシックエディターにボタンを増やす
クラシックエディターの設定は「旧エディター」でします。
使用しないボタンの中にある「アンカー」を見つけたら、クラシックエディター用ツールバーの空白の所にドラックしてください。
置きたい場所まできたら指を離せばその場所に表示されます。
「オプション」「上級者向けの設定」「管理」の項目はデフォルトの設定のまま、私は使用しています。
ブロックエディタを使用している場合は「クラシック版の段落ブロックを追加」がとても大事になります。
ここにチェックが入っていると、ブロックのスタイルを変換するときの項目に「クラシック版の段落ブロック」が追加されます。
設定が終わりましたら画面右上にある「変更を保存」ボタンをクリックしてください。
THE THOR（ザ・トール）の「便利機能アイコン」と「アンカーアイコン」が表示されるエディタ
便利機能ボタンが追加されたのは「クラシックエディタ」と「クラシック版の段落ブロック」です。
記事を新規作成か開くかをして、エディタを確認をしてください。
追加した機能アイコン、THE THOR（ザ・トール）の便利機能である「スタイル」ボタンがエディタに表示されていると思います。
ブロックエディタを使用している場合は、「クラシック版の段落ブロック」を表示させてみてください。
追加した機能アイコンが表示されています。
この「クラシック」のカスタマイズについては記事後半に紹介します。
THE THOR（ザ・トール）のクラシックエディタのカスタマイズ完了です！
もどる
アンカーに使用できる文字
- HTMLアンカーは、ドキュメント内で「ユニーク（特定できる）」にしてください。
- HTMLアンカーでは大文字と小文字が区別されます。
- HTMLアンカーには、ハイフン（-）、アンダースコア（_）、コロン（:)、ピリオド（。）の記号を含めることができますが、スペースを含めることはできません。
- HTMLアンカーはアルファベットで始まるようにしてください。
クラシックエディタのページ内部リンクとアンカーの使い方
下の画像の様にリンクを作りたい文字を選択し、リンクのボタンをクリックするとリンク先を記入するバーが表示されます。
他のページにリンクならば、空白バーの右端にある歯車マーク（？）をクリックしてページを選択しますが、ページ内部リンクの時は「＃+文字」を記入しキーボードのエンターキーをクリックします。
次は記事中にジャンプの着地点にしたい場所をクリックします。
設定の時にドラックした下向き旗マーク「アンカー」をクリックしてください。
「挿入」→「アンカー」でもOKです♪
先ほどジャンプ先(アンカー名）に設定した文字を記入します。
ジャンプの着地点として選んでクリックした場所に「イカリ」のマークがつきました。
これでページ内リンクができました。
ブロックエディタのページ内部リンクとアンカーの使い方
画面右側の「高度な設定」の中にある「HTMLアンカー」を使用します。
ここにアンカーの文字を入力します。
ブロックエディタのリンクボタンの作成方法
THE THORのボタンではなく、通常のボタン作成の方法を先に紹介します♪
「+」かプルダウンメニューの中の「前に挿入」か「後ろに挿入」をクリックしてブロック検索の窓を出して、「ボタン」と入力して検索をしてください。
上記の画像は私の検索結果になるのですが、私は拡張プラグインを入れているので皆さんと違うかと思います(￣▽￣;)
ボタンを検索したら、下にある「ボタン」をクリックしてください。
ボタンの文字を入れたら、ボタンをカスタマイズしていきます♪
ボタンのカスタマイズ項目
スタイル
「塗りつぶし」か「アウトライン」かを選択
色設定
ボタンの色、文字色選択
整形
上付き文字、下付き文字、アンダーラインを選択します。
テキストの色
選択した文字だけの色や、文字の背景色を選択できます。
枠線設定
ボタンの角の丸みと、ボタンの幅を選択します。
リンクの設定
ここに「＃+アンカー」を記入します。
THE THORのボタンをブロックエディタで使用できるように設定
「クラシック」スタイルを表示させて、ボタンが表示されていないようなら、「Advanced Editor Tools (previously TinyMCE Advanced」の「ブロックエディター」で設定します。
ここからはクラシックエディタと同じように、ブロックエディタの「クラシック」スタイルでTHE THORの機能の「共通ボタン」で作成してください。
THE THOR(ザ・トール）クラシックエディタをカスタマイズしてページ内リンク作成 まとめ
【THE THOR】（ザ・トール）でクラシックエディタを使用しているなら、必要なプラグイン「Advanced Editor Tools (previously TinyMCE Advanced」の紹介と「ページ内リンク」と「アンカー」の使い方を紹介しました。
最後に一言！ リンク先を設定する時は「＃」+「文字」なので、この「＃」を忘れないことが大事です！
「目次に戻る」をTHE THORのボタンを使って使用したい場合は下の記事で紹介しています。
≫THE THOR【ザ・トール】「目次に戻る」のリンクボタンを作る
文章が長くなると設置したくなる「目次に戻る」のボタン。この記事では、THE THORのボタン機能を使って「目次に戻る」のボタンを作成する手順を紹介しています。 当然ですが、「目次に戻る」という文字のボタンを作成しただけでは戻[…]
ランキングに参加しているので、クリックしてくださると嬉しいです(^^♪
コメントもおまちしてま～す♪
アフェリエイトの登録は無料です！
Amazonなどの物販に興味がある方は、アソシエイトの保険として「もしもアフェリエイト」からの申請もお勧めします。
A8.netの「オンライン初心者セミナー」はとってもおすすめです。無料で収益ブログの作り方を丁寧に教えてくれます♪私が受講した時は３時間でした(笑)アフェリエイトの会社によって、扱っている商品は違ったり、又、同じ商品でも成約金額が違う場合があるので複数の登録をお勧めします(^^)/
