• ゲーム
    【とび森amiibo+】村を売却する方法、条件、金額の決まり方を徹底解説!
    2018年03月27日
  • 奈良のこと
    奈良市の新施設「ミ・ナーラ」のテナント情報!イオン系列なの?
    2018年04月19日
  • ブログ運営
    コピペで簡単にできるSANGOのカスタマイズ方法まとめ
    2018年02月09日
  • 妊娠・出産・育児
    男の育児休暇取得の流れと、実際に休んで思い知った3つのこと
    2018年03月26日
  • 副業・在宅ワーク
    iPadでイラストを描くなら、aibowの極細タッチペンがコスパ最高でオススメ!
    2018年03月26日
  • 奈良のこと
    にぼしこいし|奈良一煮干しの濃いラーメン店に行ってきた♡
    2018年03月25日
  • ブログ運営
    読まれるブログは読みたいブログだし、まずは存在を認識してもらうことが大切
    2018年02月08日
  • あずのおすすめ
    書評|フリーランスを代表して申告と節税について教わってきました。
    2018年02月28日
  • あずのおすすめ
    無名の主婦ブロガーがpolcaで10万円の支援をしてもらえた理由と今思うこと
    2017年08月16日
  • ゲーム
    【とび森】ゆうたろうが登場する魔法のランプの入手方法は?
    2018年03月27日
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 ;
}

▼ 癒し犬たろすけのLINEスタンプ ▼
sponsord by. @tatsuya141free

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

このブログ(あずさんち)で使っている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のカスタマイズ方法まとめ」にまとめているので、良ければ参考にしてみてください。

[kanren id=458] 最後まで読んでいただき、ありがとうございましたあず(yuuki_azusa ) でした。
投資に興味がある方はコチラも ▼
ブログ運営者さんにオススメ ▼

アシレーヌ
スポンサーリンク


WPカスタマイズの関連記事
  • SANGOの横長記事一覧カードをPC表示でも1列にするカスタマイズ
  • WordPress|投稿一覧画面に記事IDを表示するカスタマイズ
  • コピペでOK!記事タイトルの文字数カウンターを設置する方法
  • SANGOの内部リンクボックスにラベルをつけたりするカスタマイズ
  • コピペで簡単にできるSANGOのカスタマイズ方法まとめ
  • SANGOのサイドバーの横幅をコピペで変えるカスタマイズ方法
コメントを残す