旧ショッピングカート決済画面のデザイン変更のしかた

現在カラーミーショップでは二種類のショッピングカートがあり、いずれかを選択できます。
これまでの旧デザインのショッピングカートと、2015年にデザインされた新しいショッピングカートです。

新しいショッピングカートは機能に一部制限があるため、すべてのお店がこちらを利用できるわけではありません。また、CSS編集はできません(ショップロゴは入れられますが、配色などは固定されています)。

そういう事情もあって、いまでも旧ショッピングカートを使っているサイトのほうが多いように感じます。
今回は、旧ショッピングカートの決済画面のデザイン変更(PCのみ)についてご紹介します。

CSSを使いますので、少々難しい内容になっています。

カラーミーショップのデザイン編集画面

ショップ作成>デザイン>[デザイン編集]で編集画面(下図)が開きます。
PCとPC・スマホ共通(レスポンシブ)のデザインができます。スマートフォンショップは別メニューから編集画面を開きますが、残念ながら決済画面のカスタマイズはできません。

ご存知のとおり、明るい緑地の項目9~14は、上級モードでCSS編集が可能です。HTML編集は行えません

テンプレート編集画面

決済画面の一般的なカスタマイズ

CSS編集のみでカスタマイズを行いますので、一般的にはデザインの余地がないように思われがちです。
デフォルトのデザインは下図のような感じです。

シンプルというよりは、無骨・古風な印象をうけます。
比較的シンプルな白ベースのショップサイトには、合わなくもないと思います。

手を加えるべき点は、リンク色・リンク下線・枠が目をひきすぎること、テーブルの線と文字がはっきりしすぎるところ。できればショップのキーカラーを使って、ぱっとみの印象を揃えるとよいと思います。

そして、ボタンのデザインが古い印象。デフォルトでは画像を使っていますので、CSSを使ったフラットなボタンにすると、しっくりくるデザインになると思います。

これらは、CSS編集から調整可能な箇所です。
デベロッパーツールでclass名を調べて、CSSを編集してください。

決済画面デザイン前

先頭のショップ名が入っている部分と末尾のコピーライト部分は、メニューのショップ作成>ショップ情報>トップページから編集可能です。マニュアルをご参照ください。

先頭には、ショップロゴを画像で入れている場合が一番多いですが、使い方は必ずしもそれだけではありません。
場合によっては送料がいくら・送料無料の説明、会員登録のメリット・ショップポイントの加算、ありがとうございます・お問い合わせは…などなど、結構自由な内容を画像にして掲示しているお店をみかけます。
決済画面の全ページで共通の部分になりますので、デザインする場合は注意が必要です。

また、コピーライト部分には、文字以外にもHTML要素(タグ)が入れられます。img要素で画像を配置することも可能です。
マニュアルには下記のような注意書きがあります(2017年6月時点)。大昔にそういう時期もありましたが、いまは問題ありません(https://~でURLを書くだけ)。

※コピーライトにはタグを使用することができますが、画像ファイルを使用すると、決済ページにてSSLが適用されなくなります。ご注意ください。

トップページ設定 | ネットショップ開業マニュアル | カラーミーショップ

最後に。CSSの疑似要素(::before、::after)とcontentプロパティを使えば、適当な場所に画像やテキストを差し込んだりすることができます。もちろんCSSだけで、すごいですよね。

以上のことは、比較的多くのショップサイトで実践されているのをみかけます。

CSS3のfilterであれの色変更

まだ決済手順画像(赤黒の進捗バー)が残っています。
赤黒の画像とお店の雰囲気が合わないので、消しているショップサイトもみかけます。
長らく変更できませんでしたが、CSSだけでできることが増えて、いまではこの画像も変更できます。

まずは、CSSのfilterプロパティを使って色を変える方法から。

決済画面フィルター適用後

CSS.1

#shopping_step img {
    filter: brightness(120%) hue-rotate(100deg) saturate(60%);
}

CSS.2

