SANGO・STORKの見出しデザインを変更するclass指定




いらっしゃいませ三姉妹育児に奮闘中の主婦、あず(oyakocreate)です。

SANGOやSTORKでは、見出しのデザインを変更するときに「h2」「h3」だけでCSSの指定をすると、記事一覧ページのデザインまで崩れてしまいます。

今回は、記事の中の見出しのみを指定するclassと、打ち消しする必要のある要素を紹介します。

わたし

うまく見出しデザインが変更できない人は参考にしてみてください。

SANGO・STORKの見出し変更方法

画像はSANGOの場合

SANGOやSTORKでは、記事一覧ページの記事タイトル部分にもh2要素が使われています。

そのため、h2 { }でデザインの指定をしてしまうと画像のように記事一覧のタイトル部分にも反映されてしまい、見た目が悪くなることもあります。

これを防ぐためには、記事内の見出し用のclassを指定してあげる必要があります。

h2見出しのデザイン変更の場合は.entry-content h2 { }、h3見出しデザイン変更の場合は.entry-content h3 { }と指定します。

打ち消しする必要のある部分

SANGOのデフォルトのh3

STORK・SANGOともに、デフォルトのh3見出しには文字の左に線が入るようになっています。

見出しのデザインを変更するときに、この線が邪魔な場合は、以下のコードをstyle.cssに書きましょう。

.entry-content h3 {
border-left : none ;
}

コピペ用見出しデザイン例

このブログ(あずさんち)で使っているh2見出しとh3見出しのコードを紹介しますので、デザインを考えるのが面倒な方はコピペして使ってください。

追記する場所は子テーマのstyle.cssです。

h2見出しはCSSで左に四角をデザインしています。

目を惹くデザインにすることで、重要な部分がわかりやすいようにしています。

/* h2見出しのデザイン変更 */
.entry-content h2{
position: relative;
padding: .5em .5em .3em 2em;
border-bottom: 3px solid;
border-color: #264b67;
font-size: 1.2em;
box-sizing: border-box;
color: #555555;
}
.entry-content h2:before {
content: "";
position: absolute;
background: #ffffff;
border: 1px solid;
border-color: #264b67;
top: 0;
left: .4em;
height: 12px;
width: 12px;
-webkit-transform: rotate(45deg);
}
.entry-content h2:after {
content: "";
position: absolute;
background-color: #264b67;
top: 1.2em;
left: .1em;
height: 8px;
width: 8px;
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}

h3見出しはデフォルトのデザインを元に、色やサイズを変えています。

h2見出しよりも目立たないよう、控えめなデザインを心がけています。

/* h3見出しのデザイン変更 */
.entry-content h3{
font-size: 1.1em ;
border-left-color: #264b67;
color: #555555;
margin-bottom: 1.5em;
}

見出しで自分のブログのオリジナリティを出そう

たかが見出しのデザインと思われるかも知れませんが、見出しが極端に大きすぎたり小さすぎたりしても、読者さんにとっては読みにくくなってしまいます

また、.entry-contentのclass指定をせずに記事一覧のタイトルデザインが崩れてしまっては台無しです。

小さなところから、読者さんに対する気配りを忘れないようにしましょう。

今までに書いたSANGOのカスタマイズ方法は「コピペで簡単にできるSANGOのカスタマイズ方法まとめ」にまとめているので、良ければ参考にしてみてください。

この記事はここまでです。もしお時間があれば、ぜひ他の記事も読んでいってくださいね。

あず(oyakocreate)でした

ブログのトップページへ