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

 2018-12-12  猫でもわかるWordPress

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

今回は・・・

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

 

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

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

↓　この赤丸のところ

この画像、結構小さめの設定なんですよね。

 

わかりやすいように、テストサイトに画像を入れてみましょう。

↓このサイトは、まだロゴ画像を設定していないので、
「ライトニングテストサイト」とサイト名がテキストで表示されていますね

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

どうなるかな^^

 

ロゴ画像を設定する方法

設定方法はかんたんです。

Lightningのカスタマイズメニューを開くと
「Lightningデザイン設定」というのがあります。

 

 

デザイン設定の中に
「ヘッダーロゴ画像」登録メニューががあります。

 

おや、ここをよく見ると、
画像の大きさが指定されていますね。

280px × 60pxだそうです。

って言われても、どれくらいなのでしょうね？

作ってみました。

↑　この画像が、280×60です。

 

ちなみに元から入っているLightningのロゴ画像は、200×44です。

私のこの、ロゴ画像は、520×150もありますので
入れたらどうなっちゃうでしょう？

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

 

 

　　　　　　・

　　　　　　・

　　　　　　・

 

 


村重

ちっさ！！（笑）

 

 

縮小されてしまいました。

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

でも、もうちょっと、大きな画像入れたいこともありますよね。

というわけで、書き換えるCSSを教えちゃいますね！

 

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

ーーーーー

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

ーーーー

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

大きくなりました。

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

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

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

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

 

 

追伸

 

これをやっても、
大きくならないんですけど〜

というご質問をいただきました。

みてみたら、そのお客様は
使っている画像自体がもともと小さく、
32pxでした。

このCSSでは、元の画像の大きさよりは大きくならないので
大き目の画像を用意してくださいね！

Follow me!

 

WordPressに関するご質問にお答えします。お気軽にお寄せください^^