こんにちはー!
今日は、またまた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〜で見たとき用サイズ*/
}
}
これの 50px や 70px の部分を変更していきます。
私のページの設定は以下の通り
ちなみに、現在の当ページの設定は以下の通り。
当サイトの設定
#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〜)サイズ*/
}
}
大きさの違いを比べてみる
初期設定
数値変更後
副題までしっかり見えるようになりました。
ちなみに、現在はロゴ画像のみの表示にしているので、基本情報の設定部分はこんな風にチェックをつけています。
まとめ
カスタマイズを適度に入れて、読みやすいページを作りましょう!
コメントを残す