Cocoonでホーム画面のロゴを小さくしたい!スマホでのロゴサイズ変更方法。

スポンサーリンク

皆さんこんにちは。リトマです。

先日、テーマを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;

}

}

これでちゃんと比率もいい感じにまとまるはず…。

これで綺麗にまとまりました。

スポンサーリンク
スポンサーリンク
ブログ運営
スポンサーリンク
/ フォローする /
リトマトリクス