フッターロゴが潰れていたので直してみた

カスタマイズ

デフォルトで気になったのと言えば、フッターロゴの大きさ。

大きさというか縦横比か。

ヘッダーロゴを設定すると自動的にフッターにも表示されるのは親切なんだけどね。

ぼくのブログだと↓のように表示されました。

左右から圧力がかかっているかのように潰れている><

今回はこれを直していきます。

原因は?

CSSを見てみると、

画像を囲うdivにはmax-width: 120px;が。

画像自体にはheight: 50px;という指定が。

これはどっちかに絞って縦横をしてしてあげた方がいいかな。

汎用性を持たせようとすると、ここではみ出ないようにとかいろいろ気を遣うの、とても共感できますorz

ぼくも「もしここでこんな設定をされたら崩れないかな?」というのはしょっちゅう考えているので。

CSSを追加して修正

2通りの修正案があると思います。

上書き修正するCSSとしては、

.footer-bottom-logo .logo-image {
	max-width: 100%;
}

または、

.footer-bottom-logo img {
	height: auto;
}

このどちらか。

それぞれデフォルトで指定していたものを打ち消す指定となっています。

とりあえずは、このどちらかをカスタマイザーの追加CSSにコピペすれば修正完了です。

原因さえ分かればとっても簡単♪

修正後

ドーン!

無事潰れずに表示されたとさ。

ネズミさん、ちょっと太ったかな(笑

あとがき

この症状は後々修正というか仕様変更というか、アップデートされる可能性があります。

それまでの間だけど、同じ悩みを持つ人がもしいれば・・・。

cocoonデフォルトのスキンはシンプルなのはとっても良いと思う。

特にカスタマイズする時には、奇抜なデザインだとやりにくいからね。

最近記事を書いていて感じたのは、見出しとコードの背景が似た色でちょっと見ずらいかな?ってこと。

そろそろ見出しにもテコ入れをする時期が来たか!?

てか赤字とか太字とか、記事装飾もした方がオシャレだよね、きっと。

今までサボってたけど、装飾もしていこっと。

つ、次から・・・

コメント

タイトルとURLをコピーしました