*

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

関連記事

アプリ開発

CGIやPHPアプリ開発前に依頼者が理解、習得しておくべきこと

ネットショップ開業と同じく、一発当てられる可能性を秘めているスマホアプリ、CGIやPHPアプ

記事を読む

トップページ用テンプレート

ヤフーストア・トップページ用のテンプレートを作ってみた。

ヤフープロフェッショナル出店は、HTMLが理解できて使える人にとっては、ページを作り上げる楽しみがあ

記事を読む

横取りマーケティング

スマホサイト横取りマーケティング

すでにスマホ・ショッピング全盛です。楽天やヤフーに出店しているネットショップは、スマホからアクセスし

記事を読む

Youtube

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

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

記事を読む

モーダルウィンドウ

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

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

記事を読む

カートバック

ブラウザの右下に「カートへ戻る」のリンクボタンを常時表示させる方法

yahoo! shoppingや楽天にあってショップサーブにないもの。 それは、右下に常時表示

記事を読む

メールフォームCGI

レスポンシブ対応メールフォームCGIを設置した

ショップサーブのメールフォームが気に入らないので、レスポンシブ対応の無料CGIメールフォーム

記事を読む

サーバーエラー

CSV編集CGIがない

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

記事を読む

ウェブテクニック

ショップオーナーが知っておくと役に立つWEBテクニック

ネットショップを始めるのにHTMLやCSSとかの知識は、とりあえずいらないです。アプリを借りたなら、

記事を読む

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

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

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

記事を読む

Adsense

Adsense

確定申告
2019年確定申告の時期だよ~テキトーな個人的裏(ウラ)話

来ましたか?確定申告のハガキ!1月下旬に来たハガキ、忘れないように

みるみる残高が増える
やれば、銀行口座残高がみるみる増えるヽ(^o^)

銀行口座の残高が増えるって嬉しい! って思いませんか? 思

insta
instagramやるべき店とやるべきではない店(ネット販売)

インスタは一応アカウント持ってますが何年か放置です。当然です。

ギフトショー2019
仕入先はギフトショー2019で見つけろ!

2月12日(火)からビッグサイトで毎年恒例のお祭りが開催されます。東京

お役立ちステップ11
先着限定4冊!無料冊子「かんたん開店のためのお役立ち11ステップ」プレゼント

超希少!お宝無料小冊子 ショップサーブの無料の冊子「簡単開店のた

→もっと見る

PAGE TOP ↑