【LION MEDIA】タイトルロゴのサイズが小さくて変更したい方へ

サイト運営

こんにちは。管理人です。

 

この記事ではワードプレスのテーマ「LION MEDIA」の「タイトルロゴ小さすぎ問題」について解説してきます。

 

LION MEDIAをテーマとして、ブログを運用している方で「あれ?タイトルロゴ画像小っちゃくね?」と思った方は結構いるんではないでしょうか。

私もその中の一人で、はじめはこんなもんかと思っていたのですが、他の方のブログを覗いていると「やっぱり小さい。。」となりました。

テーマのカスタマイズで変更できるかと思ったが無理でした。。

 

幸い、LION MEDIAではCSSコードを追記できる機能があり、以下の手順で、タイトルロゴ画像のサイズを変更することに成功しました。

 

ロゴサイズ変更出来ず悩まれている方は、是非下記をご参照ください。

 

 

【前提】

 

ロゴ画像の設定方法が分からないという方もいらっしゃると思うので、設定方法を解説していきます。

また、設定するロゴ画像がないという方に向けてロゴ画像を作成してくれるサービスを紹介しています。

 

 

ロゴ画像の設定方法

 

1.カスタマイズをクリック

 

2.基本設定をクリック

 

3.下の方に「ロゴ画像を設定」という部分があるので、ここで自作のロゴ画像を設定する。

 

ロゴの作成がまだの方

 

ココナラというサービスを使って、ロゴ作成を依頼することができます。

無料のロゴ作成メーカー等もありますが、自分でやるより専門家に頼んだ方が効率が良いし、
良いものができるのでおすすめです。

 

会員登録は無料で、依頼費用は個人が金額を設定しているのでピンきりです。
気に入った方を選びましょう。

>> TVCMで話題の【ココナラ】無料会員登録はこちら

【ロゴ画像サイズの変更方法】

 

下記より、本題のロゴタイトルのサイズ変更方法を解説していきます。

CSSを追記することで、サイズの変更が可能です。

 

 

1.追記する場所

下記の通り、「テーマの編集」からCSSを追加することでロゴサイズを変更することができます。

 

ユーザーカスタマイズエリア」の下にCSSコードを追記していきます。

 

 

2.追記するCSSコード

以下のCSSを追記してください。

.siteTitle {
    height: 40px;
    margin-top: 15px;
}

a.siteTitle__link {
    height: 40px;
}

img.siteTitle__img {
    max-height:40px;
}

/* スマホ表示は下記設定とする */
@media only screen and (max-width: 767px) {
.siteTitle {
height: 30px;
margin-top: 10px;
}

a.siteTitle__link {
height: 30px;
}

img.siteTitle__img {
max-height:30px;
}
}

 

 

3.CSSについての説明

・高さについて

「height」を40くらいに設定すると個人的に一番しっくりきました。

元々が30なので、40~50くらいに設定するとよいかもしれません。

 

・マージンについて

「height」の値を上げるとそれにしたがって、上部のマージン(余白)が狭くなってきます。

「margin-top」の値を変更することで余白の調整をできます。
違和感のない値にしてください。

高さを40~50に設定したとすれば、マージンは15~20くらいになるかと思います。

 

・スマホでの表示について

ロゴサイズですが、小さいと感じるのはPCのみでスマホについては元々違和感のないサイズだと思います。
ですので、スマホ表示の場合のみ元々のサイズ設定にしています。

もしスマホもタイトルの大きさを変えたいという方がおられましたら、PCと同じように「height」と「margin-top」の値を調整してください。

 

 

※実際にブラウザでサイズ確認しながら作業していくと思いますが、キャッシュが残っているとサイズ変更が反映されないので、キャッシュを削除してからリロードするかシークレットウィンドウを立ち上げて確認してください。

 

最後に

 

設定は以上となります。

ブログを運営していて、現段階では他に気になるところはありませんが、そのうちまた細かい設定が必要な部分が出てくるだろうと思います。

きっとその細かい部分こそユーザーが悩む部分だと思うので、そこを解説していければと思います。

 

 

コメント

タイトルとURLをコピーしました