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!
「猫でもわかる！」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。