【超簡単】目次は「公式タグ」とプラグイン「RTOC」がおすすめ！【Manablog Copy】
「目次をおしゃれにしたい！Manablog Copyの公式タグも良いけど、他にも何かないかな？」
目次があると、必要な内容がどこにあるのか一目でわかるので、とても便利です！
僕たちもブログ記事を書いていて、おしゃれな目次だとテンションが上がります。
同じ「目次」を挿入するにも「おしゃれ」な方が、読者にとっても僕たちにとっても良いですよね。
そこでこの記事では、「Manablog Copyの公式タグ」と、プラグインの「RTOC」を使いながら、目次を上手に使って、満足度の高い記事を作る方法を解説していきます。
↓ ↓【Manablog Copy公式タグ】↓ ↓
本記事の内容
↓ ↓【RTOC】↓ ↓
あなたはどちらが好みですか？
それぞれにメリットがあるので、両方の良いとこどりをしながら、ブログライフを楽しんでいきましょう^ ^
スポンサードサーチ
１. Manablog Copyの『目次タグ』の導入・使い方
「それでは一つずつ説明していきますね。手順通りに一緒にすれば完成できますので安心してください♪」
Manablog Copy『目次タグ』の導入方法
まず、Manablog Copyで公式に紹介されている目次タグを紹介しますね。
<ul>
<li><a href=”#01″>1章</a></li>
<li><a href=”#02″>2章</a></li>
<li><a href=”#03″ >3章</a></li>
</ul>
<h2 id=”01″>1章</h2>
1章です
<h2 id=”02″>2章</h2>
2章です
<h2 id=”03″>3章</h2>
manablogではタグ打ちにより目次が挿入されています。
これをコピーして、「テキストエディタ」にペーストして、動作を確認していきましょう。
プラグイン「AddQuicktag」に登録して、すぐ使えるようにしておくと、とても便利です。
Manablog Copy『目次タグ』の使い方
１、「投稿画面」の「テキストエディタ」
２、先程の「目次タグ」を挿入したい場所で、「テキストエディタ」へ挿入
<ul>
<li><a href=”#01″>1章</a></li>
<li><a href=”#02″>2章</a></li>
<li><a href=”#03″ >3章</a></li>
</ul>
<h2 id=”01″>1章</h2>
1章です
<h2 id=”02″>2章</h2>
2章です
<h2 id=”03″>3章</h2>
３、「テキストエディタ」に「コード」が挿入されるので、これを編集していきます。
１行目の「本記事の内容」が「目次のタイトル」になります。
（ ↓ 公開した画面。✔️（チェックマーク）は勝手に入ります。）
４、次に、「目次の内容」を編集します。
上記の画像のように、１章（赤枠）、２章（青枠）、３章（緑枠）の部分を編集します。同じ言葉を入れます。
「ビジュアルエディタ」では下の画像のように表示されます。
「プレビュー」では下画像のように表示されます。
「目次タグ」で「別の記事へリンク」させることもできる！
この標準目次タグの良いところは、目次としての機能だけではなく、「別の記事へリンク」させることもできます。
「ビジュアルエディタ」で青字になっているところをクリックすると、「リンクを挿入」することもできるんです！
例えば、マナブさんの「Manablog Copyの販売用記事」では、下のように使われています。
デモサイトと販売ページ（別の記事）にリンクできるようになっています。
このように、目次だけでなく、別記事へのリンクとしても使えると、使い方の幅が広がります。
今の段階では、こんなこともできるんだ！っていうくらいでオッケーです^ ^
「Manablog Copyの公式タグ」の説明は以上です。
最初は大変に思うかもしれませんが、慣れてしまえば、あっという間に設定できてしまいますので、まず使ってみましょう♪
２. プラグイン『RTOC」の導入・使い方
次に、プラグイン『RTOC（Rich Table of Contents）』を紹介します。
目次のプラグインは色々あるのですが、僕は断然このプラグイン『RTOC』をおすすめします。
なぜかというと、理由は３つあります。
❷ 「自動」で目次を作成してくれる
❸ 「手動で設置場所を設定できる」という使い勝手の良さ
この３つのメリットが、このプラグインを選ぶ理由です。
プラグイン『RTOC」の導入（インストール）方法
それではさっそく、RTOCの導入（インストール）方法を紹介していきます。
「新規追加」→
「RTOC」と入力→
「インストール」→
「有効」
以上です♪
プラグイン『RTOC』の設定方法
それでは、RTOCの設定方法を説明しますね。
RTOCをインストールすると、「管理画面の左側」に「RTOC設定」が出現しますので、クリックしましょう。
これからは、僕の設定をそのままお伝えします。参考にしつつ、自分好みに変更して下さいね。
基本設定
・目次のタイトル：目次
・目次を表示させるページ：固定ページのみ
・表示させる見出し設定：H３まで表示
・表示条件：見出しが個から表示「３」
・フォント設定：デフォルト
デザイン設定
・タイトルの表示設定：左寄せ
・H２のリスト形式：「０１｜H２ TITLE｜番号」
・H３のリスト形式：「１. H３ TITLE ｜番号」
・枠のデザイン：半透明
・表示アニメーション：フェード
・スムーススクロール設定：ON
プリセットカラー設定
定番カラー：サニーブルー
カラー設定
カラーはデフォルトのままです^ ^
応用設定
・目次に戻るボタン：ON
・目次に戻るボタンの位置：右寄せ
・目次へ戻るボタンのテキスト：目次へ
・上下調整：目次に戻るボタンを上下にずらす「３０」
・除外する投稿ID：投稿記事の中で、除外したい記事を設定できます。（設定しなくてもよい）
・除外する固定ページID：固定ページの中で、除外したい固定ページを設定できます。（設定しなくてもよい）
・目次のデフォルト表示設定：最初から表示させる
・開閉ボタンの開くテキスト：OPEN
・開閉ボタンの閉じるテキスト：CLOSE
・プラグインのCSSを読み込まない：チェックしない
・７日間目次使用率を計測する：ON
※注意
・「デザイン設定」の、【H３のリスト形式】を「１. H３ TITLE ｜番号」以外にすると、表示が崩れてしまいました。これは他のプラグインが干渉しているのかもで、僕だけかもしれません。
・「応用設定」の【プラグインのCSSを読み込まない】にチェックを入れると、表示が崩れてしまいます。
プラグイン「RTOC」の使用方法
使い方はとても簡単、自動で挿入するか、手動で挿入するかだけです。
「自動」の場合
『基本設定』で、「表示条件」の見出しの個数によって、「自動」で挿入されます。
僕は、見出しの数が「３個」以上の場合、そして「固定ページ」にだけ自動で挿入される設定にしています。
『目次を表示させるページ』の「投稿」にもチェックを入れていれば、投稿記事にも自動で挿入することができます。
僕の場合は、記事毎に標準目次タグとRTOCを使い分けたいので、「投稿」にはチェックを入れていないです。
「手動」の場合
RTOCは「手動」で、自分の好きなところに目次を挿入することができます。
手順は、
❶RTOCの管理画面→
❷「ショートコード」のタブをクリック→
❸「ショートコード」をコピー→
❹投稿画面のテキストエディター→
❺挿入したいところに、ショートコードを「ペースト」
です♪
自動と手動、そして標準タグとの使い分けができるようになると、すごく便利です！
次の章では、標準目次タグとRTOCの使い分けを解説します。
スポンサードサーチ
３. 「Manablog Copy目次タグ」と「RTOC」の使い分け
「Manablog目次タグとRTOC、どうやって使い分けたらいいんだろう？」
１章、２章で、それぞれの使い方を解説してきましたが、この章では、それぞれの具体的な使い分けを解説していきます。
使い分けに関しては、僕がどういう時に、標準目次タグを使っているのか、どういう時にRTOCを使っているのか、それをお伝えすると参考になると思います。
『Manablog Copy目次タグ』を使う場合
基本的には、僕はほぼ「Manablog Copy目次タグ」を使って記事を書いています。
なぜかというと、「リンクを外せる」からです。
？？？どういうことって思いますよねw
具体的にお伝えしますね。主には２つの理由があります。
①「リンクを外したい時」＝上から順番に読んで欲しい時
「目次」というのは、「この記事には、このような内容が書いてありますよー！」というのが一目で分かる機能です。
そして、Web記事の目次のメリットの一つは、目次で読みたい内容をクリックすると、その場所まで自動的に読者を運んでくれる、という機能です。
これは、読者がそのWeb記事を「辞書」のような使い方をしている場合、調べたい内容をすぐ見ることができるので、すごく便利ですよね。
でも、リンクが付いていると、リンクの場所まで記事が飛んでしまうので、その間は飛ばしてしまうことになります。
なので、筆者として、上から順番に読んで欲しいとき、上から読んだ方が理解が深まる記事の場合、僕はこの「標準目次タグ」を使用しています。
リンクを外す方法は、とても簡単です。
❷リンクを外したい、青くなっているところをクリック→
❸リンクを全部削除
以上です。
リンクを外したタグを、プラグイン「AddQuicktag」に登録しておくと、さらに便利です^ ^
②「別の記事にリンクしたい時」＝販売ページにリンク
前述したように、標準目次タグは目次機能とは別に、「リンクを挿入する」事ができます。
読者のほとんどは、記事の最後まで読まないです。
なので、冒頭に販売リンクを設置することは、実は収益をあげる上では重要なんです。
目次に販売リンクを含めることができる、という選択肢があることが、今後記事を設計する上で便利なことも多くなるはずです。
今は、そうなんだ〜という程度でも大丈夫です^ ^
プラグイン『RTOC』を使う場合
プラグイン「RTOC」を使う場合は、前述したように「辞書」のような記事の場合、例えば「Manablog Copyタグ一覧」というようなページの場合、目次にリンクがあった方が読者が見やすいですよね。
もちろん、「Manablog Copy目次タグ」でも、一つずつ手動で設定すれば可能なのですが、「RTOC」は「自動」で目次を設定してくれるので、断然便利です。
なので、僕の場合は、「辞書」のような記事で、「目次の項目が多い」記事の場合、RTOCを使っています。
まずはやってみましょう！
【超簡単】目次は「公式タグ」とプラグイン「RTOC」がおすすめ！【Manablog Copy】ということで解説してきましたが、何となくはわかっていただけましたか？
これを読んで少しでも理解できたなら、あとは実践あるのみです。
やりながら、自分のやり方を作っていけば大丈夫です。少しずつで良いですので、一歩ずつ前に進んでいきましょう。
それでは、次の記事でお待ちしています^ ^
追記
Manablog Copyで、「サイドバーを追従させた目次」は実装できませんでしたw
プラグイン「Q2W3 Fixed Widget」、「Table of Contents Plus」を導入したり、CSSを編集したりしましたが、今の僕では難しかったです。また今後実装できたら追記しようと思います。
そもそも、マナブさんが追従する目次を実装してないので、大丈夫でしょうw
人気記事【資産運用】インデックス投資家が老後も失敗しない５つの理由を解説！
人気記事【結論】小金持ちになる方法は「毎月１０万円を、年利５％で２３年間運用」すること！