テーマLightningでロゴ画像サイズをPCとスマホで調整する方法

2022年10月22日

ワードプレスの無料で使える人気テーマLightningではサイトタイトルをロゴ画像に置換できますが、ロゴ画像のサイズが微妙だなと感じたことはありませんか？

本記事ではLightningのロゴ画像サイズを変更する方法を紹介します。

Lightningのロゴ画像関連のカスタマイズとしてはこちらの記事もおすすめです。

ロゴ画像の表示方法

Lightningではテーマカスタマイザーでロゴ画像を設定することができます。

手順は以下の通りです。

①ダッシュボードメニューの外観＞カスタマイズ＞Lightningデザイン設定　と進める
②ヘッダーロゴ画像の”画像を選択”をクリック
③メディアライブラリから画像を選択（または新規画像をドラッグ＆ドロップ）して挿入

上に表示されているように画像の推奨サイズは500×120pxです。

ロゴ画像を設定すると、サイトタイトルがロゴ画像に置き換わります。

ロゴ画像の表示事例

ロゴ画像の表示を実際の例で紹介していきます。

ロゴ画像設定前

ロゴ画像設定前の状態です。サイトタイトルが表示されています。

このサイトに、次の2通りのサイズのロゴ画像を設定して表示を確認します。

ロゴ画像500×120pxを使用した場合

推奨画像サイズである500×120pxのロゴ画像を設定してみました。

表示されるロゴ画像のサイズは

• PC・・・・・250×60px
• スマホ・・・208.3×50px

と、元画像サイズ500×120pxよりも小さくなっています。

とはいえ、サイト全体のバランスから見てロゴ画像サイズに大きな違和感はないように思います。もしくはもう少し大きい方が見やすいかも、といった程度でしょうか。

ロゴ画像500×375pxを使用した場合

今度はロゴ画像を横長でなく、縦横比の小さい500×375pxの画像サイズを使ってみました。

元画像500×375pxに対して表示されたサイズは次のように小さくなります。

• PC・・・・・80×60px
• スマホ・・・66.67×50px

縦横比の小さな画像だと、表示されるロゴ画像が小さすぎてサイト全体のバランスが悪く感じますよね。ミスマッチ状態だといえるでしょう。

全てのロゴが推奨サイズ通りのものを使えるとは限らないので、ロゴ画像のサイズは調整する必要があるのがわかります。

ロゴ画像の表示サイズが小さくなる理由

ロゴ画像の表示サイズが小さくなるのは、テーマLightningのCSSによって画像の最大高さが制限されているためです。

PC表示では高さ60px、デバイス幅991.98px以下のモバイルでは最大高さ50pxに制限されています。

横幅は画像の縦横比をキープしながら自動的に決まっています。

PC表示（デバイス幅991.98pxより大きい場合）のCSS

モバイル表示（デバイス幅991.98px以下の場合）のCSS

ロゴ画像の表示サイズを変更調整する方法

CSSを書き換えてロゴ画像の制限高さを変更すれば、表示サイズを変更することができます。

例えば、PCの高さを70px、モバイルの高さを60pxに変更する場合は次のCSSとなります。

別の画像サイズにしたければ、CSSの赤字の部分を任意のサイズに変更すれば可能です。

コピペしやすいようにコードを表示しておきます。

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

このCSSを子テーマのstyle.cssやカスタマイザーの追加CSS欄に記述すればOKです。CSSの記述場所については次の記事を参照ください。

ロゴ画像500×375pxの事例でCSSによる画像高さを変更してみると次の通りです。

PCの場合

スマホ（モバイル）の場合

ロゴ画像サイズを変更するだけで、サイトの表示バランスが一気によくなったのがわかりますよね。

元画像サイズを選ぶときの注意点

Lightningのデフォルト設定では、ロゴ画像の推奨サイズと表示サイズは次のような関係です。

• 推奨サイズ（ロゴ画像の元サイズ）・・・500×120px
• 実際に表示されるサイズ・・・PC：250×60px、スマホ：208×50px

PCを基準とすると、元画像サイズは表示サイズの２倍（面積では４倍）となっています。これはMacやiphoneのRetinaディスプレイに代表されるディスプレイの高精細化に合わせた推奨サイズとなっています。

すなわち、元画像サイズは表示させたい画像サイズの約２倍（面積で４倍）にしておくことが望ましいわけですね。元画像が大きすぎるとサイトの表示スピードに悪影響が出ますし、小さすぎると表示画像がぼやけた感じになります。

ちなみにLightningのロゴ画像推奨サイズは数年前（2019年の頃）は280×60pxでしたから、Retinaディスプレイの普及に伴い、約２倍のサイズに変更されたと考えられます。

有料版Lightning Pro Unitでのロゴ画像サイズ調整

有料版Lightning Pro Unitを使えば、ヘッダー内にお問い合わせ先を表示したりヘッダーメニューをヘッダー下に表示させることが可能ですが、この場合なぜかロゴ画像高さが50pxとより小さいサイズに制限されています。

そういった場合も今回と同じCSSの記述でロゴ画像サイズを調整することができます。

まとめ

Lightningのロゴ画像は、元画像サイズを推奨サイズに設定しても表示サイズはその半分でしか表示されません。Retinaディスプレイ対応のためと考えられます。

ロゴ画像の表示サイズは簡単なカスタムCSSで、PC・モバイルともに別々のサイズに変更することが可能です。

ただしその場合、表示サイズの約２倍の元画像を使うようにしましょう。