DIVERの入力補助「ランキング」の挿入と他サイトと被らないための工夫

おすすめ評価順位など、記事を書く時に何かと必要となるのが「ランキング」

DIVER(ダイバー)の入力補助「ランキング」は、プラグインやコード不要で簡単に挿入でき手軽です。

作ったランキングは記事中のどこでも挿入でき、シンプルだけど整ったデザインで素敵に仕上がります。

そのまま挿入しても十分使えるのですが、他の入力補助と組み合わせると更に見栄えが良いです。

色んな入力補助を組み合わせると、他サイトとも被らない工夫にもなるので入力補助を駆使して自分オリジナルのランキングを作ってみてください。

クルミ
被らないのは大事ですよね。
ナッツ
オリジナリティ最強!

DIVER(ダイバー)の入力補助で作れる3タイプの「ランキング」のデザイン

DIVERの入力補助のランキングの画像左デザイン
DIVERの入力補助のランキングの画像中央デザイン
DIVERの入力補助のランキングの画像右デザイン

DIVER(ダイバー)の入力補助「ランキング」では画像の位置を変えて左・中央・右3タイプのデザインのランキングを作ることができます。

テーマDIVER(ダイバー)でランキング例を作ってみたのでデザインの違いを確かめてみてください。

スマホなどの小さい画面では画像の位置関係なく全て中央配置のデザインになります。

画像左タイプ

長く使い続けるならwordpressのテーマ「DIVER(ダイバー)」
このテーマを使いこなせるかどうかはあなた次第!?

ワードプレス初心者・ベテラン問わず、使い込むほどにサイト運営が楽しくなるワードプレスのテーマ「DIVER」。
カスタマイズ性が高く機能が豊富だからこのテーマを使いこなすのは少し大変かも?

コンテンツが豊富でカスタマイズが自由なハイスペックテーマ「DIVER(ダイバー)」。
シンプルなデザインながらも洗練されたDIVERのデザインは魅力的にサイトをみせてくれます。
サイトの構築で必要なHTMLやCSSは全く触らずに、直感的な操作だけで見た目にも整ったサイトへと仕上がるのが面白くて不思議です。
ワードプレス初心者には難しいサイトの装飾も、多彩な入力補助のサポートがあるから誰でも安心して使いこなすことができます。
その上、カスタマイズ量が多く自由度が高いからベテランでも満足のいくサイトを作り込むことができ、初心者からベテランの要望にも応えられます。
SEO対策はもちろん対策済み。
日々、アップデートされていてるから常に最新のテーマが使い続けられる向上心のあるwordpressのテーマ「DIVER」を一度使ってみてください。
使い込むほどにサイトの質が高くなり、知れば知るほどその良さを体感できます。

画像が左タイプでランキングでは1位表示にしてみました。

一番よくみられるパターンだと思います。

画像左タイプ

長く使い続けるならwordpressのテーマ「DIVER(ダイバー)」
このテーマを使いこなせるかどうかはあなた次第!?

ワードプレス初心者・ベテラン問わず、使い込むほどにサイト運営が楽しくなるワードプレスのテーマ「DIVER」。
カスタマイズ性が高く機能が豊富だからこのテーマを使いこなすのは少し大変かも?

コンテンツが豊富でカスタマイズが自由なハイスペックテーマ「DIVER(ダイバー)」。
シンプルなデザインながらも洗練されたDIVERのデザインは魅力的にサイトをみせてくれます。
サイトの構築で必要なHTMLやCSSは全く触らずに、直感的な操作だけで見た目にも整ったサイトへと仕上がるのが面白くて不思議です。
ワードプレス初心者には難しいサイトの装飾も、多彩な入力補助のサポートがあるから誰でも安心して使いこなすことができます。
その上、カスタマイズ量が多く自由度が高いからベテランでも満足のいくサイトを作り込むことができ、初心者からベテランの要望にも応えられます。
SEO対策はもちろん対策済み。
日々、アップデートされていてるから常に最新のテーマが使い続けられる向上心のあるwordpressのテーマ「DIVER」を一度使ってみてください。
使い込むほどにサイトの質が高くなり、知れば知るほどその良さを体感できます。

画像が中央、ランキングでは2位を表示、小見出しをブロックで表示してみました。

全体を中央揃えにして表示にするとこんな感じです。

画像右タイプ

長く使い続けるならwordpressのテーマ「DIVER(ダイバー)」
このテーマを使いこなせるかどうかはあなた次第!?

ワードプレス初心者・ベテラン問わず、使い込むほどにサイト運営が楽しくなるワードプレスのテーマ「DIVER」。
カスタマイズ性が高く機能が豊富だからこのテーマを使いこなすのは少し大変かも?

