楽天で500円以上お得に買い物する方法って?

【SANGO】ロゴ画像を大きくする方法

こんにちはー!

今日は、またまたSNAGO超絶初心者の私のための覚え書き。

SANGOにはトップ画像を設定できるのですが(赤で囲んだ部分ね!)

私のアップした画像が悪いのか、とにかく小さい字が読めないほど小さく表示されてしまいました。

これは画像のサイズがアカンのだなと思い変えてみたのですが、

やっぱり表示は変わりません。

原因
初期設定が62pxだから

ここね、全然気がつかなかった。

そりゃ画像サイズ変えても意味ないよね〜!

ということで、今回もサルワカさんの教科書から勉強させていただきました。

参考 ブログのタイトルとロゴ画像を設定しようサルワカ

PCなど大画面とスマホのトップ画像サイズを大きくする方法

方法:CSSを追加する

外観→カスタマイズ→追加CSS

追加するcss
#logo, #logo img, .desktop-nav li a, #drawer__open {
    height: 50px;/*スマホ用サイズ*/
    line-height: 50px;/*スマホ用サイズ*/
    object-fit: contain;
}

@media only screen and (min-width: 768px) {
    #logo, #logo img, .desktop-nav li a {
       height: 70px;/*768px〜で見たとき用サイズ*/
       line-height: 70px;/*768px〜で見たとき用サイズ*/
    }
}

これの 50px70px の部分を変更していきます。

私のページの設定は以下の通り

ちなみに、現在の当ページの設定は以下の通り。

当サイトの設定

#logo, #logo img, .desktop-nav li a, #drawer__open {
height: 150px;/*スマホ用サイズ*/
line-height: 150px;/*スマホ用サイズ*/
}

@media only screen and (min-width: 768px) {
#logo, #logo img, .desktop-nav li a {
height: 150px;/*PC(768px〜)サイズ*/
line-height: 150px;/*PC(768px〜)サイズ*/
}
}

大きさの違いを比べてみる

初期設定

数値変更後

副題までしっかり見えるようになりました。

ちなみに、現在はロゴ画像のみの表示にしているので、基本情報の設定部分はこんな風にチェックをつけています。

まとめ

カスタマイズを適度に入れて、読みやすいページを作りましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です