ブログ-目次の作り方と見出しの装飾-WordPress

ブログは訪問者が心地よく閲覧できるように、見出しをつけて見た目にも美しくしたいものです。私のブログは昔の白黒テレビのように殺風景でした。皆さんの見出しはとても奇麗なので私もやってみました。また内容が一目でわかるように目次もあればよいですね。

追記　2018.1.19
下は Lion blog の目次です。

目次を表示

いつものようにネットで探します。
プラグインの Table of Contents Plus が人気で、自動的に目次を生成してくれます。自動とはいっても見出しが整然とつけられていないと表示はできません。

見出しは、見出し１～見出し６（今後はｈ１～ｈ６の数字で表現）まで分けられています。ｈ１が一番大きな見出しでサイトタイトルはこれが多いです。投稿文では主にｈ２とｈ３とｈ４を使っていて、このタイトルを自動で目次に生成させます。設定で「見出しを選択」項目から選べばｈ５、ｈ６も可能ですから、ブログの内容をみて決めてください。

プラグインの設定から目次生成まで、ネットにたくさん載っていますからそれを参考にしました。目次の生成位置はデフォルトで左端ですが、これを中央に表示させるのが大変でした。

CSSの追加フォームを作る

テーマTwenty Seventeen は、ＷＰ－外観－カスタマイズ－追加CSSが有りますが、ない場合は子テーマかプラグインを使って追加します。子テーマの作り方はこちらの記事を参考にして下さい。

プラグインは－新規追加からSimple Custom CSSを検索し、インストール後有効にします。ＷＰに戻ると、外観の中にカスタムCSSが追加されています。そこにCSSを追加します。

以下が追加CSSです

#toc_container {
 margin-left: auto;
 margin-right: auto;
 border-radius: 5px;
}

見出しの装飾

次に見出しの装飾ですが、ネットからコピペでカスタムCSSに追加したところ成功しました。

左側に赤で幅1mmの縦ライン

数字は自分の好みになるよういろいろ試しました。＃はカラーコードでネットに出ています。

h2 {
 position: relative;
 padding: .1em 0  0em .6em;
 border-left: 6px solid #FF0000;
}

タイトル文字の下に目立たない細い線

これも同じようにコピペして上記の下に貼り付けします。これも成功しました。

h2::after {
 position: absolute;
 left: 0;
 bottom: 0;
 content: '';
 width: 100%;
 height: 0;
 border-bottom: 1.5px solid #dcdcdc;
}

ここまでは良かったのですが、目次の下側とタイトルの間隔が狭く詰まった感じが直せませんでした。他のブログを見るとちゃんと隙間が空いています。私はCSSの内容を理解しないですぐコピペに走るタイプで、どこかに答えがないと何もできません。検索しまくりますがあまりにも簡単なのか全く出ていません。

目次との間隔を広げる

あきらめていましたが、昨晩　margin: 0 0 1.5em;　を見つけました。変更が一目でわかるように数字を3emに変更してＣＳＳに加えてみたところ、見出しの下に文字の3倍の隙間ができました。やった！と思いましたね。

最終的には以下のようにしました。

h2 {
 margin: 1.5em 0 1.5em;
 position: relative;
 padding: 1em 0 0em .6em;
 border-left: 6px solid #FF0000;
}

ようやく思い通りの位置にきて安心しています。
同じようにｈ３もカスタムCSSに追加します。
今度は青色にしました。

h3 {
 margin: 1.75em 0 1.5em;
 position: relative;
 padding: .1em 0 0em .6em;
 border-left: 6px solid #0000FF;
}
 h3::after {
 position: absolute;
 left: 0;
 bottom: 0;
 content: '';
 width: 100%;
 height: 0;
 border-bottom: 1.5px solid #dcdcdc;
}

h4 {
 margin: 2.0em 0 1.5em;
 position: relative;
 padding: .1em 0 0em .6em;
 border-left: 6px solid #66cdaa;
}
 h4::after {
 position: absolute;
 left: 0;
 bottom: 0;
 content: '';
 width: 100%;
 height: 0;
 border-bottom: 1.5px solid #dcdcdc;
}

まとめ

私は車のドライバーのように、皆さんが作ったマニュアルを使ってブログの改良をすれば、大概のことはやれます。でもあまりに簡単なことだと誰も書いてくれないので困ります。他の人のブログをたくさん読んで自分とどこが違うかを感じて、近づけるようにしたいものです。

注釈

注１CSS：カスケーディング・スタイル・シートの略で、HTMLと組み合わせて使用する言語です。サイト内のコンテンツ部分をHTMLで、デザイン部分をCSSで定義しています。
元に戻る

追記　4月6日

目次の枠線のコーナーにＲをつけました。
下記緑部追加。5Pxの数字を変えればRの大きさが変わります。

#toc_container {
 background:#f9f9f9;
 border:1px solid #aaa;
 border-radius: 5px;
 padding:10px;
 margin-bottom:1em;
 width:auto;
 display:table;
 font-size:95%;
}