皆さんこんにちは。リトマです。
先日、テーマをCocoonに新調しました。便利なカスタム機能、綺麗なサイトデザイン。ああ、なんで今までこのテーマにしなかったのだろうかと感激。でも、なんか待てよ…、スマホ版のホームロゴがデカくないか..？いや気のせいか..？いや、やっぱ少し大きいな..、どうにかして小さくできないものか..。
今日はそんなあなたに、Cocoonでホームロゴを小さくする方法を説明していきます。
スポンサーリンク
スマホ版ホームロゴが大きい？
今回問題になったホームロゴはこちら。
でけえ…。これでは全然記事が目立たないではないか…。本場タイの象ぐらいデカイぞ、これ。何とかして小さくならないか…。
ホームロゴを小さくサイズ変更。
先ず、CSSファイルにメディアクエリ（スマホ版だけを変更させる）を書いて、と。そこに、下のようにheightの指定を好きな大きさでします。
@media only screen and (max-width: 420px) {
.site-name-text > img{
height:100px;
}
}
これでいい感じになってるはず。チェックしてみよっと…、あれ？
横に伸びてる…。元々のwidthが継承されちゃってて自動で調整できなくなっているみたいです。これじゃちょっと不恰好なので、横の大きさを解放してあげましょう。widthをinitialと指定します。
@media only screen and (max-width: 420px) {
.site-name-text > img{
height:100px;
width:initial;
}
}
これでちゃんと比率もいい感じにまとまるはず…。
これで綺麗にまとまりました。
