【CSS】目次のデザインをSANGO風に変更するたった１つの方法

2020 12/19

2020.12.19

どうも、ダルメです。

今回は、ワードプレスの目次をSANGO風に改造したいと思います。

目次プラグイン「TOC+」で利用可能です。レスポンシブ、CSSのコピペだけで使うことができます。

ダルメ

では、ごらんください。

完成したもくじ

本記事では上記のようなもくじを自動で作成できるようにします。

もくじの作成手順

目次作成用のプラグインを入手します。

方法は以下の通りです。

TOC+をダウンロード

① TOC+を以下からダウンロードします。

TOC+をダウンロード

② 「プラグイン」→「新規追加」の順で進んでいきます。

③ 「プラグインのアップロード」→ファイルの選択でZip形式の「table of contents plus」をアップロードします。

④ 最後に有効化して作業完了です。

有効化←クリック

TOC+を設定する

①ダッシュボード画面にて「設定」→「TOC+」で開きます。

②TOC+の基本設定を行います。

基本的に画像の通りで問題ありません。

位置→目次の表示される位置を表します。
表示条件→条件を満たしたときに目次が表示されます
以下のコンテンツに～→目次を表示したいコンテンツを選びます。
見出しテキスト→目次に表示されるテキストの編集です。
開閉ボタンの名前を変えられます。
階層表示→h2,h3タグで見分けがつくようにします。
番号振り→目次リストを箇条書き→番号に変更します。
瞬間移動→スクロール移動に切り替わります。
目次全体のサイズを変更できます。

以上で設定は完了です。

もくじデザインをSANGO風に変える

追加CSS

ワードプレス有料テーマ「SANGO」に似た目次ボックスにデザインを変えます。

変更の手順は以下の通りです。

手順1

CSSをコピー

CSSをコピーします。

↓コピー用のCSSコード

SANGO風もくじコードをみる

追加CSSへコピペ


/*--もくじ背景色、影追加--*/
#toc_container {
    padding: 10px 20px 30px;
    margin: 5em 0;
    color: #2f2f2f;
    background: #f9f9f9;/*背景色*/
	 border-top: solid 5px #f29073;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* 表示／非表示トグル */
#toc_container .toc_toggle a{
	font-size:13px;
	font-weight:400;
	padding:2px 4px;
}

/*--もくじ文字サイズ変更--*/
#toc_container .toc_title {
	font-weight:700;
	margin:10px 0;
	font-size:20px;
	color:#f29073;
	position:relative;
	left:5px
}
/*--もくじ横のアイコン追加--*/
#toc_container .toc_title::before{
  font-family: "Font Awesome 5 Free";
	  content: '\f0ca';
  font-weight: 900;
  font-size:23px;
	color:#FFF;
	text-align:center;
	border-radius:50%;
	background-color: #f29073;
  width: 50px;
  height: 50px;
  display: inline-block;
	line-height:50px;
	position:relative;
	left:-5px;
}

/*小見出し*/
#toc_container ul a {
	display: inline-block;
	text-decoration: none;
	color: #444;
	font-size: 14px;
}
 
/*大見出し*/
#toc_container .toc_list > li > a {
	font-size: 16px;
	font-weight:bold;
}
/*--文字色変更--*/
#toc_container ul a {
	display: inline-block;
	text-decoration: none;
	color: #191919;

/* レスポンシブ設定(667px幅以下) */
@media only screen and (max-width: 667px){
	#toc_container{
		padding:20px 3vw;
		min-width:auto;
		width:100%!important;
	}
	#toc_container p.toc_title + ul.toc_list{
		padding:20px 0 0;
	}
	#toc_container ul.toc_list > li > ul{
		margin-left:30px;
	}
}

手順2

追加CSSを開く

ブログのホーム画面から「カスタマイズ」→「追加CSS」の順に開きます。

手順3

CSSを張り付け

CSSを張り付けて保存します。

以上の手順でSANGO風のデザインが適用されます。

コピペ用CSSの変更

以下の赤字部分の色を変更することで色のカスタマイズが可能です

SANGO風もくじコードをみる

追加CSSへコピペ


/*--もくじ背景色、影追加--*/
#toc_container {
    padding: 10px 20px 30px;
    margin: 5em 0;
    color: #2f2f2f;
    background: #f9f9f9;/*背景色*/
	 border-top: solid 5px #f29073;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
/* 表示／非表示トグル */
#toc_container .toc_toggle a{
	font-size:13px;
	font-weight:400;
	padding:2px 4px;
}

/*--もくじ文字サイズ変更--*/
#toc_container .toc_title {
	font-weight:700;
	margin:10px 0;
	font-size:20px;
	color:#f29073;
	position:relative;
	left:5px
}
/*--もくじ横のアイコン追加--*/
#toc_container .toc_title::before{
  font-family: "Font Awesome 5 Free";
	  content: '\f0ca';
  font-weight: 900;
  font-size:23px;
	color:#FFF;
	text-align:center;
	border-radius:50%;
	background-color: #f29073;
  width: 50px;
  height: 50px;
  display: inline-block;
	line-height:50px;
	position:relative;
	left:-5px;
}

/*小見出し*/
#toc_container ul a {
	display: inline-block;
	text-decoration: none;
	color: #444;
	font-size: 14px;
}
 
/*大見出し*/
#toc_container .toc_list > li > a {
	font-size: 16px;
	font-weight:bold;
}
/*--文字色変更--*/
#toc_container ul a {
	display: inline-block;
	text-decoration: none;
	color: #191919;

/* レスポンシブ設定(667px幅以下) */
@media only screen and (max-width: 667px){
	#toc_container{
		padding:20px 3vw;
		min-width:auto;
		width:100%!important;
	}
	#toc_container p.toc_title + ul.toc_list{
		padding:20px 0 0;
	}
	#toc_container ul.toc_list > li > ul{
		margin-left:30px;
	}
}