*

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

この記事は約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空けるとバランスがよくなりますね。


Adsense

関連記事

ホームページビルダーでは作らない

ホームページ・ビルダー20クラシックでネットショップは作りません。補助に使います。

「ネットショップを始めよう!じゃ、ホームページ・ビルダーだ。」 で買ってしまった方もいると思い

記事を読む

モーダルウィンドウ

ページの移動なしその場で子ウィンドウを表示できる「モーダルウィンドウ」

modalは英語で「形式上の」「形態上の」という意味ですが、modal window(モーダルウィン

記事を読む

EFO

ショッピングカートCGI復活か

10年前は全盛だったショッピングカートCGIですが、もはや絶滅かという域に達しつつあります。

記事を読む

ハイかイイエか!

するするスクロールするページの作り方

久しぶりにJavascript入りのページを作成。 と言うより、開業時の許認可の必要の有無」が

記事を読む

メルマガ送ろう

月に3回でも5回でも。メルマガは恐れずどんどん送信しまくろう。

一回利用したことがあるとか、ないとか。よくわからない通販店からのメルマガを迷惑と感じる人もいれば、実

記事を読む

no image

初心者は安易にワードプレスを使うな

脆弱性(ぜいじゃくせい)の話です。脆弱性とは、簡単にいえば弱点のこと。その弱点をつかれても、軽い痛み

記事を読む

電話予約

「ご予約はお電話で?」「ご予約のご変更はお電話で?」はっ????

※http://support.biglobe.ne.jp/ask/konzatu.html

記事を読む

サーバーエラー

CSV編集CGIがない

放置気味の自作サイトのCSVファイルをウェブ上で編集するためのCGIを探してみたところ、意外にないん

記事を読む

カウントダウン

繁盛感の演出~注文が入りました!自動スクロール~

楽天ショップなどでよく見かける「注文が入りました!」逆スクロールをショップサーブに導入しよう!企画?

記事を読む

CGI、PHPフリーのプログラマーの(集客)マーケティング・アイデア

ネットショップを自作する人が超マニアックであるように、レスポンシブ対応の掲示板を探している人

記事を読む

Adsense

Adsense

慎重に
通販システム選びは無料体験を利用して慎重に

「自社サイト(本店)を引っ越ししたい。」とのクライアントさんか

無料体験
無料体験2週間は短いのか長いのか。

通販始めるならショップサーブ。ショップサーブ2週間の無料体験が

新生銀行
個人で使う銀行は新生銀行が最強っしょ。

当店のスタッフが以前働いていた某モールに出店している会社は、地

ドブ板営業
売れる商品の見つけ方。ときにはドブ板営業的に。

ドブ板営業って・・・ 過去数年、口語でも使ったことのない「ド

最強の営業ツール
見逃せない営業ツール。かっこいい名刺を作ろう。

個人的に記憶に残っている名刺 個人的には「東証一部上場」とか名刺

→もっと見る

PAGE TOP ↑