最初にやっておきたい、ショップサーブ・スマホサイトCSS基本カスタマイズ5ヶ所

ショップサーブ・CSSカスタマイズ

この記事は約6分で読むことができます。

最初にカスタマイズしたいCSS
ショップサーブのスマホ・テンプレートですが、個人的にはイマイチ・・・。

ただ、カスタマイズ性はそれなりにあるので、「最初にこの5箇所のCSSはカスタマイズしておきたい!」ってところを紹介します。これは「CSSがよくわからない」なんて、初心者でも簡単にできますので、もし内容を気に入れば取り入れてみてください。

「スタイルシート編集(上級者向け)」とは書いていますが、今回の記事は初心者でもできますのでご安心を。)

まず、CSSカスタマイズに先立ってやるべきことは、CSSファイルを呼び出して名前をつけることです。これは最初の1回だけの設定です。

あと、CSSファイルないの所定の箇所は、「目視」で探すのではなくて、ブラウザの「Ctrl(コントロールキー)」+「F」を使うと便利です。CSSファイルを開いた状態で「Ctrl」+「F」を押すと、ページ内検索の枠が出てきます。その中に、探す箇所のワードを入れて「Enter」を押すと、その場所表示されます。

その1.文字の影を消す

基本テンプレートを適用して、最初に目につくのが文字の影。こんなもん、いらんでしょう。自分の目がボケてるのかと思いますよね。これを消すにはCSSの「text-shadow」という箇所を、すべて「none」と入れ替えていきます。すでに、none」が入っているものは、そのままで、何らかの指定があれば、すべて「none」に書き換えます。

(例)
text-shadow: 1px 1px 1px #ccc;

text-shadow: none;

その2.行間を広くして読みやすく

行間を広くする

左がデフォルトのダメなやつ、せめて右側くらいの行間を空けましょう。

設定箇所はここ。

body {
line-height:1;  (※読みにくい!)
word-wrap: break-word;
}

body {
line-height:1.5em;
word-wrap: break-word;
}

行間の設定は、%やpx、remなど、いろいろありますが、わりと標準的な1.5emにしています。そこは、お好みで。

その3.「価格」と「還元ポイント」の間のムダな行間を削除

ムダなスペースを削除

スペースの限られたスマホ画面は、できるだけ有効活用したいところ。このような、意味不明な行間は削除してしまいましょう。CSSカスタマイズ箇所は以下の通り。数値はお好みで変更を。

.productprice div:last-child{font-size: 75%;margin-top: 10px;}

.productprice div:last-child{font-size: 75%;margin-top: 1.5em-10px;}

 

その4.「カートに入れる」ボタンを大きく目立つように

カートボタン大きさ

デフォルトの大きさでも良いのですが、ページ内で一番重要な箇所ですからね。ここを押してもらうためのものですから。可能な限り大きくしたいものです。設定箇所は次の通り。

.curt_l{ padding: 10px;font-size:120%;width: 80%;color: #fff !important;font-weight:bold;}

.curt_l{ padding: 10px;font-size:160%;width: 95%;color: #fff !important;font-weight:bold;}

※カートの英語は「cart」です。CSSを作った方のミスですね。「curt」は「そっけない」という意味の単語です。

160%は文字の大きさで、95%はボタンの画面横幅に対する割合です。100%にすると左右ピッタリになります。あと、文字の色を変える場合は「color:#******」。ボタンの縦の大きさを変える場合は、「padding: 20px 20px;(上下、左右20px空ける」など変更が可能です。

こんな感じ。大げさに上下60pxを取ってみました。これは、やりすぎです。

カートボタン

 

その5.カートボタンの上の無断なスペースを削除

カートのスペース

右のスペースくらいで十分でしょう。CSS設定箇所は次のところ。

.shopping_form .variation1,.variation2,.variation3{
border-collapse: collapse; border-spacing: 0;
width: 97%;
margin:10px auto 30px;
table-layout:auto;
}

.shopping_form .variation1,.variation2,.variation3{
border-collapse: collapse; border-spacing: 0;
width: 97%;
margin:10px auto 0px;
table-layout:auto;
}

ちなみに、ここは「購入数」エリアと「在庫」エリアのスペースの感覚に合わせた感じです。逆に、在庫の上を30px空けるとバランスがよくなりますね。