[ 解決済 ] ヘッダーロゴ画像の大きさについて

[Lightningkakeru]

■ WordPress のバージョン
WordPress 6.0.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
バージョン: 14.23.0

■ Pro Unit のバージョン
バージョン 0.22.2

■ スキンの種類
Evergreen

■ スキンのバージョン
バージョン 0.1.5

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
初心者で知識がなく、分からない部分があり改善できるのか確認させてください。

添付資料のようなTOPページを作成したのですが、ロゴをもう少し大きく表示したいのですが、
どのようにすれば修正できますでしょうか。プラグイン？CSS等？

何卒、よろしくお願いいたします。

■ 自分で試した事

現状以下のような設定をしています。

「Lightning デザイン設定」で、ヘッダーロゴ画像は、推奨の画像サイズ内で設定。

「Lightning ヘッダー設定」は以下の通りです。
・ヘッダーレイアウト　：　タイトル中央＆ナビ貫通
・グローバルナビスクロール時のレイアウト　：　固定ロゴ＆ナビ回り込み
・スクロール時のロゴ　：　未選択
・モバイルでのロゴの位置　：　中央
・ヘッダーカラー：いずれの項目も未設定
・ヘッダー通過
ヘッダーを透過を有効にする→トップページのみ
グラデーションモード→グラデーションしない
他項目は未設定
・ヘッダーの高さ　：　PC、モバイル共に値未入力

■ 症状が発生するブラウザ
Chrome、Edge等

■ 実際の症状
TOPページに表示されるロゴが小さい。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

テーマ(スキン)側で、細長い横長のヘッダーロゴ画像を使うことを前提に高さの上限を設定していますので、縦横比が正方形に近い画像だと小さく表示されてしまいます。

大きく表示するには以下の CSS を追加します。

.site-header-logo img {
    max-height: 100px;
}

100px の部分はお好みでどうぞ。テーマ側の設定は 50px です。

スマホでも大きく見せる必要があるでしょうから、以下の CSS も必要と思います。

@media (max-width: 991.98px) {
.site-header-logo img {
    max-height: 70px;
}
}

70px の部分はお好みでどうぞ。テーマ側の設定は 35px です。

CSS の設定については、以下のページを参考にしてください。

https://www.vektor-inc.co.jp/post/wordpress-css-customize-2020/

[Lightningkakeru]

対馬さま
返信を失念しており、ご連絡が遅くなってしまい大変申し訳ありません。
お教えいただいた通り対応ができました。非常に助かりました、感謝申し上げます。

[投稿者]

投稿