Q.STORYにてロゴ画像をretinaディスプレイ対応にしたい。
STORYにてロゴ画像がretinaディスプレイで粗くなるので、retinaディスプレイでも綺麗に表示させる方法を教えてください。
A.以下の手順でretinaディスプレイ対応が可能です
1)ダッシュボード左メニュー[テーマオプション]→[ロゴの設定]にて、
表示させたいサイズの2倍のサイズのロゴ画像をアップロードします。(リサイズは不要)
2)ダッシュボード左メニュー[外観]→[基本設定]→[カスタムCSS]にて、下記箇所を追加します。
追加する内容:
.h_logo, .f_logo, .top-slider-logo { width:117px; height:auto; } @media only screen and (max-width: 767px) { .s_logo, .f_logo, .top-slider-logo { width:80px !important; height:auto; } }
※widthの値についてはあくまでデモサイト用(234px × 49px)でございますので、適宜ご変更ください。
なお、.h_logoがPC用、.s_logoがスマホ用ロゴ画像に付されるクラスです。
それらに対し、元サイズとは別のサイズを設定しております。
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!