LION MEDIAのロゴ画像を大きくする方法

LION MEDIAのロゴ画像って、なんだか小さい気がしませんか?

もちろんデフォルトのままでも全然問題ないのですが、私はもっとロゴを目立たせたかったので大きくしたかったんですよね。

これは追加のCSSを記述してカスタマイズしてあげるだけで簡単に変更できます。

それでは実際にやっていきましょう。

追加CSSでLION MEDIAのロゴをサイズUP

デフォルトでは、こんな感じです。左上の「GENKI-BLOG」という文字がロゴ画像になります。

全然問題ないのですが、メニュー欄の「注目キーワード」と幅も同じくらいでインパクトに少し欠けるような気がします。タイトル感がちょっと乏しい感じ。ということで、もう少し大きくしたいと思いましたので、CSSを追記して下のようにサイズUP。

こんな感じになりました。ロゴのサイズUP成功で大満足です。

追加したCSSは下記の通り

/*ロゴ画像のサイズ変更*/
.siteTitle {
    height: 50px;
    margin-top: 10px;
}
a.siteTitle__link {
    height: 50px;
}
img.siteTitle__img {
    max-height:50px;
}

/* スマホ画面用 */
@media only screen and (max-width: 767px) {
.siteTitle {
    height: 40px;
    margin-top: 7px;
}
a.siteTitle__link {
    height: 40px;
}
img.siteTitle__img {
    max-height:40px;
}
}

これをそのままコピー&ペーストでOKです。ピクセル数値を好みに合わせて変更すれば、好きなサイズに変更できます。

ロゴの上部の余白の調整は "margin-top" の数値で変更できますのでロゴサイズに合わせて調整するといいと思います。

CSS追記→保存後は、実際にサイトを見て "Shift + F5" でキャッシュ削除更新すれば変更がすぐに反映されます。

注意点:スマホ画面もカスタマイズしてあげないと、レイアウトがひどいことになります。

以上、「LION MEDIAのロゴ画像を大きくする方法」でした。

ライオンメディアの上位互換『ザ・トール』のご紹介

Webに本気なら、Webに本気のテーマで。

ライオンメディアで少しずつカスタマイズしていくのもいいと思います。しかし、デザインやレイアウトの学習ばかりに時間をかけていては、いつまでたっても肝心のWebコンテンツが完成しません。そして無料版では最終的に必ず限界が来ます。

『ザ・トール』は、デザインの拡張性が抜群でカスタマイズも自由自在。クリック操作だけで簡単に自分好みのオリジナルデザインが完成します。煩わしいHTMLやCSSをいじる必要もないので初心者の方でも安心です。

令和の時代では、もうコードを書く必要はないんです。ライオンメディアを選んだアナタなら、間違いなく同じ会社が提供する『ザ・トール』を気に入ることでしょう。

一流の開発チームが作り上げた国内最高峰のWPテーマで、ぜひスムーズなWeb制作を可能にしてください。