KAKI blog Written by KAKI

【超簡単】目次は「公式タグ」とプラグイン「RTOC」がおすすめ!【Manablog Copy】

ブログ運用

目次をおしゃれにしたい!Manablog Copyの公式タグも良いけど、他にも何かないかな?」

目次があると、必要な内容がどこにあるのか一目でわかるので、とても便利です!

僕たちもブログ記事を書いていて、おしゃれな目次だとテンションが上がります。

同じ「目次」を挿入するにも「おしゃれ」な方が、読者にとっても僕たちにとっても良いですよね。

そこでこの記事では、「Manablog Copyの公式タグ」と、プラグインの「RTOC」を使いながら、目次を上手に使って、満足度の高い記事を作る方法を解説していきます。

↓  ↓【Manablog Copy公式タグ】↓  ↓

本記事の内容

↓  ↓【RTOC】↓  ↓

あなたはどちらが好みですか?

それぞれにメリットがあるので、両方の良いとこどりをしながら、ブログライフを楽しんでいきましょう^ ^

スポンサードサーチ

1.  Manablog Copyの『目次タグ』の導入・使い方

「それでは一つずつ説明していきますね。手順通りに一緒にすれば完成できますので安心してください♪」

Manablog Copy『目次タグ』の導入方法

まず、Manablog Copyで公式に紹介されている目次タグを紹介しますね。

<p class=”point”><i class=”fa fa-check” aria-hidden=”true”></i> 目次</p>
<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『目次タグ』の使い方

1、「投稿画面」の「テキストエディタ」

2、先程の「目次タグ」を挿入したい場所で、「テキストエディタ」へ挿入

<p class=”point”><i class=”fa fa-check” aria-hidden=”true”></i> 目次</p>
<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>

3、「テキストエディタ」に「コード」が挿入されるので、これを編集していきます。
1行目の「本記事の内容」が「目次のタイトル」になります。

( ↓ 公開した画面。✔️(チェックマーク)は勝手に入ります。)

4、次に、「目次の内容」を編集します。

上記の画像のように、1章(赤枠)、2章(青枠)、3章(緑枠)の部分を編集します。同じ言葉を入れます。

「ビジュアルエディタ」では下の画像のように表示されます。

「プレビュー」では下画像のように表示されます。

「目次タグ」で「別の記事へリンク」させることもできる!

この標準目次タグの良いところは、目次としての機能だけではなく、「別の記事へリンク」させることもできます。

「ビジュアルエディタ」で青字になっているところをクリックすると、「リンクを挿入」することもできるんです!

例えば、マナブさんの「Manablog Copyの販売用記事」では、下のように使われています。

デモサイトと販売ページ(別の記事)にリンクできるようになっています。

このように、目次だけでなく、別記事へのリンクとしても使えると、使い方の幅が広がります。
今の段階では、こんなこともできるんだ!っていうくらいでオッケーです^ ^

「Manablog Copyの公式タグ」の説明は以上です。
最初は大変に思うかもしれませんが、慣れてしまえば、あっという間に設定できてしまいますので、まず使ってみましょう♪

2.  プラグイン『RTOC」の導入・使い方

次に、プラグイン『RTOC(Rich Table of Contents)』を紹介します。

目次のプラグインは色々あるのですが、僕は断然このプラグイン『RTOC』をおすすめします。

なぜかというと、理由は3つあります。

❶ 目次プラグインの中で「一番おしゃれ」
❷ 「自動」で目次を作成してくれる
❸ 「手動で設置場所を設定できる」という使い勝手の良さ

この3つのメリットが、このプラグインを選ぶ理由です。

プラグイン『RTOC」の導入(インストール)方法

それではさっそく、RTOCの導入(インストール)方法を紹介していきます。

「プラグイン」→
「新規追加」→
「RTOC」と入力→
「インストール」→
「有効」

以上です♪

プラグイン『RTOC』の設定方法

それでは、RTOCの設定方法を説明しますね。

RTOCをインストールすると、「管理画面の左側」に「RTOC設定」が出現しますので、クリックしましょう。

