それぞれの見出しに指定されているスタイルがどのようになっているかを、Chromeのデベロッパーツールなどで確認します。
例えば、関連記事の見出しであれば、このようになっています。
デザインをcssに追記
見出しのデザインができたら、子テーマのstyle.cssに、新しくデザインしたcssを追加します。（amp.cssにも追加、デザインにもよりますが）
このブログのサイドバーの見出しのcssは以下のようになっています。
.sidebar h3{
font-size: 16px;
background: linear-gradient(#0073e6, #0000cd);
color:#ffffff;
padding:7px 0px 3px 15px;
text-align:left;
margin-bottom: 15px;
margin-top: 20px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
・この部分は、背景色をグラデーションにしています。
background: linear-gradient(#0073e6, #0000cd);
・この部分は角を丸くしています。
border-radius: 2px;
サイドバーの見出しの他にもこのブログでは、以下の見出しを同じデザインにしています。
・関連記事の見出し ”related-entry-heading”
・コメント欄の見出し ”comment-title”
・記事下の「ランキング」の見出し ”rank-title”
＊「ランキング」は、COCOONのランキング作成機能を使ったもの。ウィジェット内で「<div class=”rank-title”>関連書籍</div>」のようにクラス指定しています。
従って以下のように複数指定しています。
.sidebar h3,
.related-entry-heading,
.comment-title,
.rank-title{
font-size: 16px;
background: linear-gradient(#0073e6, #0000cd);
color:#ffffff;
padding:7px 0px 3px 15px;
text-align:left;
margin-bottom: 15px;
margin-top: 20px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
}
＊因みに、ヘッダーメニューも以下のように記述して、見た目が近い感じなるようにしています。
.navi {
background: linear-gradient(#0073e6, #0000cd);
max-width: 1120px; margin: auto
}
.navi-in > ul .sub-menu li {
background-color: #0073e6;
}
.navi-in > ul .sub-menu a {
font-family:"Yu Gothic";
font-size: 12px;
}
.navi-in a {
font-family:"Yu Gothic";
color:#ffffff;
font-size: 14px;
}
.navi-in a:hover {
background-color: #0000cd;color: #fff;
}
