fbpx
ブログノウハウ

Cocoonでスマホのヘッダーロゴが縦に間延びする場合の対処法(備忘録)

Cocoonでブログを作る際に、よく僕の頭を悩ませていたのがヘッダーロゴが間延び問題。

というのは、ヘッダーロゴを作成し、その画像をCocoon設定から当てはめると、スマホ(モバイル)から見た場合、縦に間延びしてしまうのだ。

ロゴの画像の縦サイズが既に決定されているため、横サイズが大きすぎたりすると、自然と画像自体も歪んでしまったりする。

その場合の対処法を書いていく

Cocoonのヘッダーロゴの間延び問題。

Cocoonのヘッダーロゴが縦に延びてしまう問題です。

言葉で説明するの難しいから、画像で説明します。

 

コチラが今回作成したブログ

 

ヘッダーロゴは少し長め。

これをスマホで見てみると、

こうなる。

ロゴだけが大きくなってしまって、さらには少し縦に伸びてしまっている。

これを調整しようと、ヘッダーロゴを小さくしてしまうと、PCから見た場合のヘッダーロゴも小さくなってしまう。

CSSを追記する。

ここで、ヘッダーロゴについてスマホで見た場合の

ロゴの縦サイズを調整するCSSを記述する。

↓コピペだけでOK

 

設定箇所は、Cocoonの[設定 > 外観 >カスタマイズ >追加CSS]

上記コードを加えると、スマホで見た場合のロゴは以下の様に変化する。

 

 

ん、スッキリしましたね。

どうしてもGoogleアドセンスに合格できない….

もしそんな悩みがあれば、私の方で記事を作成し、Googleアドセンスの取得代行を行いますよ。

どうやって記事を書けばいいか分からない。何が原因か分からない。

そんな悩みがある場合は是非ご連絡ください。

アドバイスが欲しい人でもOKです♪