これからは、僕の設定をそのままお伝えします。参考にしつつ、自分好みに変更して下さいね。

基本設定

・目次のタイトル:目次
・目次を表示させるページ:固定ページのみ
・表示させる見出し設定:H3まで表示
・表示条件:見出しが個から表示「3」
・フォント設定:デフォルト

デザイン設定

・タイトルの表示設定:左寄せ
・H2のリスト形式:「01|H2 TITLE|番号」
・H3のリスト形式:「1.  H3 TITLE |番号」
・枠のデザイン:半透明
・表示アニメーション:フェード
・スムーススクロール設定:ON

プリセットカラー設定

定番カラー:サニーブルー

カラー設定

カラーはデフォルトのままです^ ^

応用設定

・目次に戻るボタン:ON
・目次に戻るボタンの位置:右寄せ
・目次へ戻るボタンのテキスト:目次へ
・上下調整:目次に戻るボタンを上下にずらす「30」
・除外する投稿ID:投稿記事の中で、除外したい記事を設定できます。(設定しなくてもよい)
・除外する固定ページID:固定ページの中で、除外したい固定ページを設定できます。(設定しなくてもよい)
・目次のデフォルト表示設定:最初から表示させる
・開閉ボタンの開くテキスト:OPEN
・開閉ボタンの閉じるテキスト:CLOSE
・プラグインのCSSを読み込まない:チェックしない
・7日間目次使用率を計測する:ON

※注意

・「デザイン設定」の、【H3のリスト形式】を「1.  H3 TITLE |番号」以外にすると、表示が崩れてしまいました。これは他のプラグインが干渉しているのかもで、僕だけかもしれません。

・「応用設定」の【プラグインのCSSを読み込まない】にチェックを入れると、表示が崩れてしまいます。

プラグイン「RTOC」の使用方法

使い方はとても簡単、自動で挿入するか、手動で挿入するかだけです。

「自動」の場合

『基本設定』で、「表示条件」の見出しの個数によって、「自動」で挿入されます。

僕は、見出しの数が「3個」以上の場合、そして「固定ページ」にだけ自動で挿入される設定にしています。
『目次を表示させるページ』の「投稿」にもチェックを入れていれば、投稿記事にも自動で挿入することができます。

僕の場合は、記事毎に標準目次タグとRTOCを使い分けたいので、「投稿」にはチェックを入れていないです。

「手動」の場合

RTOCは「手動」で、自分の好きなところに目次を挿入することができます。

手順は、
❶RTOCの管理画面→
❷「ショートコード」のタブをクリック→


❸「ショートコード」をコピー→


❹投稿画面のテキストエディター→
❺挿入したいところに、ショートコードを「ペースト」

です♪

自動と手動、そして標準タグとの使い分けができるようになると、すごく便利です!

次の章では、標準目次タグとRTOCの使い分けを解説します。

スポンサードサーチ

3.  「Manablog Copy目次タグ」と「RTOC」の使い分け

「Manablog目次タグとRTOC、どうやって使い分けたらいいんだろう?」

1章、2章で、それぞれの使い方を解説してきましたが、この章では、それぞれの具体的な使い分けを解説していきます。

使い分けに関しては、僕がどういう時に、標準目次タグを使っているのか、どういう時にRTOCを使っているのか、それをお伝えすると参考になると思います。

『Manablog Copy目次タグ』を使う場合

基本的には、僕はほぼ「Manablog Copy目次タグ」を使って記事を書いています。

なぜかというと、「リンクを外せる」からです。

???どういうことって思いますよねw
具体的にお伝えしますね。主には2つの理由があります。

①「リンクを外したい時」=上から順番に読んで欲しい時

「目次」というのは、「この記事には、このような内容が書いてありますよー!」というのが一目で分かる機能です。

そして、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

人気記事【資産運用】インデックス投資家が老後も失敗しない5つの理由を解説!

人気記事【結論】小金持ちになる方法は「毎月10万円を、年利5%で23年間運用」すること!