この記事では、【THE THOR（ザ・トール）】 のブログの目次の作り方の紹介をします。
ザ・トールには目次を自動で作成してくれる機能が装備されています♪
通常リンクとアンカーを使って目次と文章をつなぐのですが、 初めからしてくれます♪
そして、目次の「開閉機能」も付いています。 記事が長くなれば、目次も長くなってしまいます。
そんな時、目次が閉じれればいいですよね？
見たい人が目次を「開ける」のです。
応用編として、目次を自分好みに カスタマイズする方法も紹介しています♪
目次の枠線の変更や、 目次の番号を消すなど、 出来るだけ、コードは少なくと思っているので 最小限のカスタマイズを紹介しています♪
THE THOR【ザ・トール】目次を表示させる設定にする
THE THOR【ザ・トール】カスタマイズを選択
「外観」→「カスタマイズ」をクリックしてください。
THE THOR【ザ・トール】投稿ページを選択
「投稿ページ」をクリックした後、「目次設定」をクリックしてください。
THE THOR【ザ・トール】目次設定をします。
■目次を表示するか選択
デフォルトでは、「表示しない」が選択されています。 「表示する」を選択してください。
■目次を表示するための最小見出し数を設定
ここは見出しが何個以上あれば目次を作成するかの設定になります。
デフォルトで「1」が記入されているかと思います。
ここはこのまま触らないで置きます。
例えば、「3」にしたとします。
見出し行が「2」しかない時は目次は表示されません。
「ショートコード」で目次を選択した場合 目次ではなく「outline」とコードが表示されてしまいます。(;^_^A
プレビューを見ると「outline」の場所に目次が表示されているので大丈夫♪
■目次にひょうじする見出しのレベルを指定
見出しのどこまでを目次とするかです。 これはお好みですね(;^_^A
THE THOR【ザ・トール】目次の画像
例として、↓↓に目次の画像を張り付けてみましたが、 ｈ2タグから書いていなかった為に、なんと、 「0」スタート(-_-;) なんだこれは 状態です。。。
THE THOR【ザ・トール】 記事中に目次を表示させる
なにも設定しなくても、初めの見出し行の上に目次は表示されます。
もし、自分のすきな場所に表示させたい場合は、 「ショートコード」を使います。
目次を表示させたい場所をクリックしてください。
その後「ショートコード」の横の▼をクリックしてください。
そして、「目次」をクリックしてください。
これで、その場所に「目次」が表示されます。
THE THOR【ザ・トール】目次の外枠の大きさを変更する
デフォルトのままだと,幅は、目次の文字が少ないと幅の狭い目次になってしまいます。
すみません。
カスタマイズした目次の画像になっています(;^_^A
狭い幅の目次が左側によってるのは、私は好きではないので 幅を広げました。
これは幅が100％です。
THE THOR【ザ・トール】目次の幅カスタマイズのコピペ文
「外観」→「カスタマイズ」
下にスクロールして「追加CSS」をクリックしてください。
この画像の右側の場所に、したの「コピペ文」をはりつけて 上のオレンジボタン「公開」をクリックして下さい(^^♪
****************************コピペ文********************
.content .outline { width:100%; border: 2px solid #fa9c61; }
********************************************************
| width:100%; |
↑↑の文の意味を説明
この100％の数字部分を変更すると、幅が変更されます。 もし、100％よりも、狭い幅がお好みの場合は この数字を小さい数字に変更して下さい。
| border: 2px solid #fa9c61; |
↑↑の文の意味の説明
border: 2px ： ２ｐｘ
幅の線で囲います。
solid ：
線種を1本の実線にします。
#fa9c61 ：
線の色になります。
目次を囲うお線をどうするかはお好みでどうぞ♪
色を変えたいなら
【wordpress】文章の囲み枠で必要になる色のコードまとめ♪
で色のコードをコピペして変更してください。
周りを囲う線の種類を変えたいなら
ワードプレス【wordpress】文章をボックスで装飾♪簡単なやり方コピペOK
この↑記事の「3-3 ワードプレス囲み枠【ボックス】枠線の種類と色を指定」 に線種の名前と表示例を記載しましたので、1本線が嫌だな～という方はどうぞ♪
THE THOR【ザ・トール】目次の番号をカスタマイズのコピペ文
「グレーの四角に囲われてる番号」を「番号表示」だけに変更しちゃいましょう♪
****************************コピペ文********************
.content .outline__number{ background:#fff; color:#fa9c61; }
********************************************************
| background:#fff; |
↑↑の文の意味の説明
番号の文字の後ろの背景色を 白 に指定
| color:#fa9c61; |
↑↑の文の意味の説明 番号の文字色を オレンジ に指定
色を変えたいなら
【wordpress】文章の囲み枠で必要になる色のコードまとめ♪
で色のコードをコピペして変更してください。
THE THOR【ザ・トール】目次の番号を消したい時のコピペ文
THE THOR【ザ・トール】目次を表示させない方法
記事に目次を表示させるかさせないかは選択することが出来ます。
設定で「目次を表示する」を選択した場合は、デフォルトで目次が表示されます。
表示させたくない時は、投稿画面で下にスクロールしてください。
画面右側にある「個別非表示設定」の
□目次を非表示にする にチェックを入れてください♪
THE THOR【ザ・トール】サイドエリアに目次を表示させる方法♪
THE THOR【ザ・トール】の目次では、サイドエリアには表示できません。
サイドエリアに目次を表示させる場合はプラグインの力を借りましょう。
目次をサイドバーに表示させたい方は↓の記事で紹介しています♪
>>>THE THOR【ザ・トール】プラグインで追従サイドバーに目次を表示♪
THE THOR【ザ・トール】目次の作り方を紹介♪ まとめ
設定で「目次を表示する」を選択しておくと、記事ごとに「目次を表示」か「目次を非表示」かを選択することが出来ます。
選択できるので「目次を表示する」を選択しておく方をおすすめします(^^♪
ランキングに参加しているのでバナーをクリックしていただけると嬉しいです♪
私が個人でAmazonアソシエイトに応募して落ちましたが、 「もしもアフェリエイト」を通して申請したら合格しました。
もしもから申請をお勧めします♪
A8.netは広告主数・登録サイト数共に日本最大級のアフィリエイトサービスプロバイダーです。
ここもおすすめ♪
