WordPress
その他
運営中のサブブログ
主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。
運営中のサブブログ
主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。
前回は目次プラグインの設定について解説しました。
ただデフォルトのデザインはあまりいただけないので、カスタマイズするCSSを解説します。
本文用の目次とウィジェット用目次それぞれ用意しました。
どれもコピペで使えます。
こちらはウィジェット目次です。
その前に、当サイトで使用しているテーマSWELLでは、デフォルトで目次機能が用意されています。
4つのデザイン、2種類のリスト選択、長い目次用の省略ボタンなど選ぶだけのシンプル機能です。
超おすすめテーマですので、ぜひ一度ご覧になってみてください。
まずは本文用の目次をカスタマイズしていきます。
大枠のデザインは、プラグインの外観設定から選択するだけで可能です。
目次の開閉ボタンは、折りたたみ表示にチェックをすると表示されます。
/* 目次枠線の太さ・角度・上下余白を調整 */
#ez-toc-container{
border-width: 2px;
border-radius:0;
margin:30px 0;
}
/* 目次タイトルの背景色と余白調整 */
#ez-toc-container .ez-toc-title-container, #ez-toc-container{
background: #3d3d3d;
margin:0;
padding: 0;
}
/* 目次タイトルの余白とカラー */
div#ez-toc-container .ez-toc-title {
display:block;
line-height:3;
padding-left:3em;
color:#fff!important;
}
/* 目次内の上下余白調整 */
#ez-toc-container .ez-toc-list{
margin:10px 0;
}
/* 見出しの下線 */
#ez-toc-container .ez-toc-list li{
display: block;
border-bottom:1px dashed #3d3d3d;
}
#ez-toc-container .ez-toc-list li:last-child {
border:0;
}
/* 目次開閉ボタン位置調整 */
.ez-toc-title-toggle{
position:absolute;
top:0;
left:-2%;
}
/* 目次開閉ボタンデザイン */
#ez-toc-container .ez-toc-js-icon-con {
border:none;
background:#fff;
border-radius:0;
width:33px;
}
/* 目次開閉ボタン下にテキスト挿入 */
#ez-toc-container .ez-toc-title-toggle:after{
position:absolute;
content:"閉じる";
top:2.5em;
left:2em;
font-size:12px;
color:#fff;
white-space: nowrap;
}
/* スマホ向けのサイズと位置調整 */
@media(max-width:500px) {
/* 目次タイトル */
div#ez-toc-container .ez-toc-title {
font-size:15px;
text-align:center;
padding-left:initial;
padding:5px 0;
}
/* 開閉ボタンの位置 */
#ez-toc-container .ez-toc-title-toggle{
left:-7%;
}}
調整する場合やいらないカスタムは、/* コメント*/
を参考に、変更するなり削除してください。
一応それぞれのコードを解説します。
#ez-toc-container{
border-width: 2px;
border-radius:0;
margin:30px 0;
}
2行目:枠線の太さ
3行目:枠線の角度
4行目:目次の上下余白
#ez-toc-container .ez-toc-title-container, #ez-toc-container{
background: #3d3d3d;
margin:0;
padding: 0;
}
div#ez-toc-container .ez-toc-title {
display:block;
line-height:3;
padding-left:3em;
color:#fff!important;
}
1行目と6行目を分けて書くのがコツです。
2行目:背景カラー
8行目:タイトルの高さ
9行目:開閉ボタン用のスペースを空けるため、タイトルを右側にズラす
10行目:タイトルカラー
#ez-toc-container .ez-toc-list{
margin:10px 0;
}
内側の余白は一般設定からも指定できますが、上下余白のみバランスが悪かったため、CSSで指定しました。
#ez-toc-container .ez-toc-list li{
display: block;
border-bottom:1px dashed #3d3d3d;
}
#ez-toc-container .ez-toc-list li:last-child {
border:0;
}
一番下だけ線が消えるように指定しています。
下線の種類は、お好みで変更してください。
.ez-toc-title-toggle{
position:absolute;
top:0;
left:-2%;
}
デフォルトは右側に設置してありますが、左側の方が実用的だと思いますので、位置を変更しています。
#ez-toc-container .ez-toc-js-icon-con {
border:none;
background:#fff;
border-radius:0;
width:33px;
}
サイズや背景を指定しています。
#ez-toc-container .ez-toc-title-toggle:after{
position:absolute;
content:"閉じる";
top:2.5em;
left:2em;
font-size:12px;
color:#fff;
white-space: nowrap;
}
デフォルトは開閉ボタンだと分かりづらいため、テキストを追加してクリックできることを示唆してみました。
@media(max-width:500px) {
div#ez-toc-container .ez-toc-title {
font-size:15px;
text-align:center;
padding-left:initial;
padding:5px 0;
}
#ez-toc-container .ez-toc-title-toggle{
left:-7%;
}}
スマホでは、タイトルを真ん中にし、フォントサイズを少し小さくしています。
それにともない、開閉ボタンも位置調整しました。
div#ez-toc-container .ez-toc-title {
color:#fff!important;
line-height:3;
padding-left:2em;
display:block;
}
#ez-toc-container .ez-toc-title::before{
position:absolute;
left:0.7em;
font-family: "FontAwesome";
content: "\f0ca";
}
番外編として、開閉ボタンを設置しない場合にアイコンを入れる方法を解説します。
4行目を2emに変更、7行目から先を追記してください。
アイコンを入れる場合は、プラグイン設定の折りたたみ表示のチェックを外してください。
アイコンは、Font Awesomeの最新バージョンを使用しています。content:""
内を変更すれば、お好きなアイコンを指定できます。
※.コードの前に「\」を入れるのを忘れずに。
サイト内で使えるようにするには、以下のコードを読み込んでください。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
バージョン6.5.1は2024年3月時点で最新のものです。
アップデートがあった際は、この数値を変更すれば新しいアイコンを使えます。
headタグに読み込ませる
当サイトテーマSWELLのように、テーマ側のカスタマイザーにhead項目があればそちらに貼り付けてください。
テーマ側にない方はFTPソフトなどで、親テーマから「header.php」ファイルを子テーマへコピーする必要があります。
headに読み込ませると、すべてのページに適用されます。
functions.phpから読み込む方法
function enqueue_scripts(){
wp_enqueue_style('fontawesome','https://use.fontawesome.com/releases/v6.5.1/css/all.css');
}
add_action('wp_enqueue_scripts','enqueue_scripts');
functions.phpも、すべてのページに適用されます。
ちなみに、当サイトテーマSWELLでは、最初からFont Awesomeを使用できます。
以下で目次に使えそうなアイコンをピックアップしました。
アイコン | コード |
---|---|
f0c9 | |
f03a | |
f0ca | |
f0cb | |
f0ae | |
f00b | |
f022 |
/* サイドバーの折りたたみボタンを消す */
.ez-toc-toggle{
display: none;
}
/* 目次タイトル前にアイコン */
.ez-toc .ez-toc-title::before{
font-family: "FontAwesome";
content: "\f0ca";
padding-right: 6px;
}
/* タイトルの調整 */
.ez-toc .ez-toc-title {
text-align: center;/* タイトルを真ん中へ */
padding: 2px;/* 内側の余白を調整 */
}
/* ウィジェット目次内の背景カラー */
#ez-toc-widget-container .ez-toc-list{
background: #f1f1f1;
}
/* ウィジェット目次内フォントカラー */
#ez-toc-widget-container .ez-toc-list a{
color: #fff;
}
/* h2見出しの調整 */
#ez-toc-widget-container .ez-toc-heading-level-2 a {
font-size: 15px;
}
/* h3見出しの調整 */
#ez-toc-widget-container .ez-toc-heading-level-3 a{
font-size: 14px;
}
/* h4見出しの調整 */
#ez-toc-widget-container .ez-toc-heading-level-4 a {
font-size: 13px;
}
/* 見出しの行間調整 */
#ez-toc-widget-container li{
line-height: 1.4;
}
/* 各見出しに下線を引く */
#ez-toc-widget-container li{
border-bottom: 1px solid #bbb;
}
#ez-toc-widget-container li:last-child {
border:0;
}
/* 見出しマウスホバー時のカラー変更 */
#ez-toc-widget-container .ez-toc-list a:hover{
color: #4285f4;
background: #efefef;
}
/* 目次サイズ固定&スクロールバーを表示 */
.ez-toc.widget h4+*{
max-height: 300px;/* 目次の高さ */
overflow-y:scroll;
padding:5px 0;
white-space: normal;
}
.ez-toc.widget h4+*::-webkit-scrollbar {
-webkit-appearance: none;
width:10px;/* スクロールバーの横幅 */
border-left:solid 1px #eee;/* スクロールバーの左側に線を引く */
}
.ez-toc.widget h4+*::-webkit-scrollbar-thumb {
background-color: #aaa;/* スクロールバーのカラー */
}
これくらいあれば、だいたい思い通りの目次ウィジェットになるかなと思います。
わかる方は/* コメント */
を参考に調整してみてください。
一応それぞれのコードの意味を解説します。
.ez-toc-toggle {
display: none;
}
プラグイン側の一般設定で、折りたたみ表示にチェックすると、サイドバーにも表示されてしまうため、上記コードで消しています。
.ez-toc .ez-toc-title::before{
font-family: "FontAwesome";
content: "\f0ca";
padding-right: 6px;
}
アイコンは、Font Awesomeの最新バージョンを使用しています。
種類や読み込み方法は、先ほどの解説を参考にしてください。
.ez-toc .ez-toc-title {
text-align: center;/* タイトルを真ん中へ */
padding: 2px;/* 内側の余白を調整 */
}
タイトルの位置と余白を調整しました。
フォントカラー、サイズ、太さはウィジェット設定から指定できます。
#ez-toc-widget-container .ez-toc-list{
background: #f1f1f1;
}
目次内の背景を変更する場合、次のフォントカラーと合わせると良いかと思います。
#ez-toc-widget-container .ez-toc-list a{
color: #fff;
}
先ほどの背景カラーと合わせて変更すると、良いでしょう。
/* h2見出しの調整 */
#ez-toc-widget-container .ez-toc-heading-level-2 a {
font-size: 15px;
}
/* h3見出しの調整 */
#ez-toc-widget-container .ez-toc-heading-level-3 a{
font-size: 14px;
}
/* h4見出しの調整 */
#ez-toc-widget-container .ez-toc-heading-level-4 a {
font-size: 13px;
}
階層ごとにフォントを小さくしています。
そのほか、カラーや太さ、背景なども指定できます。
#ez-toc-widget-container li{
line-height: 1.4;
}
デフォルトは1.6です。
私は少し狭くしていますが、このへんはお好みでどうぞ。
#ez-toc-widget-container li{
border-bottom: 1px solid #bbb;
}
#ez-toc-widget-container li:last-child {
border:0;
}
一番下の見出しだけ下線を消しています。
サンプルでは1本線ですが、他のborderタグを指定することもできます。
#ez-toc-widget-container .ez-toc-list a:hover{
color: #4285f4;
background: #efefef;
}
マウスを乗せたときの挙動です。
サンプルは背景とフォントカラーを変更しています。
.ez-toc.widget h4+*{
max-height: 300px;/* 目次の高さ */
overflow-y:scroll;
padding:5px 0;/* 目次内の余白 */
white-space: normal;
}
.ez-toc.widget h4+*::-webkit-scrollbar {
-webkit-appearance: none;
width:10px;/* スクロールバーの横幅 */
border-left:solid 1px #eee;/* スクロールバーの左側に線を引く */
}
.ez-toc.widget h4+*::-webkit-scrollbar-thumb {
background-color: #aaa;/* スクロールバーのカラー */
}
1行目のコードだけでもスクロール設定はできます。
7行目以降は、スクロールバー自体を微調整しました。
以上、Easy Table of Contentsの目次CSSを解説しました。
見出しの多い記事は、自然と目次も長くなるため、スクロールバーの設置は必須かなと思います。
以下では、設定方法も書きました。
この記事が気に入ったら
フォローしてね!
記事への質問等はこちらからどうぞ