wordpress

wordpress簡単な目次の作り方!TinyMCE Advancedでずれない目次!

2020年3月31日

content

目次って別にいらないかなと思ってたんですが

読む側にとってみればやっぱり必要ですよね

バシっと読みたい所まで飛んでくれた方が便利ですよね

そこで、初心者でも簡単目次を作る方法を見つけましたよ!

しかも目次を作る専用プラグインではなく

wordpressを使っている方ならほとんどの方が既に入れているであろうプラグイン

TinyMCE Advanced 

これを使ってパパッと簡単に、しかもずれる事なく作る方法をご紹介します!

 

 

 

Googleアドセンス合格するためのポイントをまとめた記事はこちらになります

 

 

1.目次の作り方

 

content

 

手順

①目次、本文を書く
②目次へリンクの設定をする
③着地点へアンカーの設定をする
④アンカーのずれを修正を追加する

 

手順は以上です

また、TinyMCE Advancedを使うのでインストールしておいてください

 

contents-tinymce 

 

簡単に説明すると共通の名前をつけて

本文の着地点側へ目印(アンカー)を設定して

目次にそのリンクを貼るという感じです

共通の名前はここでは title としています

①目次、本文を書くが終わったあとの②から説明していきます

 

 

②目次へリンクの設定をする

 

この記事の 1.目次の作り方 で説明します

まず、目次の方の 1.目次の作り方 を範囲指定してリンクの挿入をクリック

#title1 と入力する  # title 1(連番))

連番目次の数字と同じにしておくと解りやすいです

例えば②目次へリンクの設定をするであれば #title1.2 という風に

 

③着地点にアンカーの設定をする


本文のタイトル 
1.目次の作り方 の1の前にカーソルを持ってくる

アンカーをクリックしIDに title1 と入力する

★今回 # は入れないで下さい

これで目次から本文の着点へのジャンプの設定は完了です!

しかし!このままだとジャンプした時アンカーを付けたタイトルが

画面上から隠れてしまうのでどこに飛んだんだ?となります

それを修正するための工夫が最終の設定となります

 

④アンカーのずれを修正する

CSSコードHTMLコードコピペする

CSS

 CSS
a.anchor{
display: block;
padding-top: 70px;
margin-top: -70px;
}

 

HTML

 html
class=" anchor"

cssのコードは子テーマstyle.cssなどへ、そのままコピペで大丈夫です

 

HTMLのコードは、アンカーの後ろコピペをしていきます

画面をビジュアルからテキストへ切り替えます

 

着地点の1.目次の作り方は下記のようになっています

 html
<h2><a id="title1" ></a>1.目次の作り方</h2>

 

 

この id="title1" の後ろへ class="anchor" をコピペします

 html
<h2><a id="title1" class="anchor"></a>1.目次の作り方</h2>

 

見つけにくいので id= で検索(ctri+f)をすると解りやすいです

着地点となる箇所全てにコピペしていきます

 

この方法だとコピペをする手間がありますが

最初にフォーマットを作ってしまう方法もあります!

 

 

補足 フォーマット作成

 

①新規作成で目次からh2、h3、まとめまで骨組み部分のみを作る

 

目次
1.○○○○
①△△△△
②□□□□
・・・・
まとめ

 

1.○○○○

①△△△△

②□□□□

・・・・

まとめ

 

②リンク、アンカー、アンカーのずれの設定までする

③これを毎回コピーして使う

 

 

point

私はフォーマットは作っていませんが

記事のコピーが出来るプラグイン Duplicate Post を使って

公開済みの記事をコピペして記事を書いています

とっても便利なプラグインですよ!

また title 、 class="anchor" は 単語登録しておくと便利です!

 

 

 

 

まとめ

 

今回は、目次専用のプラグインを使わず初心者の味方TinyMCE Advancedを使って簡単に目次を作る方法をご紹介しました!

専用のプラグインは便利ですが、あまりプラグインを増やしたくない人おすすめな方法です

また記事をコピーできるプラグインDuplicate Post合わせて使うと、とっても便利になりますよ

記事を時短サクッと書いていきましょう!

 

-wordpress

© 2020 maroroblog