こんにちは～
週末いかがですか～
こちらは今日はスタッフ来てくれていてプリンター修理してくれてました。
その脇で今制作中のジャンクプリンターマスターマニュアルの動画を撮影してました～
かなり細かく撮ってるので、これをみればばっちりジャンク修理できる内容目指して制作中です～
夕方からは完全オフ～
のんびりとします。
さて、今朝ブログを少しカスタマイズして目次機能入れました。
今日はそんな内容です～
このページの目次
目次作成
参考にしたのは以下のブログです。
【目次作成】WordPress目次プラグインTable of Contents Plusの使い方
このサイトは他にもホームページ制作やワードプレス情報満載なのでチェックしてみようと思ってます。
プラグイン入れると
このような目次が自動で過去記事につきます！
これ手動でやっていると思っていたのですが、自動で適応になるんですね。めっちゃ楽です。
詳しい設定方法は上部記事をご参照下さい。
デザインの変更
初期設定だとグレーな感じでマッチしていない感じでうわーって感じでした。
ディフォルトのやつがあっていないと感じた点
・背景色
・ボーダーの色
・横幅
・上下の間隔
これらを手直ししました。
背景色、ボーダーの色の変更
これはプラグインの設定画面から簡単に編集できました。
プレゼンテーションの「カスタム」を選択
背景色やボーダーの色を変更します。
ちなみに画像の色を採取するにはこのページが便利です。
こんな感じで画像をアップし、マウスをかざすと、色の採取が出来ます。
背景色を白にするとこんな感じ。ボーダーはテーマカラーの緑に合わせました。
横幅、上下の幅の変更
これはディフォルトだと
こんな感じでめっちゃ真ん中！ そして横幅の隙間あきすぎ！って思いました。
この変更はプラグインからは出来ないので、CSSを若干変更しました。
参考にしたのはこのブログ
Table of Contents Plus（TOC+）の目次を中央寄せにする方法
スタイルシートの変更は以下ページを参照下さい
テーマのスタイルシートの一番最後に
横幅の調整
toc_container {
width: 80%;
}
上下の間隔の調整
toc_container {
margin: 5em auto 7em!important;
}
を入れて調整しました。
横幅の調整 の
toc_container {width: 80%;
}
は100%にすると
こんな感じで崩れてしまうので、８０％に
追記：横幅はプラグインの設定から調節可能でした～笑
上下の間隔の調整は
toc_container { margin: 5em auto 7em!important;
}
なぜか適応されなかったので、 !important を付けることで強制的に適応させました。
こんな感じでカスタマイズしました～
自動で全記事に適応されるのでめっちゃ便利ですね～
表示の編集
表示位置変えたい場合
何も指定していないと、一番初めのH1の前に自動で挿入されます。
ただ、表示位置を変えたい場合もあります。
そのようなときは
[TOC]
このコードを希望の挿入箇所に差し込んでください。
特定の記事のみ挿入をしない設定にしたい場合
特定のページで特に目次を入れたくない場合の設定です。例えば、一日の雑記など目次をつけていると逆に違和感ある場合あります。
この目次はページの長い物やHOW TO系のページには向いているかなと思います。
この記述をページ内のどこでもいいので挿入してください。
画像なのは、この記述を入れるとこのページにも効いてしまうためです(笑)
その他参考サイト
英語サイトですが、参考になります。
今日の一曲
Norah Jones の「 Live from Austin TX」
ノラちゃんのライブです～
いつかNYあたりでノラの生ライブでもみたいな～
では週末まったりとすごしましょー
