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