VWSとは フォーラム Lightning [ 解決済 ] Lightning Proのヘッダーロゴについて

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

  • このトピックには4件の返信、3人の参加者があり、最後にtravellerにより4ヶ月、 4週前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #37221

    traveller
    参加者

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

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

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

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

    #37226

    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)で
    表示した時も崩れてしまうのか
    一度確認してみてはいかがでしょうか?

    #37232

    traveller
    参加者

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

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

    560px ✕ 49px になります。

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

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

    Attachments:
    You must be logged in to view attached files.
    #37234

    Vektor,Inc
    キーマスター

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

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

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

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

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

    #37250

    traveller
    参加者

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

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

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

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

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

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。