Welcart カスタマイズ ブログ

CSSだけで出来るカートページのナビゲーションデザイン

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook

Welcartのカートページのナビゲーションを、CSSで色々とデザインしてみました。

カートページのCSSのカスタマイズは、使用中のテーマにusces_cart.cssというスタイルシートを作って設置します。すると、ブラウザ上でテーマ内のusces_cart.cssが、プラグイン内の同じファイルよりも後に読み込まれるようになるため、スタイルが上書きされる仕組みで適用されます。

紹介するコードは、全てスマートフォン対応のレスポンシブCSSです。ブレイクポイント（読み込むCSSを切り替える画面幅）は40.061emになっています。これは拙作Welcart対応のWordPress公式ディレクトリ登録テーマで取り入れているフレームワークFoundation5と同じです。必要に応じて変えて下さい。

また、お使いのテーマによっては位置のずれやスタイル適用の優先順位の差などが出てくると思うので、こちらも必要に応じて調節して下さい。

もくじ

1. Welcart対応テーマ「BLANC」のスタイル
2. Amazon風ナビゲーション
3. 矢印のナビゲーション
4. BOX風ナビゲーション
5. まとめ

1. Welcart対応テーマでのスタイル

拙作Welcart対応のWordPressテーマ（DL/デモ）でのデザインです。番号をつけてわかりやすさを重視。

PC・タブレット

スマートフォン

div.usccart_navi ol.ucart {
    counter-reset: cart_num;
    height: initial;
}
div.usccart_navi ol.ucart:after {
    display: block;
    content: '';
    clear: both;
}
div.usccart_navi li.ucart {
    width: 25%;
    height: initial;
    padding: 10px 0;
    border-bottom: 2px solid #aaa;
    border-right: 1px solid #fff;
    background: #f4efe3;
    color: #ccc;
    line-height: normal;
    box-sizing: border-box;
}
div.usccart_navi li.ucart:before {
    counter-increment: cart_num;
    content: counter(cart_num);
    display: inline-block;
    width: 1.5em;
    margin-right: 5px;
    border-radius: 50%;
    background: #fff;
    line-height: 1.5em;
    font-weight: bold;
    text-align: center;
}
div.usccart_navi li.ucart:last-child {
    border-right:none;
}
div.usccart_navi li.usccart_cart,
div.usccart_navi li.usccart_customer,
div.usccart_navi li.usccart_delivery,
div.usccart_navi li.usccart_confirm{
    border-bottom: 2px solid #d35134!important;
    background: #f3ec70!important;
    color: #333!important;
}

@media
only screen and (max-width : 40.061em) {
    div.usccart_navi li.ucart {
        width: 50%;
        padding-left: 10px;
        text-align: left;
    }
    div.usccart_navi li.ucart:nth-child(2){
        border-right: none;
    }
}

2. Amazon風ナビゲーション

Amazonと比べると完全には同じ・・・ではないですが、そこはツッコまないように。飽くまでもAmazon「風」です。

PC・タブレット

スマートフォン

ここではカートのアイコンにFontAwesomeを使っています。FontAwesomeを使うには、FontAwesomeのスタイルシート（CDN）をヘッダーで読み込みます。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

もちろん、わかる方ならfunctions.phpの中でwp_enqueue_styleを使って読み込む方法もOKです。

スタイルシートは以下より。

div.usccart_navi ol.ucart {
    position: relative;
    height: initial;
}
div.usccart_navi ol.ucart:after {
    display: block;
    content: '';
    clear: both;
}
div.usccart_navi ol.ucart:before {
    position: absolute;
    top: -15px;
    content: '\f07a';
    font-family: 'FontAwesome';
    font-size: 20px;
}
div.usccart_navi li.ucart {
    width: 25%;
    height: initial;
    line-height: normal;
    padding-top: 10px;
    background: transparent;
    border-top: 2px solid #ccc;
    color: #ddd;
}
#inside-cart li.usccart,
#customer-info li.usccart,
#customer-info li.usccustomer,
#delivery-info li.usccart,
#delivery-info li.usccustomer,
#delivery-info li.uscdelivery,
#info-confirm li.ucart {
    border-top-color: orange;
    color: orange;
}
#inside-cart ol.ucart:before {
    left: 11%;
}
#customer-info ol.ucart:before {
    left: 36%;
}
#delivery-info ol.ucart:before {
    left: 61%;
}
#info-confirm ol.ucart:before {
    left: 86%;
}

