ロゴ
【note:検索上位を狙うブログ理論】一騎当千SEO

【マナブログコピー(WordPressテーマ)】目次の追加設定

外観デザイン設定

こんにちは、ごま吉(@Lv1gomakichi)です。

この記事では、投稿記事に目次をつけるための設定を学ぶことができます。

Manablog Copy 目次の追加設定

このような目次が出来上がります

プラグイン『Table of Contents Plus』の導入

プラグインを使って記事の各項目へのジャンプをスムーズにするための目次を作ります。

見出し(H2、H3)を設定した際に自動的に目次が表示されるようにカスタマイズできます。

プラグインは、『Table of Contents Plus』を活用します。
※プラグインは管理画面プラグイン新規追加TOCで検索して画面中間くらいに出ます。


プラグインをインストールした後、以下の設定をします

  • 表示条件→3つ以上の見出しに
  • コンテンツタイプ→postのみチェックを入れる
  • y見出しテキスト→この記事の目次
  • 階層表示→チェック入れる
  • 番号振り→チェックを入れる
  • 上級者向け表示をクリック
  • CSSファイルを除外→チェックを外す
  • 見出しレベル→h2h3のみチェックを入れる

番号振りはお好みで外してもOKです。

CSSの設定

CSSの設定は以下です。
カスタマイザー追加CSSを開きます。

#toc_container {
  margin-bottom: 40px;
	  margin-left:auto;
		  margin-right:auto;
	width:90%;
	margin-top:50px;
  padding: 15px 20px;
  background: #fff;
  border: 5px solid #F7F7F7;
  border-radius: 2px;
  color: #666; 
   text-align: center;
}

#toc_container .toc_title {
    text-align: center;
  margin-bottom: 35px;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0px;
  border-bottom: 2px solid #dedede; }

#toc_container ul {
border: initial;

}

#toc_container li {
  position: relative;
  margin-bottom: 15px;
	 margin-right:10px;
  margin-left: 6px;
  line-height: 1.3em; 
  border:solid 0px;
	margin-top:10px;

}

#toc_container li:before{content:"»";
display:inline-block;width:1.5em;
	color:#3379B7;
	margin-left:0em;
margin-right:-0.7em;
}

設定は以上です。

後は記事投稿した際に見出し(H2、H3)を設定すると自動的に目次が追加されていきます。

文字の細い目次にする(追記:2019年12月19日)

上記のCSSを下記に差し替えします。

#toc_container {
  margin-bottom: 40px;
	  margin-left:auto;
		  margin-right:auto;
	width:90%;
	margin-top:50px;
  padding: 15px 20px;
  background: #fff;
  border: 5px solid #F7F7F7;
  border-radius: 2px;
  color: #666; 
   text-align: center;

}

#toc_container .toc_title {
    text-align: center;
  margin-bottom: 35px;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0px;
  border-bottom: 2px solid #dedede; }

#toc_container ul {
border: initial;
margin-bottom:50px;

}

#toc_container li {
  position: relative;
  margin-bottom: 15px;
	 margin-right:10px;
  margin-left: 6px;
  line-height: 1.3em; 
  border:solid 0px;
	margin-top:10px;

}

#toc_container ul li:before{content:"»";
display:inline-block;width:1.5em;
	color:#3379B7;
	margin-left:0em;
margin-right:-0.7em;
}

#toc_container a {
	font-weight:normal;
	line-height:10px;
}

画像提供:Freepik – jp.freepik.com によって作成された background ベクトル



\将来につながるプログラミング/

エンジニアとして活躍したい人
プログラミング未経験でも安心
WordPressにもっと詳しくなれる
無料体験レッスン受講後に受講料が1万円引に!




注目こちらも合わせてどうぞ▼
アフィリエイトを始めるための手順を紹介しています。マナブログコピーのカスタマイズが終わったら『ASP登録』をしましょう。

note


注目こちらも合わせてどうぞ▼
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。マナブログコピーと合わせて運用すると効果大です。

note

人気記事【マナブログコピー(WordPressテーマ)】文字装飾プラグインの設定