コンテンツが豊富でカスタマイズが自由なハイスペックテーマ「DIVER(ダイバー)」。
シンプルなデザインながらも洗練されたDIVERのデザインは魅力的にサイトをみせてくれます。
サイトの構築で必要なHTMLやCSSは全く触らずに、直感的な操作だけで見た目にも整ったサイトへと仕上がるのが面白くて不思議です。
ワードプレス初心者には難しいサイトの装飾も、多彩な入力補助のサポートがあるから誰でも安心して使いこなすことができます。
その上、カスタマイズ量が多く自由度が高いからベテランでも満足のいくサイトを作り込むことができ、初心者からベテランの要望にも応えられます。
SEO対策はもちろん対策済み。
日々、アップデートされていてるから常に最新のテーマが使い続けられる向上心のあるwordpressのテーマ「DIVER」を一度使ってみてください。
使い込むほどにサイトの質が高くなり、知れば知るほどその良さを体感できます。

画像を右表示、ランキングを3位にしてみました。

画像の位置を変えただけでもかなり印象が違って見えるので不思議です。

DIVER(ダイバー)の入力補助「ランキング」の挿入手順

DIVERの入力補助のランキング

DIVER(ダイバー)の入力補助「ランキング」を選択後

「ランキング」挿入画面へ

DIVER(ダイバー)の入力補助「ランキング」の挿入画面例
DIVERの入力補助「ランキング」の挿入例

見た感じ、少し入力箇所が多いなーっと躊躇してしまいがちですが、無理に入力しなくても結構様になります。

でも全て入力した方がランキングコンテンツとして充実して見えるので、できるだけ空欄を埋めることをおすすめします。

ナッツ
受験かッ!
クルミ
学校のテストみたいなアドバイスになっちゃいました。

「ランキング」の設定箇所一覧

設定箇所内容一口メモ
タグ見出しのタグを設定h2にすると表示不良が起きます。
順位ランキングの順位を設定順位ごとにアイコンが変わります。
評価星の数を設定5段階評価です。
タイトルタイトルを設定メインのタイトルを設定。
画像画像の設定1辺300px以上がおすすめ。
配置画像の配置設定左・中央・右に設定できます。
小見出し小見出しを設定本のラベルのような役割です。
スタイルブロックかボーダーを決定小見出しのデザインを設定できます。
簡易的な説明ちょっとした短い説明を入力小見出しの下に表示されます。
コンテンツメインとなる説明を入力灰色の背景に表示されます。
購入ボタン(テキストと色の設定)購入ページへ飛ぶボタンを設定URL・広告タグを設定できます。
詳細ボタン(テキストと色の設定)詳細ページへ飛ぶボタンの設定URL・広告タグを設定できます。

ランキングとなる商品名(タイトル)周りのコンテンツの設定

ランキングを作るには、まず、商品(商材)のタイトルとタイトル周りの装飾(コンテンツ)を決定していきます。

タイトルは検索エンジンにも伝わるので入力した方が良いです。

ランキングタイトルのタグの設定

DIVERのランキングの見出しをh2にすると三角がつく不具合
h2タグだと何故か三角のフレームが付く

ランキングのタイトルのタグの設定では、ランキングの見出しをhタグで設定することかまできます。

h2~divまでありますが、h2タグでランキングを挿入するとタイトルに三角の変なフレームが付くので記事中のhタグとの兼ね合いも考えてh3タグから使用することをおすすめします。

順位の設定

順位バッジデザイン
1位DIVER(ダイバー)の入力補助「ランキング」1位のバッジデザイン
2位DIVER(ダイバー)の入力補助「ランキング」2位のバッジデザイン
3位DIVER(ダイバー)の入力補助「ランキング」3位のバッジデザイン
4位以降DIVER(ダイバー)の入力補助「ランキング」4位のバッジデザイン

順位ではランキングの番号を入力します。

1位は金、2位は銀、3位は銅のバッジのデザインです。

4位以降のデザインは変わらず、数字だけが変わります。

あまり見かけないデザインで、少し好みが分かれそうです・・・。

評価の設定

評価は5段階の星マークを付けることができます。

星マークが必要ないならHTMLごと消すことができます。

星があった方がなんとなーくレビューや口コミの装飾として良い感じですけどねー。

画像の設定

商品(商材)の画像を設定します。

小さすぎる画像はぼやけて表示されがちです。

挿入してみた感じ、1辺300pxあると良さそうです。

画像の配置はお好みで!!

小見出し+簡易的な説明

小見出しは本で言うラベルのようなもので、言わばキャッチコピーです。

小見出し+簡易的な説明で商品の大まかな説明ができるようになっています。

小見出しののデザインも設定できるようになっています。

小見出しのスタイル

小見出しのスタイルはボーダーブロックを選ぶことができます。

ボーダー

ダイバーのランキングの小見出しのラインデザイン
小見出しのラインデザイン

ボーダーではテキストの下に線が引かれるシンプルな見出しスタイルです。

ボーダーの色とテキストを好みの色に設定できます。

ブロック

ダイバーのランキングの小見出しのデザインスタイルのブロック
小見出しのブロックデザイン

ブロックでは小見出しが全て塗りつぶされるスタイルです。

