帯見出しのマージンをカスタマイズ

「部品クラス」から「部品」→「帯見出し」で、このような帯見出しが作成されます。
(帯見出しの色は紫色を選択しています。)

でも、私の場合、左の部分に入れる画像がないんです。今のところ。
なので、左の灰色■の部分は削除します。そしてその下に文字入れ。

で、プレビューで見てみると、、

こんな感じ。

これ、私からするとこのように感じるんです。

なんかバランス悪いな、と。

タイトル下の余白をどうしても縮めたかったけれど、deleteでは消せないし、
これは「帯見出し」自体を変更しないといけないんだと気づきました。

ということで、カスタマイズ。

「帯見出し」の条件は下記ファイルに書いてありました。

/wp-content/themes/wp-alpha/modules/modules.css

今までファイルを直接上書きしていたのですが、
バージョンアップされるとまた変更し直さないといけなくなるため、
子テーマの方に必要部分をコピーして、そこを変更します。

「modules.css」ファイルの、「帯見出し」とコメントされたところに
下記内容が記されているのでこれをコピー。
子テーマの「style.ccs」ファイルに貼りつけます。

div.myd-subheader–bar {
padding: 10px;
margin: 30px 0 15px;
font-size: 21px;
font-size: 2.1rem;
line-height: 1.333;
}

 

子テーマの「style.css」は、サイドバーの「外観」→「テーマの編集」をクリックして
開いた画面の、コメントの下部分に追記するかたちで編集します。

一応「Alpha Child: Stylesheet(style.css)」となっているのを確認。
もしも親テーマになっていたり、「function.php」ファイルが選択されていたら、
右のところから選択して変更します。

今回はpaddingとmarginの部分を下記のように変更してみました。
帯見出しの文字の左側にも少しだけスペースが欲しいと思ったので、それも付け加えました。

「!important」は、親テーマよりもこちらを優先させるという意味のようです。

div.myd-subheader–bar {
padding: 10px 15px !important;  ←帯と見出し文字の配置(スペース)を調整。上下:10px、左右:15px。
margin: 0px 0px 30px !important;  ←帯見出しの上:0px 左右:0px 下:30px
font-size: 21px;
font-size: 2.1rem;
line-height: 1.333;
}

これで下記のような表示になりました。
わかりずらいですが、文字の左部分も少し(15px)だけ余白が増えました。

今回は帯見出しの上部分のマージンをゼロにしたのですが、
また気になる点が出てきたら変えていこうと思います。