Diver のランキング機能の使い方のすべて【表示サンプルあります】

 

 

ワードプレステーマ Diver の入力補助機能の1つ、「ランキング機能」の使い方を解説します。

１．Diver のランキング機能の使い方

Diver のランキング機能は、投稿編集画面から 入力補助 ＞ ランキング をクリックすることで呼び出すことができます。

↓　　　↓　　　↓

 

こちらが実際のランキングの設定画面です。

 

２．Diver ランキング機能各項目の解説

Diver のランキング機能の設定項目は、全部で11箇所あります。

各項目の設定方法を確認していきましょう。

 

2-1 ランキング順位

ランキング画面の左上に表示される順位を設定できます。

 

1位は金メダル、2位は銀メダル、3位以降は銅メダルに数字を重ねて表示されます。

 

2-2 評価

商材タイトルの下に表示する星の数を設定できます。

 

入力補助のレビュー機能と同じように、小数点まで設定することが可能です。

 

2-3 表示スタイル

2カラム表示(左)と、1カラム表示(右)の2種類から、表示スタイルを設定できます。

 

以下、2カラムと、1カラムのランキング表示例です。

（ボタンのリンク先は、わー研。トップページです）

 

2-3 タイプ

商材タイトルの見出しタイプを選択します。

 

見出しタイプは5種類あります。

 

2-4 商材タイトル

紹介する商材のメインタイトルをここに入力します。

 

このようにランキング画面の1番上に表示されます。

 

2-5 商材小見出し

商材小見出し（サブタイトル）をここに入力します。

 

商材小見出しは、黄色の吹き出しの部分に表示されます。

 

2-6 説明文

商材の説明文をここに入力します。

 

説明文は、商材小見出しの下に表示されます。

 

2-7 紹介画像

紹介画像をここで設定します。

 

商材タイトル下、一際目立つスペースに画像が表示されます。

 

2-8 備考

商材に関しての備考があればここに入力します。

 

紹介画像と説明文の下の、枠に囲まれた部分に備考テキストが表示されます。

 

2-9 購入ボタン

購入ボタンの設定をここで行います。

通常(テキスト+URL) または 広告タグ(HTML) の、どちらかから選択して入力しましょう。

または

 

ボタンの背景色 と テキスト色 も変更できます。

 

購入ボタンは以下のように表示されます。

 

2-10 詳細ボタン

詳細ボタンの設定を行います。

設定方法は、購入ボタンと全く同じやり方です。

 

詳細ボタンは、購入ボタンの右横に表示されます。

 

2-11 枠線設定

枠線の 太さ と 色 をここで設定します。

 

枠線はランキングの周りを囲む形で表示されます。

 

３．Diver ランキング表示サンプル

この機能を使って、実際にランキングを表示させたサンプルを

２つほど作ってみましたので参考にしてください。

 

２カラムにボタン２つ、備考ありバージョンです。

（スマホまたはタブレットだと両方同じデザインに見えます）

 

こちらは、１カラムにボタン１つ、備考なしバージョン。

 

さいごに

今回は、Diver の入力補助機能の１つ

ランキング機能に絞って使い方を解説しました。

 

ランキングサイトや比較サイトはもちろんのこと

通常の商品紹介ページなどでアピールできる、とても便利な機能です。

 

最後にこのページのおさらいをしておきましょう。

 

 

注目の記事現役アフィリエイターが Diver をおすすめする７つの理由【もう他のテーマはいりません】

注目の記事Diver の入力補助機能のすべてを徹底解説