こんにちは、makeshopデザイン質問掲示板担当です。
今回は、デザインセット【Complete】（コンプリート）の、ランキングの順位の装飾の変更方法をご紹介します。
こんなお悩みありませんか？
・ランキングを表示させてみたけど、なんだか地味・・・。
・人気の商品が目立つように飾りたい。
この記事を参考にデザインをアレンジしてみましょう。
「ランキング」の表示について
まずはランキングについておさらいです。
『ランキング』は管理画面の「ランキング表示設定」から設定できます！
参考：オンラインマニュアル「ランキング表示設定」
ランキングの順位表示のデザインを変えてみよう
【Complete】テンプレートの初期値では、ランキングの順位の数字が〇（丸）で囲まれているようにCSSでデザインされています。
今回はこちらをリボンのようなデザインへ変更する例をご紹介します。
１.バックアップを保管！
編集の前には、かならずデザインセットをコピーしましょう。
意図しない表示になった場合でも、コピーをショップに適用することですぐに元に戻すことができます。
万が一にそなえてバックアップしよう！
必要な記述をうっかり消したかも！？そんな場合にもバックアップがあれば大丈夫です。
関連記事：ショップデザインバックアップしてますか？！
２. CSSを確認
ランキングの順位の数字にデザインを指定しているCSSを探します。
クリエイターモード
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通
「CSS」欄
CSS入力欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し、表示される検索窓に
rankと入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。
▼CSS
.ranking-icon {
position: absolute;
top: 8px;
left: 8px;
text-align: center;
background-color: white;
border-radius: 50%;
font-size: 12px;
color: #333333;
width: 30px;
height: 30px;
line-height: 2.5;
}
.rank-1 {
background: #D1AF28;
color: #fff;
}
.rank-2 {
background: #ABA8A8;
color: #fff;
}
.rank-3 {
background: #D18858;
color: #fff;
}
３. CSSを変更
上記1.で見つけたCSSの記述を、以下のCSSに変更し保存してください。
▼CSS
.ranking-icon {
display: inline-block;
position: absolute;
top: 0;
left: 10px;
margin: 0;
padding: 6px 0;
z-index: 2;
width: 40px;
text-align: center;
font-size: 17px;
color: white;
background: #a09b88; /*順位のアイコンの背景色*/
}
.ranking-icon:after {
content: '';
position: absolute;
left: 0;
top: 100%;
height: 0;
width: 0;
border-left: 20px solid #a09b88; /*順位のアイコンの背景色*/
border-right: 20px solid #a09b88; /*順位のアイコンの背景色*/
border-bottom: 10px solid transparent;
}
/* 1位 */
.rank-1 {
background: #D1AF28;
color: #fff;
}
.rank-1:after {
border-left: 20px solid #D1AF28;
border-right: 20px solid #D1AF28;
}
/* 2位 */
.rank-2 {
background: #ABA8A8; /*2位の背景色*/
color: #fff;
}
.rank-2:after {
border-left: 20px solid #ABA8A8;
border-right: 20px solid #ABA8A8;
}
/* 3位 */
.rank-3 {
background: #D18858;
color: #fff;
}
.rank-3:after {
border-left: 20px solid #D18858;
border-right: 20px solid #D18858;
}
アイコンの基本の色は「.ranking-icon」と「.ranking-icon:after」に■#a09b88を指定しています。
１、２、３位の色はそれぞれ、.rank-1、.rank-2、.rank-3とそれぞれの「:after」に指定しています。
好きなカラーコードを記述してください。
４. CSSを保存
CSSの編集（コピー＆ペースト）ができたら、忘れずに
保存
ボタンをクリックしてください。
アイコンのデザインが変わりました。
かんたんですね！
このほか、画像を表示させることもできます。
よくある質問：【クリエイターモード】ランキングの順位のアイコンに画像を表示させることはできますか。をご参照ください。
いかがでしたでしょうか。
好みのデザインを貼り付けて、ランキングのデザインを工夫してみてください。
それではまた！
