Cocoonでブログを作る際に、よく僕の頭を悩ませていたのがヘッダーロゴが間延び問題。
というのは、ヘッダーロゴを作成し、その画像をCocoon設定から当てはめると、スマホ（モバイル）から見た場合、縦に間延びしてしまうのだ。
ロゴの画像の縦サイズが既に決定されているため、横サイズが大きすぎたりすると、自然と画像自体も歪んでしまったりする。
その場合の対処法を書いていく
Cocoonのヘッダーロゴの間延び問題。
Cocoonのヘッダーロゴが縦に延びてしまう問題です。
言葉で説明するの難しいから、画像で説明します。
コチラが今回作成したブログ
ヘッダーロゴは少し長め。
これをスマホで見てみると、
こうなる。
ロゴだけが大きくなってしまって、さらには少し縦に伸びてしまっている。
これを調整しようと、ヘッダーロゴを小さくしてしまうと、PCから見た場合のヘッダーロゴも小さくなってしまう。
CSSを追記する。
ここで、ヘッダーロゴについてスマホで見た場合の
ロゴの縦サイズを調整するCSSを記述する。
↓コピペだけでOK
@media screen and (max-width: 480px){
.logo img {
height: 70px !important; /* スマホ時のロゴの画像タテサイズ */
margin: .5em auto;
}
}
設定箇所は、Cocoonの[設定 > 外観 >カスタマイズ >追加CSS]
上記コードを加えると、スマホで見た場合のロゴは以下の様に変化する。
ん、スッキリしましたね。