筆者愛用マジで使える極寒余裕のベンチコート【寒いのが苦手な人に】

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

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のロゴ画像を大きくする方法」でした。

らいおんメディアカテゴリの最新記事