WordPress|Cocoonで記事の見出し設定[備忘録]

WordPress

WordPressテーマ「Cocoon」のカスタマイズ、見出しについての備忘録です。
なんだか見出しのデザインが上手くいかないので、問題点を見つけて解決していきたいと思います。

スポンサーリンク

何がどう問題なのか

Cocoonデフォルトの目次を表示させるためにはH2見出しが記事にないといけないのですが……
現在の見出しがこちら。

H2の見出しだけ明らかにおかしくなっちゃっています。

変なところで改行されているというか、1行で表示されていない。
今回はこれをどうにかして、H2の見出しもかっこよくしていきたいと思います。

テーマエディタでCSSを確認

WordPressの「外観」→「テーマエディタ
のstyle.css でCSSを確認します。

こんな感じでどこもおかしいところはないはず……

と、必死にソースコードを探したところこんなものを発見。

絶対これのせいだ……

width:200pxとかいう余計な設定がされていますね。なんなんだこれは……
これを消したら正常に表示されました。
よかったよかった。

現在の見出しの設定とデザイン

というわけで、今の見出しの設定です。

CSS
.article h2 {
 color:  #444d53;/*文字色*/
  border: solid 3px  #444d53;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
}

.article h3 {
    color: #444d53;
    padding: .5em 0;
    margin-top: 40px;
    border-top: 3px solid #444d53;
    border-bottom: 3px solid #444d53;
}

.article h4 {
    color: #444d53;
    padding: .2em 1em;
    margin-top: 40px;
    border-left: 6px solid #444d53;
}

.article h5 {
    color: #444d53;
    margin-top: 40px;
    border-bottom: solid 2px #444d53;
}
.article h6 {
    color: #444d53;
    margin-top: 40px;
    border-bottom: solid 1px #444d53;
}

 

こんな感じになります↓

H2の見出しを囲んだデザインにしてみました。
シンプルイズベスト。

良い感じに見出しも整ったし、だいぶ統一感が出てきた気がします。

見出しのデザインについては、こちらのブログを参考にさせていただいています。
https://web-ashibi.net/archives/1899
https://saruwakakun.com/html-css/reference/h-design