こんにちは、まるりです。
TCDテーマの「Be」はとても素敵なデザインですが、記事本文の見出しは、とてもシンプルです。見出しをもっと目立たせるために、カスタマイズすることにしました。
下記に、私が実践したカスタマイズ方法をご紹介します。
TCDテーマ「Be」の見出しカスタマイズ方法
まず、「TCDテーマオプション」から、「基本設定」を選びます。
「基本設定」画面を下の方にスクロールすると、「カスタムCSS」という欄があるので、ここに見出しをカスタマイズするためのCSSコードを追加します（下記 画面に記載のコードは、一部分のみです）。
私が追加したCSSは、下記の通りです。ご使用頂いても大丈夫ですが、必ず上記カスタムCSS欄にご使用いただき、テーマファイルを直接、変更しないようにお気をつけください。
（ご参考）当サイトの追加CSSコード
.p-entry__article h2 {
background: #FCECEA;
box-shadow: 0px 0px 0px 5px #FCECEA;
border: dashed 2px white;
padding: 0.2em 0.5em;
}
.p-entry__article h3{
color: #ffb2ae;/*文字色*/
/*線の種類（点線）2px 線色*/
border-bottom: dashed 2px #ffb2ae;
}
.p-entry__article h4{
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #ffb2ae;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #ffb2ae;/*左線*/
}
注意点
h2、h3、h4 の前に、「.p-entry__article 」を付けないと、トップページのデザインにも影響が出てしまいます！「.p-entry__article 」を付けることで、記事本文にのみ、見出しカスタマイズが反映されます。
参考にさせて頂いたサイト①
見出しデザインは、サルワカ様のサイトを参考にさせて頂きました。こちらのCSSコードを、色のみを変えて、更に「ｈ２」「ｈ３」「ｈ４」の前に「.p-entry__article 」を付け加えています。
参考にさせて頂いたサイト②
「.p-entry__article 」を付けないと、トップページまでデザインが変わってしまう原因と対処法については、こちらのサイトを参考にさせて頂きました。
まとめ 見出しをカスタマイズして、「Be」がより素敵に
見出しカスタマイズ方法を探したところ、「Be」についての記事が少なかったので、こちらの記事を作成致しました。おしゃれで可愛いテーマ「Be」を使う方が、今後、もっと増えると嬉しいです。
[contact-form-7 id=”24″ title=”お問い合わせフォーム”]
