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

 

山本
今回は、Diver のランキング機能について解説していくよ

わかば
あーそれ、あるのは知ってたんですけど
なんか難しそうで敬遠してたんですよね...

山本
すごく有用な機能だから、ここで使い方を覚えちゃおう!

 

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

1.Diver のランキング機能の使い方

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

Diverの入力補助機能ボタン

↓   ↓   ↓

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

 

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

ランキング

わかば
設定する箇所がたくさんあってちょっと難しそうなんですよね

山本
それじゃあ設定項目を1つずつ一緒に見ていこう!

 

2.Diver ランキング機能各項目の解説

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

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

 

2-1 ランキング順位

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

ランキング順位

 

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

ランキング順位

 

2-2 評価

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

評価

 

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

評価

 

2-3 表示スタイル

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

表示スタイル

 

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

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

山本
スマホやタブレットだと両方とも同じデザインに見えます

2カラム表示例

商材タイトル
商材小見出し
説明文
備考

1カラム表示例

商材タイトル
商材小見出し
説明文
備考

 

2-3 タイプ

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

タイプ

 

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

  • div(ブロック)
  • h2(見出し2)
  • h3(見出し3)
  • h4(見出し4)
  • h5(見出し5)

山本
通常、「div」を選択しておけば大丈夫です

 

2-4 商材タイトル

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

商材タイトル

 

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

商材タイトル

山本
通常は、紹介する商品名をそのままここに入力します

 

2-5 商材小見出し

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

商材小見出し

 

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

商材小見出し

山本
商材小見出しは、特になければ空欄のままでもOKです

 

2-6 説明文

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

説明文

 

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

説明文

山本
ここはあまり長くなりすぎず簡潔に説明するようにしましょう
リストデザインを使って表示させるのもわかりやすくていいですね

 

2-7 紹介画像

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

紹介画像

 

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

紹介画像

 

2-8 備考

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

備考

 

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

備考

山本
特になければ空欄のままでも大丈夫です

 

2-9 購入ボタン

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

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

購入ボタン

または

購入ボタン

 

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

購入ボタン

 

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

購入ボタン

山本
詳細ボタンがないときは、横幅いっぱいに表示されます

 

2-10 詳細ボタン

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

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

詳細ボタン

 

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

詳細ボタン

山本
URLを空欄にしておくと、詳細ボタンは表示されません

 

2-11 枠線設定

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

枠線設定

 

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

ランキングの枠線

山本
太さを 0px のままにしておくと枠線は表示されません

 

3.Diver ランキング表示サンプル

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

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

 

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

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

わー研。
アフィリエイトで ”本気で” 稼ぐなら
  • アフィリエイトで稼ぐための一番の近道
  • ブログの運営方法のすべてがわかる
  • 画像と文章でわかりやすい解説
  • メルマガでさらにディープな情報をお届け
  • 無料特典もご用意してます
わー研。の記事を見ながら毎日少しずつ実践していただくことで、まったくの初心者の方でも、確実に稼げるブログを作成することができるようになります。公式サイトへは下部のボタンから移動できます。ご不明な点などありましたら、コメント欄またはお問い合わせよりご連絡ください。

 

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

わー研。
ブログアフィリエイトの決定版
ブログ型アフィリエイトの決定版!
「ワードプレスなにそれ?おいしいの?」という状態から、ブログだけで一般的な会社員の給料よりも稼げるようになるまで、あなたを徹底サポート!
毎日少しずつでもいいので実践して、ブラック企業という呪縛から解き放たれましょう!

わかば
しれっと、わー研。の宣伝してません!?

山本
いやいやそんなつもりじゃないんだけどね

 

さいごに

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

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

 

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

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

 

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

  • Diver ランキング機能の呼び出し方
  • Diver ランキング機能の各項目の解説
  • Diver ランキング機能を実際に使用した表示サンプル

 

わかば
これは思わずクリックしたくなっちゃいますよね!

山本
設定も簡単でユーザーにアピールすることができるから
どんどん積極的に使っていきたい機能だよね!

 

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

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

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で利用が可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事