こんにちは、makeshopデザイン質問掲示板担当です。
いつもmakeshopをご利用いただきありがとうございます。
この記事では
「HTMLを編集せずにCSSの追記だけでカートに入れるボタンを装飾したい」
という方向けに、コピペ(コピー＆ペースト)で使える CSS を6パターン用意しました。
テンプレート【Complete】では元のカートに入れるボタンのデザインは下記の色です。
カートに入れる
単純にボタンの背景色を変更したい場合は、
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」欄
こちらの末尾に色の指定を追記してください。
/* カートに入れるボタンの色変更 */
.add-list-cart,
.add-cart .add-cart-btn,
.cart-button-wrap .cart-button a {
background: #d51f1f!important;
}
カートに入れる
上記では元のカラーコード■#1FD5ADから■#d51f1fに変更しています。
CSSって何ですか？
CSS (Cascading Style Sheets)とはWebページの文字の色や大きさなどのスタイル（見た目）を設定する言語です。今回のデザイン変更はCSSの追記だけでおこないます。
CSSについては、下記のサポート記事もあわせてご参照ください！
【初めてのHTML/CSS】CSS（スタイルシート）の基本の書き方と「id/class」について
全部のページに反映されちゃうの？
クリエイターモードでは”全ページ共通”と、”ページごと”に「CSS」欄があります。
“ページごと”の「CSS」を活用することで、指定したページにのみ適用させることができます。
トップページのみの場合は、トップ「CSS」欄
カテゴリーページのみの場合は、商品カテゴリー「CSS」欄
検索結果ページのみの場合は、商品検索結果「CSS」欄
商品詳細ページのみの場合は、商品詳細「CSS」欄
上記すべてのページの場合は 全ページ共通「CSS」欄
各ページの入力欄に追記するCSSの内容を変更することで、各ページごとに異なるデザインを適用できます。
＜表示例＞
・トップページはDesign 02に変更
・商品詳細ページはDesign 05に変更
早速やってみよう！
やり方は超シンプルです。
1. 【Complete】テンプレートを追加
2. 好きなデザインの CSS をまるごとコピー
3. 反映させたいCSSを適用させたいページの「CSS」欄の末尾にペースト
に追記をおためしください。
※複数デザインを同時に貼ると競合します。必ず１つずつ使ってください。
例としてサンプルショップ【Complete】にコピペした場合と同じ表示例をのせています。
（基本的にCSSの内容はクリエイターモードのすべてのテンプレートで使用可能ですが、記述位置や内容によってはテンプレートの初期値のCSSの影響などで意図した表示にならない場合もございます。また、class名などが異なるためテンプレート内のclass名に変更するなどをお試しください）
万が一にそなえてデザイン編集する前にバックアップをとりましょう！
うっかり変なところにコピペしちゃったかも！？そんな場合にもバックアップがあれば大丈夫です！
関連記事：ショップデザインバックアップしてますか？！
各デザインプレビューとして表示されているボタンにカーソルをあわせると、動きが確認できます。
Design 01: 白から色替え
カートに入れる
/* Design 01: 白から色替え */
.item-list-cart .add-list-cart.item-list-btn,
.add-cart .add-cart-btn{
background: transparent;
color: #1FD5AD;
border: 2px solid #1FD5AD;
transition: all 0.3s ease;
}
.item-list-cart .add-list-cart.item-list-btn:hover,
.add-cart .add-cart-btn:hover{
background: #1FD5AD;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(31, 213, 173, 0.3);
}
Design 02：ホバー左右アクション
カートに入れる
/* Design 02：ホバー左右アクション */
.item-list-cart .add-list-cart,
.add-cart-btn {
position: relative;
background: #28a745!important;
color: #fff;
overflow: hidden;
transition: background 0.3s, transform 0.3s;
}
.item-list-cart .add-list-cart:hover,
.add-cart-btn:hover {
background: #218838;
transform: scale(1.05);
}
.item-list-cart .add-list-cart::before,
.add-cart-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
transition: left 0.3s;
}
.item-list-cart .add-list-cart:hover::before,
.add-cart-btn:hover::before {
left: 100%;
}
.item-list-cart .add-list-cart:active,
.add-cart-btn:active {
transform: scale(0.95);
background: #1e7e34;
}
Design 03：グラデーション
カートに入れる
/* Design 03：グラデーション */
.item-list-cart .add-list-cart,
.add-cart-btn {
background: linear-gradient(135deg, #1FD5AD 0%, #9b59b6 100%)!important;;
color: #fff;
border-radius: 4px;
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.item-list-cart .add-list-cart:hover,
.add-cart-btn:hover {
transform: translateY(-3px) scale(1.1); /* 拡大のみ */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
background: linear-gradient(135deg, #3498db 0%, #9b59b6 100%); /* 色の変化 */
}
.item-list-cart .add-list-cart:active,
.add-cart-btn:active {
transform: translateY(1px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.item-list-cart .add-list-cart::before,
.add-cart-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
transition: left 0.3s;
}
.item-list-cart .add-list-cart:hover::before,
.add-cart-btn:hover::before {
left: 100%;
}
Design 04：ブースト＆グロー
カートに入れる
/* Design 04: ブースト＆グロー */
.item-list-cart .add-list-cart,
.add-cart-btn {
background: #6a05ad!important;
color: #e9ecef;
border-radius: 4px;
border: none;
position: relative;
overflow: hidden;
transition: color 0.35s ease-out, transform 0.35s cubic-bezier(0.25, 0.8, 0.5, 1.2), box-shadow 0.35s ease-out;
box-shadow: 0 6px 15px rgba(106, 5, 173, 0.3);
display: inline-block;
text-align: center;
font-weight: bold;
opacity: 1;
z-index: 1;
}
.item-list-cart .add-list-cart::before,
.add-cart-btn::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0%;
height: 100%;
background: #00d48a;
transform: translateX(-100%);
transition: width 0.4s ease-out, transform 0.4s ease-out;
z-index: -1;
}
.item-list-cart .add-list-cart::after,
.add-cart-btn::after {
content: '';
position: absolute;
top: 0;
right: 50%;
width: 0%;
height: 100%;
background: #00d48a;
transform: translateX(100%);
transition: width 0.4s ease-out, transform 0.4s ease-out;
z-index: -1;
}
.item-list-cart .add-list-cart:hover,
.add-cart-btn:hover {
color: #212529;
transform: translateY(-7px) scale(1.05);
box-shadow: 0 15px 30px rgba(0, 212, 138, 0.5),
0 0 40px rgba(0, 212, 138, 0.3);
opacity: 1;
}
.item-list-cart .add-list-cart:hover::before,
.add-cart-btn:hover::before {
width: 100%;
transform: translateX(0);
}
.item-list-cart .add-list-cart:hover::after,
.add-cart-btn:hover::after {
width: 100%;
transform: translateX(0);
}
.item-list-cart .add-list-cart:active,
.add-cart-btn:active {
background: #008a5a;
color: #e9ecef;
border: none;
transform: translateY(0) scale(0.96);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
opacity: 1;
}
Design 05：紅白ボタン
カートに入れる
/* 05：紅白ボタン */
.item-list-cart .add-list-cart,
.add-cart-btn {
background: #e63946!important;
color: #ffffff;
border-radius: 30px!important;
border: none;
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: inline-block;
text-align: center;
font-weight: bold;
cursor: pointer;
outline: none;
}
.item-list-cart .add-list-cart::before,
.add-cart-btn::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border-radius: 25px!important;
border: 3px solid transparent;
transition: border-color 0.3s ease-out;
pointer-events: none;
}
.item-list-cart .add-list-cart:hover::before,
.add-cart-btn:hover::before {
border-color: #ffffff;
}
.item-list-cart .add-list-cart:hover,
.add-cart-btn:hover {
background: #d62839;
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.item-list-cart .add-list-cart:active,
.add-cart-btn:active {
transform: scale(0.95);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
Design 06：ブルーグレー
カートに入れる
/* Design 06:ブルーグレー */
.item-list-cart .add-list-cart,
.add-cart-btn {
background: #2c3e50!important;
color: #ecf0f1!important;
font-family: sans-serif;
font-size: 1em;
border: 2px solid #2c3e50;
border-radius: 0!important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
position: relative;
transition: background 0.3s, color 0.3s;
}
.item-list-cart .add-list-cart::before,
.add-cart-btn::before {
content: '';
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
border: 1px solid #2c3e50;
pointer-events: none;
}
.item-list-cart .add-list-cart:hover,
.add-cart-btn:hover {
background: #ecf0f1!important;
color: #2c3e50!important;
}
.item-list-cart .add-list-cart:active,
.add-cart-btn:active {
background: #b0c4de!important;
color: #2c3e50!important;
}
もっと他のデザインにしたい！というショップ様は
検索サイトにて「ボタン デザイン CSS コピペ」のキーワードで検索することで、
いろいろなボタンのアイディアを探してみましょう！
色・サイズを変えるコツ
1. 背景色と文字色は「読める？」を合言葉にコントラストをチェック
→背景色はbackground、文字色はcolorで指定されています🔍️
2. スキマ感が気になるときは padding／margin を増減してみよう🤏
3. 角丸と影は border-radius / box-shadow の数値を動かしてみよう👍️
4. 好きな色に替えたい時はカラーコードを入れ替えるだけ（例：#1FD5AD）🎨
※カラーコードは外部サイトを参考にしてください。外部参考サイト：カラーコード表
いかがでしたでしょうか。
好みのデザインを貼り付けて、ショップのボタンをアップグレードしてみてください！
それではまた！
