iPadでイラストを描いてます♡
WPカスタマイズ

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

▼ 楽しくブログを運営したいあなたに
▼ 英語に興味のあるあなたへ

こんにちは✨
主婦ブロガーのあず(yuuki_azusa )です。

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のカスタマイズ方法まとめ」にまとめているので、良ければ参考にしてみてください。

あわせて読みたい
コピペで簡単にできるSANGOのカスタマイズ方法まとめ WPテーマをSANGOに変えたのをきっかけに、カスタマイズにめちゃくちゃ力を入れています。 SANGOを使っている人のお役に立...

あず(yuuki_azusa ) でした
おしまーい。

有料テーマを1つだけ買うなら

20万円以上を有料テーマ購入に使った私が、「1つだけ」有料テーマを購入したいあなたにおすすめ!

Diver」なら、WordPress初心者でもブログもアフィリエイトサイトも思いのままに作れます。

詳細ページ公式ページ

ABOUT ME
あずさん
あずさん
7歳・2歳・1歳の娘がいる主婦ブロガーです。「あずさんち」では自分の経験を元に、今後同じ悩みを持った主婦やママの助けになるようなブログを書いていきます。在宅ワークという働き方の選択肢を広めたい!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です