a.btn_regi {
    background-position: -230px 0;
    filter: brightness(120%) hue-rotate(100deg) saturate(60%);
    float: left;
    height: 42px;
    margin: 15px 10px 30px;
    width: 230px;
}

filterは比較的新しいプロパティですので、ブラウザのサポート状況を確認してみましょう。
IEはサポート外で、その他はおおむね問題なしという感じです。

filterプロパティを使えば、ふだんPhotoshopなどの画像編集ソフトでやるような、色調補正ができます。
明度、彩度、色相、コントラストなど、その他興味があればfilterプロパティ+CSS3で検索してみてください。

CSS.1は、決済手順画像(赤黒の進捗バー)を緑にしています。
hue-rotateはご覧になったことがあるかもしれません、色相環です。hue-rotate(100deg)は、元の赤色から100度右回転したところの、緑色という意味になります。

CSS.2は、[レジへ進む]ボタンを緑にしています。
filterプロパティの行のみ追加します(その他はすでに書いてあります)。
決済画面の2ページ目からは[次へ進む]ボタンになりますので、このボタンの色も変更する場合は、a.btn_next{}にもfilterプロパティを追加します。

色だけでは満足できない方は、さらに。

セレクタで画像置換

まず最初に、決済画面1ページ目の赤黒の進捗バーを表示するHTMLをみてみましょう。

HTML

<div id="shopping_step">
  <img src="https://secure.shop-pro.jp/img2/regi_step0.gif">
</div>

決済画面が進むにつれ、赤矢印が左から右へ移動していく画像です。各ページごとに画像ファイル名は異なり、regi_step0.gifからregi_step5.gifまで6枚あります。これらを別の画像に差し替えます。

height: 0;で元画像を消して、padding-top: 46px;で背景画像を表示するエリアを確保します。
画像置換については、検索するといくつも手法が載っています(ここでは、そのうちの一つを使っています)。

CSS.3

#shopping_step img[src*="regi_step0"] {
    background-image: url("https://img00.shop-pro.jp/PA00000/000/etc/replace_step0.gif");
}
#shopping_step img[src*="regi_step1"] {
    background-image: url("https://img00.shop-pro.jp/PA00000/000/etc/replace_step1.gif");
}
#shopping_step img[src*="regi_step2"] {
    background-image: url("https://img00.shop-pro.jp/PA00000/000/etc/replace_step2.gif");
}
#shopping_step img[src*="regi_step3"] {
    background-image: url("https://img00.shop-pro.jp/PA00000/000/etc/replace_step3.gif");
}
#shopping_step img[src*="regi_step4"] {
    background-image: url("https://img00.shop-pro.jp/PA00000/000/etc/replace_step4.gif");
}
#shopping_step img[src*="regi_step5"] {
    background-image: url("https://img00.shop-pro.jp/PA00000/000/etc/replace_step5.gif");
}

#shopping_step img  {
    display: block;
    height: 0;
    padding-top: 46px;/*画像高さ*/
    width: 100%;
}

実際にやってみたサンプル

赤矢印が右から左へ移動するような画像を作り、カラーミーショップに上げています。
ショップサイトに合うデザインで画像を作って配置すれば、すっきり整った決済画面が完成します。

おわりに

PCから閲覧されているお客さまが多いお店ですと、旧ショッピングカートのデザインに手間をかけるのもよいかもしれません。
スマホの決済画面はCSS編集できませんので、カスタマイズできません。

デベロッパーツールはカスタマイズにほぼ必須です。機会があれば、よい資料を探してご紹介したいです。

補足ですが、Googleのコメントによれば、画像置換はスパム認定されやすく検索順位を下げる要因になります。
とはいえ、今回の画像置換に関しては、決済画面とショップサイトのドメインが異なり、ショップサイトには影響がないことと、決済画面のあるsecure.shop-pro.jpは、もともと検索エンジンの巡回拒否の設定をrobots.txtでしているので、問題はなさそうです。

よく読まれている記事