松島 遼 松島 遼 

遼です。!(^^)!今回はワードプレスの目次の作り方。について説明するよ。

私のブログで使用している下のような目次をつくりますよ。 ^^

目次の作成方法

手順1 ワードプレスプラグインをインストールと有効化

ダッシュボードからプラグイン-新規プラグイン追加で

Table of Contents Plusと入力

 

目次を表示するプラグインをインストールします。

 

 

インストール後有効化をします。

 

Table of Contents Plus
記事に自動で目次を表示してくれるプラグイン

 

 

 

手順2 設定

有効化後、Table of Contents Plusの設定を行います。

ダッシュボードから設定-TOC+(Table of Contents Plusの略称)をクリック

 

 

設定1

以下のコンテンツタイプを自動挿入項目でPOSTとPAGEにレ点チェック

設定2

上級設定の見出しレベルh1~h3にレ点チェック

 

 

 

手順3 CSSコードを貼り付ける

下記のコードを
ダッシュボード-外観-カスタマイズ―追加CSSへ貼り付けてください。

#toc_container {
display: block !important;
background: #fff;
border: 2px solid #ccc;
font-size: 95%;
box-sizing: border-box;
line-height: 1.4;
margin-top: 20px;
margin-bottom: 20px;
padding: 1em 2em;
}
#toc_container .toc_title {
text-align: center;
background: #e6e6fa;
border-bottom: 2px solid #ddd;
padding: 0.4em 0;
}
#toc_container ul {
list-style: none;
margin-bottom: 0;
}
#toc_container ul li {
margin: 0;
padding-left: 0;
text-indent: 0;
}
#toc_container ul a {
display: block;
text-decoration: none;
color: #444;
border-bottom: 1px dotted #ddd;
font-size: 100%;
}
#toc_container .toc_list > li > a {
border-bottom: 2px solid #e6e6fa;
font-size: 110%;
}
#toc_container ul ul {
padding: 5px 0px 5px 10px;
}
#toc_container li {
margin-bottom: 0.8em;
padding-bottom: 0.2em;
}
/*スマホ対応*/
@media screen and (max-width: 413px)
{
#toc_container ul a {
font-size: 80%;}
#toc_container .toc_list > li > a {
font-size:95%;}
#toc_container {
padding:1em 1em;}
}
@media screen and (min-width: 414px) and (max-width: 500px)
{
#toc_container ul a {
font-size: 80%;}
#toc_container .toc_list > li > a {
font-size:95%;}
#toc_container {
padding:1em 1em;}
}

引用元:CSSコード原案はnaifix様のブログより

 

松島 遼 松島 遼 

時間に余裕があるようでしたら

このようにサイトのデザインも

こだわるようにしてくださいね

 

只今、無料相談受付中です。

実際に数々の情報商材テクニックを試してきた私が

おすすめする商材を知りたい方もこちらからご相談ください(^^)


⇒遼に無料で相談してみる


松島 遼松島 遼

お気軽に相談ください♪