*

最初にやっておきたい、ショップサーブ・スマホサイト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

関連記事

Youtube

動画の再生は可能か?(埋め込み手順)

ショップサーブでは、トップページや商品ページへの動画の貼り付けは、他のサービスに比べると、比較的簡単

記事を読む

モーダルウィンドウ

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

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

記事を読む

no image

ショップサーブを予約システムとして転用してみる方法

ショップサーブといえば、物販用のネット販売システムですが、これを予約システムとして使えるのではないか

記事を読む

ヘッダー看板

ヤフーショップのヘッダー画像HTMLの編集方法

開店申請にパスしたなら、とりあえず商品を登録して行くわけですが、ヘッダーを作ってお店らしくしたい人も

記事を読む

HTML編集

ヤフーショッピングの画像やHTML編集方法

ヤフーショッピングは、ショッピングモールなので、と言うと語弊

記事を読む

CPI

レンタルサーバーの時代はもう終わった

レンタルサーバーを借りてネットショップを作ったりホームページを作ったりしたい人が、2004年に100

記事を読む

自作ショップ常識

自作ショップ構築ファイル構成の考え方

自作構築をする場合、知らないと後で「トンデモない事態」を引き起こしかねないががファイルの構成。(商品

記事を読む

ショッピングカート

「共同購入(CGI)」役目終える

サイト引越しのときのCGIの断捨離中に共同購入のCGI(共同購入システム3 coopbuy3.cgi

記事を読む

no image

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

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

記事を読む

カートCGI

web shop構築に根強い人気。無料ショッピングカートCGI

Webshopと言えば、昔は、ショッピングカートCGIをよく使っていました。もちろん、今でも使え

記事を読む

Adsense

Adsense

no image
ランディングページに向く商品、向かない商品

世の中いろいろな商品やサービスがありますが、ランディングページの販売ス

メインディッシュ
情報商材最新の販売手法「いきなりメインディッシュ法」

たまにフェイスブックを開くと、どういうわけか?情報商材の広告が

no image
コンバージョン率が高い!?良くできたランディングページを集めました

「ランディングページ集めました。」というサイトは非常にありがたいです。

損失回避の法則
ベネフィットは損失回避の法則とセットで使うのが良さそう

ランディングページに、ベネフィットは付き物ですが、実はベネフィットだけ

集客
「集客方法教えて!」と悩んだときのチェックポイント3

起業して「何が一番難しいか?」って言うと集客ですよね。 「お客さ

→もっと見る

PAGE TOP ↑