wordpressプラグイン(目次 CSS調整編)



1 CSSの調整

「Table of Contents Plus」で目次を投入したのはいいけど見た目がいまひとつなので適当にCSSを組み込みました。

1.1 編集の仕方

wordpressのダッシュボードから、概観>テーマの編集 で子テーマに入れます。
子テーマについてはそのうちかくかも・・?

1.2 追加したCSS

追加したCSSはこちら。ほとんど他サイトのコピペですが…。気持ちオリジナル要素あり。
importantはあまり使いたくないんだけど、普通に書いたら打ち消されたので。

h3 {
  position: relative;
  padding: .75em 1em .75em 1.5em;
  border: 1px solid #ccc;
}
h3::after {
  position: absolute;
  top: .5em;
  left: .5em;
  content: '';
  width: 6px;
  height: -webkit-calc(100% - 1em);
  height: calc(100% - 1em);
  background-color: #3498db;
  border-radius: 4px;
}
h3 span {
  color: black!important;
}
h4 {
  position: relative;
  margin-left: .5em;
  padding-bottom: .5em;
  border-bottom: 3px double #ccc;
}
h4 span {
  color: black!important;
}

1.3 段落毎の文字位置が気になる

これは課題ですね。h3以下のp要素とかって指定でどうにかなりそうです。(たぶん
あとヘッダー部の数字を目次だけじゃなく実際タイトル書いてるところにも表示したい(;ω;)









You may also like...