Lightningライトニングのカスタマイズ ロゴ画像を大きく表示したい!

人気のテーマ、Lightningライトニングの
カスタマイズ方法をご紹介するシリーズです。

今回は・・・

「ロゴ画像を好きな大きさに設定する方法」です。

 

Lightningライトニングのロゴって?

テーマLightningライトニングでは、
画面の左上にロゴが入るようになっています。

これが、初期設定ではかなり小さいのです。

 

例えば、私がテストにつくったこのサイト

ロゴ画像を設定していないので、
サイト名の文字だけが入っています。

今日はここに、
猫でもわかるWordPressレッスンのロゴを入れてみますね。

どうなるかな^^

 

ロゴ画像を設定する方法

Lightningのカスタマイズメニューを開くと

「Lightningデザイン設定」というのがあります。

 

この中に、ヘッダーロゴ画像を
設定するメニューががありますよ。

 

でも・・・

よく見ると画像の大きさが指定されています。

280×60ってどれくらいなのでしょうね?

 

実は、さっきのLightningのロゴ画像が
200×44です。

あまり大きくないということがわかりますね。

私のロゴ画像は、520×150もあります。
そんな大きな画像を入れたらどうなるのか。

大きな画像をロゴに設定すると・・・?

 


村重

ちっさ!!(笑)

 

これ、なんでかというと、
LightningライトニングはCSSの設定で

ここの画像の縦幅は「最大で50pxまで」と決められているため、
それ以上大きな画像を入れると、縦50pxに縮小されてしまうんです。

もうちょっと、大きな画像入れたいですよね・・・

というわけで、私の場合は
縦幅120pxの画像でしたので、
この50を120に書き換えてみました。

 

CSSでロゴのサイズを自在に変えちゃおう!

CSSはこちらです

ーーーーー

.navbar-brand img {
max-height: 150px;
}

ーーーー

150のところを、あなたの画像の
縦幅のサイズに変更してくださいね。

大きくなりました。

ちょっと大きすぎるかな?

あまり大きすぎても、メニュー幅が開きすぎて変になると思うので
バランスは気をつけてくださいね^^

簡単ですが、ヘッダーロゴ画像の大きさを変える方法でした。

CSSって、面白いですよね♪

Follow me!