WordPress テーマ Lightningでロゴの表示サイズを広げたい というご相談を頂きました。
以前もお世話になりました。その節はありがとうございました。
今回はロゴがデザイナーから届いたので設定してみたのですが表示がすんごい小さいので表示サイズを広げたいのですが調べた方法だとうまくいきません。
高さを広げればいいと思うのですが。。。
よろしくご教示ください。
ちなみに試したのはcssファイルに以下を書き込んでみました。全く変化がありませんでした。
/*ロゴ画像を元画像どおりのサイズで表示*/
.navbar-brand img {
max-height: none !important;
}
＞モミジさま
ご相談ありがとうございます！
現在のCSSで確かに元通りのサイズにはなっていますね。
【貴サイトURL】/wp-content/uploads/2019/01/logo181228_01_R4.png
にて画像データも確認しましたが、サイズは250*106 のようです。
現在サイトに表示されているサイズも250*106なのでこれ以上大きくするにはwithをくわえてあげる方法があります。
.navbar-brand img {
max-height: none !important;
width:300px;/* 例 */
}
しかし、元サイズを超えて表示させるのは画質が悪くなるのでおすすめはできません。
現在ロゴに幅は指定されていないようです。（ロゴのa img を囲うタグに幅が指定されているテーマもあり、この場合はこちらのwidthも上書きしてあげる必要があります）
おそらくは大きめの画像を使えば解決できるでしょう。（拡大した画像を提供してもらう）
元の画像が大きく、それを縮小して表示しているケースもあります。そういった場合は幅を調整すれば画質を下げることなく表示サイズを変更できることが多いですが、今回の場合は元々250と小さめの画像なので大きく表示させるには限界があります。
参考にして頂ければ幸いです。
回答ありがとうございます。
元サイズどおりに表示されているということで、おかしいな．．．と思いつつ、スマホで見ると確かに大きく表示されていて、もしかして！と思ったらIEでは大きく表示されていました！
私が普段使っているブラウザはChromeです。
Chromeだとなぜか小さく表示されてしまいいます。
なにか解決策があるでしょうか？
>モミジ様
なるほど、CSSが効いていない状態で確認されていたようですね。
僕も普段使っているのはChromeなので、ブラウザのキャッシュが問題なのかなと思います。
キャッシュ系プラグインは利用されていますでしょうか。CSSは手動でキャッシュをクリアしないと新たな記述が読み込まれないことがあります。
（クロームのシークレットモードでは小さいロゴが表示されるのではないでしょうか。）
プラグインの場合
「キャッシュクリア」
または「パージ」
といったメニューがあるはずなので探してみてください。
WP Fastest Cache の場合
あとはブラウザの再読み込みです。
style.cssなどは
/style.css?ver=X.XX.XX
のようなクエリ文字付きで読み込まれていることがあり、古いバージョンのCSSを読んでいる可能性もあります。
キーボード上部のF5（ファンクションキー F5）や、コントロールキーと組み合わせたCtrl+F5キーなどを押してキャッシュをクリアしてみるのもおすすめです。
参考にして頂ければ幸いです。
Ctrl+F5で大きく表示されるようになりました。
Wordpressがどうこうというよりブラウザのキャッシュの問題だったんですね。。
まだWordpressというかWeb系自体を触り始めて数カ月なもので勉強になります。
本当に助かりました。ありがとうございました。
また行き詰ったらよろしくお願いします。
＞モミジ様
解決したようでなによりです。キャッシュについては今後も付いて回る問題です。
プラグインを入れていない場合はCtrl+F5で解決すると思います。
またなにかあればご相談下さい。