【BASE】デフォルトテンプレでロゴ画像がぼやけるのを防ぐ方法

無料で簡単にネットショップが開けることで有名な「BASE」。デフォルトのテンプレートはとてもシンプルですが、その分、ロゴ画像がぼやけてしまうのが気になったりしていませんか？

実は、私も少しだけ利用していたことがあり、そのときにロゴ画像がぼやけてしまうのがどうしても気になりました。そこで、画像サイズとHTML編集機能を使って、ロゴがボケないように改造してみました。

というわけでこの記事では、BASEのデフォルトテンプレートでロゴ画像がぼやけるの防ぐ方法を紹介します。割と簡単なので、気になるかたはやってみてくださいね！

Contents

1 そもそも、どうしてロゴ画像がぼやけてしまうのか？
2 BASEでロゴ画像がぼやけるのを防ぐ方法
3 コードを貼り付ける場所を「ページ内検索」で探す
4 ロゴはお店の大事な顔！こだわりたい

そもそも、どうしてロゴ画像がぼやけてしまうのか？

まず、そもそもなぜロゴ画像がぼやけてしまうのでしょうか。

たとえば、こちらの2つの画像。macやiPhoneで見ると、上がぼやけていて、下がはっきりと見えるはずです。かなり違うと思いませんか？

▼ ぼやける

▼ ぼやけない

なぜこうなってしまうかというと、macやiPhoneには「Retinaディスプレイ」という高画質モニタが使われているからなのです。

Retinaディスプレイに対応している有料テンプレートなら、問題ありません。でも、商品が増えるまではとりあえず、デフォルトのテンプレートを使いたい！なんていうときもありますよね。

そんな人は、ぜひ次の項目で紹介するカスタマイズ方法を試してみてください♪

BASEでロゴ画像がぼやけるのを防ぐ方法

（1）画像を用意する

まずは、ロゴを表示したいサイズを決めて、その2倍の大きさで画像を制作します。たとえば、「200 x 80px」で表示したかったら、実際に用意する画像のサイズは「400 x 160px」になります。

画像は2倍のサイズで制作する。
例）200 x 80px で表示したいなら、400 x 160pxの画像を用意する

できた画像は、通常通りデザイン編集画面からアップロードしてください。

（2）CSSコードを入れる

画像がアップロードできたら、HTML編集モードに入ります。

下記コードをコピーして、 <style type=”text/css”> の下にペーストしてください。

/* trim */
.trim {
width: 200px; /* 画像の幅 */
height: 80px; /* 画像の高さ */
overflow: hidden;
position: relative;
}
.trim img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}