更新しましたの太いラインを狭める
トップページでは、エントリーページを更新するとヘッダー画像下にボディカラーと同色
のラインが表示されます...
？？？を更新しました..と最新情報をお知らせする仕様なんですが、ラインの縦幅が
なんともふと目でスマートさに欠けるのです..
カテゴリー、エントリーページでもラインは表示されますが、こちらは細めでいい感じ..
上を見てくださればご理解いただけますね...
せっかくの高機能テンプレートもこれ一つでイメージダウン...そこまでいかなくとも
なんとなく太すぎは見た目によくない...
これです...
では、細くするにはどうすれば？ですが、細くするのではなく...少し位置を下げるという
手順で進めます事、ご了承願います。
やりようは簡単..
スタイルシートを開いてください..
以下の箇所までスクロール
==================================================
トップページ
==================================================
#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;
}
/*ここに以下コードを張り付ければ確認できます...それだけ */
#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));
max-height: 55px;
overflow: hidden;
}
帯ラインの下げる位置調整は、max-height: 60pxの数値変更...
固定位置を少し下げただけ...更新しましたのラインも少し上にと思うのですが、
下には下がるものの上には動いてくれません..
後ほど調整してみますね...
アバウト
上項目とほとんど同じでしょう？
異なるのは、 height: 60px;と max-height: 60px;だけですね..
最初は、上項目でmax-height: 60px;と書き換えたのです..
確かにパソコンでは細くなるが確認できましたけどスマートフォンのサイズでは..
.表示されなくなる症状..
スマートフォンサイズに合わせるメディアコード内に記述を追加してもダメ？
それではと二つの項目で一つはそのまま残す...もう一つ改変済みをダブル配置とした
ことでスマートフォンでも...正常に表示される..に至りました。
以降、追加することありましたら書き加えます。
