サイト内検索
ロゴ画像下のスペースにつきまして | Cocoonテーマに関する質問 | Cocoon フォーラム

Topic starter2020年9月28日 03:34
わいひらさん
いつもお世話になっております。
別のトピックを書きこみ終わるころに気づいたのですが、ヘッダー、固定ヘッダー、フッターのロゴを画像に設定した際に、画像の下にaタグのスペースが出来ています。
これも、フォーラムで回答している時にちょっと気になっていたのですが、すっかり忘れていました。
ロゴ画像の img タグに vertical-align: middle; とか vertical-align: bottom; とか、どちらでも良いのですが、vertical-align の指定を当てておくと、ロゴ画像下の余分なスペースがなくなるような気がします。
特に固定ヘッダーのときは、上下のスペースが狭いので上下中央に配置しやすくなるような気がしました。
全てのブラウザや、さまざまなロゴ画像のサイズで検証した訳ではないので、間違っているかもしれません。
フッター下の隙間の件のときに一緒に書いておけばよかったです。すみません。
This topic was modified 2年前 5回 by リフィトリー
Topic starter2020年9月28日 03:55
でも、いきなり、vertical-align: middle; を指定すると、上下方向のデザインのバランスが狂っちゃった、という苦情があるかもしれない、と、いう心配も 無きにしも非ずではあります。
Ikumi 件のいいね!
2020年9月28日 20:07
ありがとうございます。
とりあえず修正しておきます。
https://github.com/yhira/cocoon/commit/ba805bec8a41dcca37875c4c110051f554c8291b#diff-da232d78aa810382f2dcdceae308ff8eR697
でも、いきなり、vertical-align: middle; を指定すると、上下方向のデザインのバランスが狂っちゃった、という苦情があるかもしれない、と、いう心配も 無きにしも非ずではあります。
個人的には大丈夫のように思います。
ただ、もし不具合がある場合は速やかに元に戻すだけです(笑)
コミットを判断したのも僕なので、もし問題があったとしても僕の責任です。
いずれにせよ、大きな不具合となるような修正ではないので、大丈夫だと思います 🙂
Ikumi 件のいいね!
Topic starter2020年9月28日 20:35
@yhira さん
個人的には大丈夫のように思います。
ただ、もし不具合がある場合は速やかに元に戻すだけです(笑)
コミットを判断したのも僕なので、もし問題があったとしても僕の責任です。
いずれにせよ、大きな不具合となるような修正ではないので、大丈夫だと思います 🙂
そのように、おっしゃっていただくと、気持ちが軽くなります。
ヘッダーやフッターの画像の場合は、あまり気づかれないこととは思っていましたが、固定ヘッダーで、ロゴが上下中央に配置されないという お問い合わせは、幾度か あったような気がします。
それが、解消されれば幸いなのですが・・
This post was modified 2年前 by リフィトリー
2020年9月30日 19:02
※ヘッダーロゴ画像と、フッターロゴ画像は今回は触れなかったんですね。 😓 その方が無難ですよね。
フッターロゴ画像はどんな状態になってます?
Topic starter2020年9月30日 19:31
@yhira さん
フッターに何もコンテンツを入れない状態で、ちょうど上下幅の中央ぐらいになっています。(でも、これは、画像の高さによって変わるのでしょうか?)
img タグの下方向に意図せずできてしまうマージン?は Firefox のデベロッパーツールで見てみると、10.7pxのようです。
これに先日フッターに8pxの paddingを設定していただいたので、画面下端からの距離は、
8px + 10.6px = 18.6px
になっているようです。
ですので、この フッターロゴの img タグに vertical-align: middle; を指定した場合は、ウィンドウ下端からは、8px となり、下に寄ったような表示になるかと思います。
This post was modified 2年前 3回 by リフィトリー
Topic starter2020年9月30日 20:48
img タグの下方向に意図せずできてしまうマージン?は Firefox のデベロッパーツールで見てみると、10.7pxのようです。
これに先日フッターに8pxの paddingを設定していただいたので、画面下端からの距離は、
8px + 10.6px = 18.6px
になっているようです。
誤記、訂正します。 😓
8px + 10.7px =18.7px
2020年10月1日 19:08
heightが50pxで指定してあるのに、max-widthが指定してあるのはいずれにせよ問題かもしれません。