Table of Contents
本内容は、ランキングのデザインを細かく調整するための設定箇所です。
「ランキングデザインの調整」 #
①.ランキングの見出しの設定 #
「ランキング見出し」→「任意のテキスト」
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_1①-1024x279.png)
②.スライダーの設定 #
「スライダー」→「任意の設定」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_2②-1024x451.png)
「パディング(上)」→「任意の設定」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_3②-1024x476.png)
「パディング(下)」→「任意の設定」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_4②-1-1024x505.png)
「パディング(左右)」→「任意の設定」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_5②-1024x456.png)
③.リンクボタンの設定 #
「リンクボタンテキスト」→「任意のテキスト」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_6③-1024x463.png)
「リンクボタンURL」→「任意のURL」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_7③-1024x509.png)
「リンクボタン色」→「任意のカラー」
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_8③-1024x621.png)
④.順位アイコンの設定 #
「順位のアイコンの種類」→「任意のアイコン」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_9④-1024x522.png)
「順位の位置」→「任意の位置」
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_10④-1024x469.png)
⑤.レイアウト設定 #
「表示商品数」→「任意の設定」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_11⑤-1024x590.png)
「1行あたりの商品数(PC)」→「任意の数値」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_12⑤-1024x590.png)
「1行あたりの商品数(モバイル)」→「任意の数値」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_13⑤-1024x614.png)
「商品画像間のマージン(左右)(PC)」→「任意の数値」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_14⑤-1024x462.png)
「商品画像間のマージン(上下)(PC)」→「任意の数値」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_15⑤-1024x462.png)
「商品画像間のマージン(左右)(モバイル)」→「任意の数値」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_16⑤-1024x560.png)
「商品画像間のマージン(上下)(モバイル)」→「任意の数値」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_17⑤-1024x560.png)
⑥.商品画像設定 #
「画像の縦横比」→「任意の設定」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_18⑥-1024x687.png)
「マウスオーバー時の挙動」→「任意の設定」
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_19⑥-1024x687.png)
⑦.さらに細かく設定する場合 #
さらに各項目を設定したい場合は以下の項目からそれぞれ設定可能です。
「埋め込みアプリ」→
![](https://rank-king.net/site/wp-content/uploads/2024/03/初期設定5_20⑦-1024x329.png)
ランキングリストの設定:ランキングアイコンのカラーや幅の設定ができます。
商品カードの設定:売り切れバッジの設定や、商品の背景や幅の設定ができます。
商品情報のフォント設定:商品情報のフォントのカラーやサイズの設定ができます。
(タブ)フィルター設定:タブフィルターの見出しや幅の設定ができます。
(ドロップダウン)フィルター設定:ドロップダウンフィルターの幅やフォントの設定できます。
以上が、ランキングデザイン調整についての設定方法です。