「部品クラス」から「部品」→「帯見出し」で、このような帯見出しが作成されます。
(帯見出しの色は紫色を選択しています。)
でも、私の場合、左の部分に入れる画像がないんです。今のところ。
なので、左の灰色■の部分は削除します。そしてその下に文字入れ。
で、プレビューで見てみると、、
こんな感じ。
これ、私からするとこのように感じるんです。
なんかバランス悪いな、と。
タイトル下の余白をどうしても縮めたかったけれど、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)だけ余白が増えました。
今回は帯見出しの上部分のマージンをゼロにしたのですが、
また気になる点が出てきたら変えていこうと思います。