ブロックの背景色とテキストの色を自由に設定できます。

ボーダーとブロック共に、どんな色でも設定できます。

小見出しは入力しなければ非表示にすることもできます。

こういう見出しって考えるのが結構難しいので困ります。

メインコンテンツの設定

ダイバーで表示されるラインキングのコンテンツスタイル

メインの商品(商材)説明を入力します。

説明テキストは灰色の背景ブロックの上に表示されます。

ここでは、行間は空かずに表示されます。

詰まった文章だと読みづらいので、紹介文のバランスをみながら改行を上手く使って入力してみてください。

ボタン挿入とカスタマイズ

ボタンは2つ設置できます。

テキストは自由に設置できるので、購入や詳細ボタンでなくてもOKです。

リンク先は通常のボタン設置と同様URLと、広告タグを設置できます。

2つボタンを設置すると並列になり、ボタン1つでも設置可能です。

ただ、ボタンのデザインや表示されているアイコンは選べないので、気に食わなければ通常のボタンをカスタマイズした方がデザイン的には良いかもしれません。

例えばこんな感じの方が良いかも!?

DIVER(ダイバー)の入力補助と組み合わせてランキングをカスタマイズ

長く使い続けるならwordpressのテーマ「DIVER(ダイバー)」

このテーマを使いこなせるかどうかはあなた次第!?

ワードプレス初心者・ベテラン問わず、使い込むほどにサイト運営が楽しくなるワードプレスのテーマ「DIVER」
カスタマイズ性が高く機能が豊富だからこのテーマを使いこなすのは少し大変かも?

コンテンツが豊富でカスタマイズが自由なハイスペックテーマ「DIVER(ダイバー)」
シンプルなデザインながらも洗練されたDIVERのデザインは魅力的にサイトをみせてくれます。
サイトの構築で必要なHTMLやCSSは全く触らずに、直感的な操作だけで見た目にも整ったサイトへと仕上がるのが面白くて不思議です。
ワードプレス初心者には難しいサイトの装飾も、多彩な入力補助のサポートがあるから誰でも安心して使いこなすことができます。
その上、カスタマイズ量が多く自由度が高いからベテランでも満足のいくサイトを作り込むことができ、初心者からベテランの要望にも応えられます。
SEO対策はもちろん対策済み。
日々、アップデートされ、常に最新のテーマが使い続けられる向上心のあるwordpressのテーマ「DIVER」は使い込むほどにサイトの質が高くなり、知れば知るほどその良さを体感できます。

ナッツ
こんな感じでどうだ!
クルミ
ちょっとの違いで差が出るなー。

入力補助のランキングはDIVER(ダイバー)の入力補助やテキストを装飾すると更に見栄えがアップします。

ただ挿入するだけで他サイトと被ってしまうこともあるため、入力補助を駆使して自分オリジナルのランキングを作ってみてください。

DIVER(ダイバー)の入力補助「ランキング」のまとめ

ランキングの要点まとめ
  • 画像の位置でデザイン調整ができる
  • 小さい画面はデザインが中央配置になる
  • 入力箇所はできるだけ埋めるようにすると見栄えが良い
  • ランキングのバッジのデザインは好みが分かれそう
  • ボタンのデザインは選べないのでカスタマイズ推奨
  • 他の入力補助と組み合わせて見栄えアップ

DIVER(ダイバー)の入力補助「ランキング」はページ内で直接ランキングが作れます。

1つずつランキング素材を作ることができるので、ランキングに変動があっても変更がきき、作れる商品(商材)も無限です。

ランキングのデザインがあらかじめ用意されているのでデザインで悩む必要がなく、見た目も整ったランキングを表示できます。

そのままの入力補助のランキングを使っても見栄えは良いのですが、さらに追及するなら他の入力補助と組み合わせるのがおすすめ。

アイコンやボタンを変更、文字の装飾を入れるだけでも更に見栄えがアップします。

ランキングはHTMLでできているのでHTMLがいじれる人は更にデザインの幅が増えそうです。

クルミ
欲を言うならバッジのデザインも選びたいなー。
クルミ
よくばリスぎ!

ハイスペックテーマ「Diver(ダイバー)」は安く買える!?

サーバー契約をするとワードプレスの有料テーマ「Diver」がお得に買えます。

ロリポップ×Diver




お名前.com×Diver

さらに独自ドメインと同時申込みで、ドメインの初年度登録料が実質0円でお得。




エックスサーバー×お友達紹介



友達紹介プログラムでエックスサーバーを契約すると12か月契約で5,000OFF

契約期間に応じて最大1万円OFF

下記のボタンからエックスサーバーを契約するとお友達紹介プログラムが適用され、契約料金が割引きされます。

エックスサーバーのキャンペーン(不定期)と併用するとさらにお得です。

テーマを安く購入するよりもサーバー契約でお得にDIVERを始められます。

スポンサーリンク
代表コンテンツ
おすすめの記事
スポンサーリンク