見出しをスマートに？
エレガントテーマの見出し..デザインは好みに合うでしょうか？
サイトコンテンツにより...これでよいとする評価もあるでしょうけれど、もう少し
スマートだったらと思われるなら...？
またはサイトカラーと同じにしたい...カスタマイズ手順をご理解..説明後、書き換えの
コピーコードもお使いください。
h2 h3..調整概要
縦幅を狭める
(画像）..デフォルトの縦幅は60pxほどで太目枠ですね..
少しだけ...細くします...当サイトの見出しの縦幅参照...
スタイルシートの見出しタイトル一番上...
height: 45px;コードを追加してください...（数値調整で縦幅変わります）
/* 見出し
==================================================
*/
#main h2,
#main h3 {
background-color: #fbf7ee;
border-bottom: 2px solid #e5cfab;
margin: 0;
padding: 0;
height: 45px; // 縦幅指定追加行//
}
縦幅は狭まりましたけど、フォントが下位置につけていますので上に移動させます..
すぐ下の項目へ進み margin: -10px;を追記します......
#main h2 span,
#main h3 span {
color: #5f5555;
display: block;
font-size: 2rem;
line-height: 1.5;
padding: 8px 10px; //ここ書き換え...padding: 7px; //フォントの位置上//
position: relative;
z-index: 0;
margin: -10px;// フォント位置指示2//
}
これで終わりません..スマホサイズではずれが生じるのでメディアコードも一部書き換えます..
次にメディアコードも書き換えます..
スマホでのフォントずれを修正...
@media screen and (min-width: 768px) {
#main h2,
#main h3 {
margin: 0 0 10px;
}
#main h2 span,
#main h3 span {
font-size: 2.2rem;
line-height: 1.4;
padding: 17px;
}
#main div[id^="text"] > h2,
#main div[id^="text"] > h3,
#main div[id^="space"] > h2,
#main div[id^="space"] > h3 {
margin: 20px -12px;
}
ここの項目
#main h4 {
font-size: 2.0rem;
line-height: 1.4;
padding: 17; //ここを改行してます//
}
縦幅 フォントの位置調整..終わり...
フォントカラーの変更
...上項目では、フォントカラーも変えられます...
上項目の直下へ移動し、カラーコードを書き換える..白にするならFFFFFF...
見出しの背景カラーを変更する？
background-color: #fbf7ee; カラーコードを書き換える..
サイトカラーと同色にする際は、スタイルシート一覧のトップページへ進み以下コードを
コピーして張り替える...
このコードは当サイトのボディカラーより取り出してますので、別なカラーをお使いの
際は指定カラー記載を書き換えてください..
background-image: linear-gradient(to right, rgba(214, 99, 114, 0.87), rgba(240, 173, 173, 0.87) 75%, rgba(228, 139, 146, 0.87));
/*
==================================================
トップページ
==================================================
*/
#whatsnew {
ここです...
background-image: linear-gradient(to right, rgba(214, 99, 114, 0.87), rgba(240, 173, 173, 0.87) 75%, rgba(228, 139, 146, 0.87));
height: 60px;
overflow: hidden;
}
下部のボーダーラインカラーを変更する？
カラーコードを書き換える
border-bottom: 2px solid #e5cfab;
不要なら削除...です。
書き換えたコピー用コード
説明がうまくまとまりませんが、以下のコードは枠の背景だけサイトカラーに合わせれば
使えます..
/* 見出し
==================================================
*/
#main h2,
#main h3 {
background-image: linear-gradient(to right, rgba(214, 99, 114, 0.87), rgba(240, 173, 173, 0.87) 75%, rgba(228, 139, 146, 0.87));
border-bottom: 2px solid #e5cfab;
margin: 0;
padding: 0;
height: 45px;
}
#main h2 span,
#main h3 span {
color: #ffffff;
display: block;
font-size: 2rem;
line-height: 1.5;
padding: 7px;
position: relative;
z-index: 0;
margin: -10px;
}
メディアコード
@media screen and (min-width: 768px) {
#main h2,
#main h3 {
margin: 0 0 10px;
}
#main h2 span,
#main h3 span {
font-size: 2.2rem;
line-height: 1.4;
padding: 7px;
}
#main div[id^="text"] > h2,
#main div[id^="text"] > h3,
#main div[id^="space"] > h2,
#main div[id^="space"] > h3 {
margin: 20px -12px;
}
#main h4 {
font-size: 2.0rem;
line-height: 1.4;
padding: 17;
}
h4見出しの調整...少しだけ
画像...なんかいまいち？
すみません..あたしはｈ４見出し使っておりませんので、あまり理解できておりません..
わかるとこだけ...ご勘弁ください..
上項目から少し下へ...進みましょう...
行ごとにカスタマイズする際は上にならい書き換えの参考にしてください...
でも、すべてが反応するか...やや疑問？
ここですね
main h4 {
color: #5f5555; //フォントカラー//
font-size: 1.8rem;
line-height: 1.5;
margin: 8px auto 12px;
padding: 9px 0;
position: relative;
}
#main h4::before {
background: linear-gradient(to right, #ebc958, #d4aa72 36%, #ebc958);
bottom: 0;
content: '';
height: 2px;
left: 0;
position: absolute;
width: 100%;
}
カスタマイズ例...
h4デフォルトはパットしないデザインなので、h3みたく変えてみました..
シリウス優雅なTP
#main h4 {
//ここはサイトカラーのコードに書き換えてください//
background-image: linear-gradient(to right, rgba(214, 99, 114, 0.87), rgba(240, 173, 173, 0.87) 75%, rgba(228, 139, 146, 0.87));
color: #FFF;
font-size: 1.8rem;
line-height: 1.5;
margin: 8px auto 12px;
padding: 9px 0;
position: relative;
}
次にメディアコードも書き換えます..
スマホでのフォントずれを修正...
@media screen and (min-width: 768px) {
#main h2,
#main h3 {
margin: 0 0 10px;
}
#main h2 span,
#main h3 span {
font-size: 2.2rem;
line-height: 1.4;
padding: 17px;
}
#main div[id^="text"] > h2,
#main div[id^="text"] > h3,
#main div[id^="space"] > h2,
#main div[id^="space"] > h3 {
margin: 20px -12px;
}
ここの項目
#main h4 {
font-size: 2.0rem;
line-height: 1.4;
padding: 17; //ここを改行してます//
}
縦幅は、h2 h3の指定が受け継がれますので未記載でOK...