ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

この記事でわかること
  • Lightningのロゴ画像表示方法
  • ロゴ画像表示事例に見る表示サイズのミスマッチ
  • 表示ロゴサイズが小さくなる理由
  • 表示ロゴサイズの変更調整の方法(PC、モバイル別に設定可能)
  • 表示ロゴサイズと望ましい元画像サイズ
  • 有料版Lightning Pro Unitの事例

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

ロゴ画像の表示方法

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

手順は以下の通りです。

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

ロゴ画像の設定方法

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

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

ロゴ画像の表示事例

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

ロゴ画像設定前

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

ロゴ画像設定前のサイト表示

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

設定するロゴ画像(2通り)

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

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

500X120pxのロゴ画像設定後

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

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

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

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

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

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

500X375pxのロゴ画像設定後

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

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

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

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

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

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

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

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

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

PC表示でのロゴ画像表示と制御CSS

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

モバイル表示でのロゴ画像表示と制御CSS

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

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

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

ロゴ画像高さ変更の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の場合

CSSで高さ変更(PC)

スマホ(モバイル)の場合

CSSで高さ変更(スマホ)

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

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

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

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

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

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

ロゴ画像の元サイズは、表示させたい画像サイズの約2倍(面積で4倍)が望ましい

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

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

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

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

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

まとめ

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

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

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

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる