TCDテーマ「Be」の見出しをカスタマイズする方法

こんにちは、まるりです。

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」を使う方が、今後、もっと増えると嬉しいです。