[ 解決済 ] Lightning Proのヘッダーロゴについて

[traveller]

Lightning Pro（バージョン: 4.5.0 ）+　Lightning Skin Fort（バージョン 6.1.3）の環境での現象です。

Lightning デザイン設定 で、デザインスキン（FortⅡ（Bootstrap4）を選択、ヘッダーロゴ画像　で　ロゴ画像をアップするのですが、それまで、割付がきちんとなっていたヘッダーメニューが、一つ一つのメニュー内の文字両端のスペースが無くなった感じで、レイアウトが崩れます。

推奨画像サイズ: 280×60px　と合ったの縦60px以上だとこの減少は起こりません。
ただ、縦が60px未満だと、上記のような現象が起こるみたいなのですが、こちらは私だけの現象でしょうか。
もし、同じ現象を確認していただけるようでしたら、回避方法などございますでしょうか。

よろしくお願い致します。

[kaorock72]

Lightning Pro（バージョン: 4.5.0 ）
Lightning Skin Fort（バージョン 6.1.3）
デザインスキン（FortⅡ（Bootstrap4）
Windows10
ブラウザChrome（バージョン: 81.0.4044.129）

上記環境で280×55pxのロゴ画像を設定して
確認してみましたが、仰せのようなレイアウト崩れは
特に起こりませんでした。

他の対応ブラウザ（Chrome、Safari、Firefox、Edge）で
表示した時も崩れてしまうのか
一度確認してみてはいかがでしょうか？

[traveller]

ご確認ありがとうございます。

すみません。
私の方で現象が出たロゴサイズを添付しておけばよかったです。

560px ✕　49px　になります。

その大きさの画像を添付してみました。

もし、現象が出ないようでしたら、私の制作中のサイトに問題があるのかもしれません。

Attachments:

You must be logged in to view attached files.

[Vektor,Inc]

560×49という事は、高さは最大値をオーバーしていないので、
ロゴだけで横幅560px取る = 右側の電話番号とお問い合わせボタンが残りの幅では入らないので、
段落ちして崩れるという事になります。

A. 物理的に560px必ず確保したいのであれば、電話番号とお問い合わせボタンはロゴの下に常時中央に配置する
B. ロゴ・電話番号・お問い合わせ ボタンが一列で収まるようにロゴの横幅を小さく縮小して横幅を少なくする
C. 電話番号・お問い合わせ の文字サイズや余白を小さくして ロゴの560px の残りの横幅に収まるようにする

の３つの手段が考えられます。

Bが一番簡単です。CSSの指定は下記など参照ください。

全てのWordPressテーマで使える！デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜

[traveller]

ご返信ありがとうございます。

> ロゴだけで横幅560px取る = 右側の電話番号とお問い合わせボタンが残りの幅では入らないので、
> 段落ちして崩れるという事になります。

そういうことなんですね。
以前、使用していたいくつかのテーマは、同じサイズのロゴをアップした際、今回のようなことはなかったので、てっきり自動縮小かなにかされるものだと思い込んでおりました。

知識不足ですみません。
CSSの方は、まだ、あまり自身がないので、ロゴの方を縮小して調整してみたいと思います。

ありがとうございました。

[投稿者]

投稿