[ 解決済 ] ヘッダーロゴ画像の大きさについて
[ 解決済 ] ヘッダーロゴ画像の大きさについて
- このトピックには2件の返信、2人の参加者があり、最後に
により2年、 2ヶ月前に更新されました。
-
投稿
-
■ 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ページに表示されるロゴが小さい。テーマ(スキン)側で、細長い横長のヘッダーロゴ画像を使うことを前提に高さの上限を設定していますので、縦横比が正方形に近い画像だと小さく表示されてしまいます。
大きく表示するには以下の 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/
- このトピックに返信するにはログインが必要です。
