ブログ運営

【初心者でもわかる】Table of Contents Plusの導入からカスタマイズまで紹介【目次設定】

 

こんにちは、れのる(@Blog624renoru)です

 

目次に使うプラグインと言えばTable of Contents Plusですが、使い方がわからない!カスタマイズできない!という方は多いはず。

そこで今回は初心者の方も満足でき、簡単にできるカスタマイズ方法をご紹介したいと思います。

ちなみに完成例はこちら

マネするだけなので、好印象の方は参考にしてみてね!

 

スポンサーリンク

Table of Contents Plusを使える状態にしよう

まずはTTable of Contents Plusを導入します。

手順

・Table of Contents Plusをインストール

・有効化

 

プラグイン > 新規追加をクリック。

 

すると下のような画面に来ます。

右上の記入欄に「Table of Contents Plus」と打ち込みましょう。

赤枠で囲まれたプラグインの今すぐインストールをクリック。

僕はインストールしたため、画像に表示されていません!

すると有効化ボタンがあるのでクリック。

 

これでTable of Contents Plus(目次)の導入は完了しました。

 

 

カスタマイズ方法

 

カスタマイズには2か所で設定する必要があります。

・プラグイン設定

・オプションカラー設定

 

プラグイン設定では目次の構造を設定していき、オプションカラー設定では目次の色や枠の形を設定します。

 

プラグインTable of Contents Plusを設定

画像の①~⑧までの番号と合わせてみていきましょう。

 

①最初の見出しの前(デフォルト)に設定してください。
これが1番違和感なく、読者にも見やすい位置となっています。

 

➁僕は見出しをできるだけ付けたいので「2」に設定しています。
ここは好きなようにしてもOKですが、「3」が王道ですね。

 

➂とりあえず「post」「page」にチェックを入れておきましょう。

 

➃目次は英語が嫌な方は、「目次」に設定するといいと思います。
気にならなければ、デフォルトのままでも大丈夫ですよ。

 

➄チェックを入れておきましょう。

 

 

アンカーリンクにジャンプではなくスクロールするとは、目次をクリックしたときの移動の仕方の違いです。
個人的にはスクロールがおすすめなので、ここにもチェックを入れましょう。

 

⑦75%がベストなサイズだと思います。
スマホで見ても見切れすることはないので安心です。

スマホで見ると、100%は見切れしてしまいます

 

⑧透明を選択しましょう。
これからカラー設定をしていきますので、カラーを合わせやすくなります。

 

これでプラグイン設定はおしまいです。
カラー変更しなくてもいい方は、これでおしまいです。

 

オプションカラー設定

外観 > カスタマイズをクリック。

オプションカラーをクリックし、下にスクロールすると目次プラグイン(すごいもくじ)をがあるのでクリックしてください。

 

すると次の画面に来ます。

 

僕が設定しているのは、赤枠の部分のみです。

基本(目次色/リスト数字/アイコン)、第1リンク文字色、ボーダー色、ボーダーの太さ(px)の4つのカラーを設定していきます。

好きなカラーを設定して、プレビューしてみてね!

HTMLカラーコード:Web色見本 原色大辞典でカラーを選ぶと、簡単ですよ。

 

最後に僕が使用しているカラーコードを載せておきます。

基本(目次色/リスト数字/アイコン)

#2288d6

第1リンク文字色

#f4e727

ボーダー色

#3579e8

このカラーコードをコピペすれば、僕と同じ目次の完成です。

 

今回はここまで。

 

-ブログ運営

© 2020 renolog Powered by AFFINGER5