@media
only screen and (max-width : 40.061em) {
    div.usccart_navi li.ucart {
        width: 50%;
        margin-bottom: 20px;
    }
    #inside-cart ol.ucart:before {
        left: 23%;
        top: -13%;
    }
    #customer-info ol.ucart:before {
        left: 73%;
        top: -13%;
    }
    #delivery-info ol.ucart:before {
        left: 23%;
        top: 37%;;
    }
    #info-confirm ol.ucart:before {
        left: 73%;
        top: 37%;
    }
}

3. 矢印のナビゲーション

Apple社のサイトのパンくずリストをイメージ。色をなしにするとApple風にすることも出来ますが、カートのナビゲーションとしてはわかり辛いため、少し色付けをしました。

PC・タブレット

スマートフォン

ちなみにApple社のパンくずリストはこんな感じです。

矢印風になるスタイルの作り方を参考にさせて頂いたサイトはこちらです。

Breadcrumb Navigation with CSS Triangles – CSS-TRICKS

div.usccart_navi ol.ucart {
    height: initial;
    border: 2px solid #ddd;
    border-radius: 5px;
    list-style: decimal inside;
    box-sizing: border-box;
}
div.usccart_navi ol.ucart:after {
    display: block;
    content: '';
    clear: both;
}
div.usccart_navi li.ucart {
    position: relative;
    width: 25%;
    height: initial;
    line-height: normal;
    padding: 10px 0 10px 1em;
    background: transparent;
    color: #ccc;
    box-sizing: border-box;
}
div.usccart_navi li.ucart:before {
    content:'';
    position: absolute;
    top: 50%;
    left: 100%;
    display: block;
    width: 0;
    height: 0;
    margin: -1.5em 0 0 2px;
    border-top: 1.5em solid transparent;
    border-bottom: 1.5em solid transparent;
    border-left: 1em solid #ddd;
    z-index: 1;
}
div.usccart_navi li.ucart:after{
    content:'';
    position: absolute;
    top: 50%;
    left: 100%;
    display: block;
    width: 0;
    height: 0;
    margin-top: -1.5em;
    border-top: 1.5em solid transparent;
    border-bottom: 1.5em solid transparent;
    border-left: 1em solid #fff;
    z-index: 2;
}
div.usccart_navi li.ucart:last-child:before,
div.usccart_navi li.ucart:last-child:after {
    content: none;
}
#inside-cart li.usccart,
#customer-info li.usccart,
#customer-info li.usccustomer,
#delivery-info li.usccart,
#delivery-info li.usccustomer,
#delivery-info li.uscdelivery,
#info-confirm li.ucart {
    background: #f0f0f0;
}
#inside-cart li.usccart,
#customer-info li.usccustomer,
#delivery-info li.uscdelivery,
#info-confirm li.uscconfirm{
    color: #e75252;
}
#inside-cart li.usccart:after,
#customer-info li.usccart:after,
#customer-info li.usccustomer:after,
#delivery-info li.usccart:after,
#delivery-info li.usccustomer:after,
#delivery-info li.uscdelivery:after,
#info-confirm li.ucart:after {
    border-left-color: #f0f0f0;
}
@media
only screen and (max-width : 40.061em) {
    div.usccart_navi li.ucart {
        width: 50%;
    }
    div.usccart_navi li.usccart,
    div.usccart_navi li.usccustomer {
        border-bottom: 2px solid #ddd;
    }
    div.usccart_navi li.ucart:nth-child(2):before,
    div.usccart_navi li.ucart:nth-child(2):after {
        content: none;
    }
}

4. BOXタイプのナビゲーション

至ってシンプル。色を変えればどんな雰囲気にも出来ます。

PC・タブレット

スマートフォン

div.usccart_navi ol.ucart {
    height: initial;
    list-style: decimal inside;
}
div.usccart_navi ol.ucart:after {
    display: block;
    content: '';
    clear: both;
}
div.usccart_navi li.ucart {
    height: initial;
    line-height: normal;
    margin-right: 1%;
    padding: 10px 0;
    border: 2px solid #7e8f7c;
    border-radius: 5px;
    background: #fdf3e7;
    color: #7e8f7c;
    box-sizing: border-box;
}
div.usccart_navi li.usccart_cart,
div.usccart_navi li.usccart_customer,
div.usccart_navi li.usccart_delivery,
div.usccart_navi li.usccart_confirm {
    background: #c63d0f;
    color: #fff;
}
@media
only screen and (max-width : 40.061em) {
    div.usccart_navi li.ucart {
        width: 49%;
        margin-bottom: 3px;
        padding-left: 10px;
        text-align: left;
    }
}

5. まとめ

CSSだけなので、コピペすれば着せ替え感覚で取り入れられます。色などを自由に変えてアレンジしてみて下さい。

カートページのナビゲーションは、わかりやすいことが最低必須条件です。懲りすぎず、ユーザー目線でデザインしましょう。

• カートページ
• デザイン

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook