AFFINGER5

【AFFINGER5】ランキング機能がスゴイ!簡単にテンプレートを作る方法プラスおまけ

更新日:

alt=【AFFINGER5】ランキング機能がスゴイ!簡単にテンプレートを作る方法プラスおまけ

AFFINGER5には、「ランキング管理」で作成したタグ一つ貼るだけで、簡単にデザイン性の高いランキング表示ができる機能があります。

こんにちは。WordPress研究家SHINです。

 

このようなテンプレートがタグ1つで簡単に表示できます。(タイトル上に見出しを付けることも可能

alt=AFFINGER5 ランキングサンプル

 

ランキングは「基本設定」で基本テンプレートの型を設定し、一方でランキング1位~3位までそれぞれのテンプレートを設定して複合表示する機能で、サイト内メインとなる商品やサービスを、個別記事や固定場所で紹介する場合に非常に便利な機能です♪

 

もちろんスマホからでも綺麗に表示できる「レスポンシブ対応」ですのでご安心を。

 

では早速作っていきましょう。

 

ランキング管理「基本設定」

alt=AFFINGER5 ランキング基本テンプレート

まずランキング表示の基本になる設定を作成しましょう。

ここで設定できるのは「ランキング大見出し」「詳細ページボタンのテキスト」「ランキング固定表示場所」の3つです。

商品画像(バナー)と右の説明テキストは、個別に1位~3位のランキングで作成した方がいいので、ここでは基本の3点のみ設定しましょう。

 

このテンプレートの固定表示は、以下5つの場所で表示が可能です。

固定表示できる場所

  • トップページ(ヘッダー下へ表示)
  • 固定ページの記事下
  • 投稿ページの記事下
  • サイドバー(最下部)
  • カテゴリー一覧(各カテゴリーリンク先最下部)

固定表示なので、永続的に紹介する商品を選んでおくといいですね。

 

step
1
WordPressダッシュボードメニューから「ランキング管理」に進み、「基本設定」を表示します。

alt=AFFINGER5 ランキング基本テンプレート1

 

step
2
ランキング表示する基本項目を、それぞれ設定していきましょう。

alt=AFFINGER5 ランキング基本テンプレート2

SHIN
1)では、商品名テキストの上に表示する「大見出しテキスト」を設定できます。

また2)では、画像にある詳細ページへと書かれた「青いリンクボタンのテキスト」を設定できます。

詳細ページリンクボタン

このページリンクは、商品を紹介するLP(ランディングページ)や紹介記事のリンク、または公式ページの口コミページなどで設定するのがベターです。

逆に必要ない場合は空欄にして、画像にある「公式サイトへ」という赤いリンクボタンを横幅最大に広げることも可能です。

 

step
3
その下の設定では「固定表示場所」「バナーサイズ」「リンクボタン演出」をそれぞれ設定します。

alt=AFFINGER5 ランキング基本テンプレート3

SHIN
特に固定表示したくなければノーチェックでOK。バナーサイズはチェックを入れるとPC、スマホともにバナーが300px表示になります。

リンクボタン演出は、AFFINGER5特有のキラリボタンにするしないを選択できます。

 

ランキング管理「ランキング1位~3位設定」

alt=AFFINGER5 ランキング1位,ランキング2位,ランキング3位

続いて1位~3位までの3つのランキングテンプレートを作成していきます。

ここでは3種類のランキングを作成できます。ちなみに、順位によって王冠アイコンやテンプレートが異なることはないので、順不同で作成しても大丈夫です。

 

step
1
WordPressダッシュボードの「ランキング管理」から「ランキング1位(2位、3位)」作成したい順位をクリックして進みます。

alt=AFFINGER5 ランキング1位,ランキング2位,ランキング3位1

 

step
2
まずa)には「タイトル(商品名)」を入力し、その下は表示する☆の数を選択、b)にはASP広告の「画像URL」「テキストコード」の入ったURLを入力、e)はASP広告の「テキストコード」をコピペし、テキスト部分はリンクボタンテキストになるので、任意で変更しましょう。

alt=AFFINGER5 ランキング1位,ランキング2位,ランキング3位2

 

b)のアフィリエイトコード(バナー)は、バナーコードをそのままコピペしてしまうとスマホではバナーが表示されません

あらかじめ300px × 250pxでバナーをWordPressの「メディア」にダウンロードしておき、リンクURLは「テキストコード」を入力します。

alt=アフィリエイトテキストコード   alt=WordPress画像URL

<a href="テキストコード"><img src="画像のURL"></a>

この太字部分を任意で入力して、b)へ貼り付けましょう。

 

alt=AFFINGER5 ランキング1位,ランキング2位,ランキング3位3

c)には、商品の説明テキストを入力。通常の投稿フォームと変わらないので、文字装飾も可能です。その下のテキスト欄は、b)c)d)e)の間に入れるテキスト文になります。必要であれば入力しましょう。

 

d)は、あらかじめ「詳細ページへ」と入力されていた青いリンクボタンのURLを入力します。

商品紹介ページまたは口コミページなどあれば、そのURLを入力しましょう。未入力の場合は、自動的にe)のテキストコードリンクのボタンが横長になります。

 

最後にショートコード:[rank〇](〇部分はランキング1位~3位の数字)を、記事に貼るだけでランキング表示されます。

ランキングテンプレートは3種類のみ

AFFINGER5は常に進化してくれるので、いずれテンプレート種類が増えると期待していますけど(笑)

現在は3種類でのみテンプレート設定が可能です。永続的でロングセラーになるような商品を選びましょう。また商品を変更したい場合には、このランキングテンプレートを変えるだけでOK。

ただ過去の記事に表示していた場合、この記事に表示しているテンプレートも変わってしまうので注意です。

 

ランキング「アイコン&カラー設定」

ランキングアイコンを変更

ランキングアイコンを、任意の画像に変更することが可能です。

 

step
1
WordPressダッシュボードより「ランキング管理」>「アイコン」に進みます。

alt=AFFINGER5 アイコン

 

step
2
アイコンにしたい画像ファイルを「アップロード」し、決定したURLを指定場所へ貼り付ければアイコンを簡単に変更できます。

alt=AFFINGER5 アイコン1

ランキングアイコンは「WINGユーザー専用マニュアル」内にも、以下のようなアイコンをフリーでダウンロードできます。

ぜひ活用してみてくださいね。

alt=AFFINGER5 アイコン2

 

ランキング各種カラーを変更

ランキングテンプレートの「見出し」「リンクボタン」「トップ以外のランキングカラー」を自由に変更できます。

 

step
1
WordPressダッシュボードより「ランキング管理」>「CSS」に進みます。

alt=AFFINGER5 ランキングカラー

 

step
2
各カテゴリーに分かれてカラーを変更できます。保存⇔プレビューページで、リアルタイムでチェックしながらカラーを変更していきましょう。

alt=AFFINGER5 ランキングカラー1

alt=AFFINGER5 ランキングカラー2

alt=AFFINGER5 ランキングカラー3

 

その他ランキング機能

人気ランキングリンクボタン

alt=人気ランキング リンクボタン

人気ランキング

SHIN
キラリボタンで「人気ランキング」のリンクボタンを簡単に呼び出せます♪

 

ランキングアイコンのある見出し

alt=AFFINGER5 ランキング見出し

ランキング

ランキング

ランキング

ランキング

SHIN
王冠マークのアイコンが入ったランキング見出しも、タグ一つで呼び出しOK!

 

まとめ

これまで紹介したAFFINGER5のランキング機能は、全てデフォルトで実装しています・・恐るべし!です(笑)

他にも、お客様の声や複合による吹き出しなどもタグ一つで呼び出せる装飾があるので、ランキングテンプレートもより「記事映え!?」するわけです。

 

ぜひ活用してくださいね(●´∀`)φ

AFFINGER5カスタマイズ記事

AFFINGER5
【AFFINGER5】サイドバー最上部の新着記事を非表示にする方法

こんにちは!SHINでございます♪   AFFINGER5でサイトページ構成を2カラム以上、つまりサイドバーのあるデザインで運営するなら必見。 今回は、AFFINGER5の導入初期時にデフォ ...

続きを見る

AFFINGER5,フォントカスタマイズ
【AFFINGER5】フォントカスタマイズでイメージをガラッと変えてみよう!

こんにちは、SHINでございます♪   今回、AFFINGER5のフォントデザインをガラッと変える2つの方法を解説していきます。   デフォルトでも十分ですけど、もっとポップにした ...

続きを見る

AFFINGER5
【AFFINGER5】ブログサイトの背景画像をオシャレに変える方法

こんにちは!SHINです♪ 今回は、ブログサイトの背景画像をオシャレに変えてみよう!というテーマでお話していきます♪   ただ注意してほしいのは、背景画像で大きくイメージが変わるということ。 ...

続きを見る

超簡単!サイドバーへTwitterタイムラインを埋め込む方法
【AFFINGER5】超簡単!サイドバーへTwitterタイムラインを埋め込む方法

こんにちは!SHINです♪ 今回Twitterのタイムラインを、サイドバーに表示させる方法をお話していきます♪   何で「サイドバー」なのかと言うと、2カラムサイトであればトップページはもち ...

続きを見る

【AFFINGER5】記事下にアドセンス横並び+リンク広告をセット表示する方法
【AFFINGER5】記事下にアドセンス横並びとリンク広告をセット表示する方法

こんにちは。SHINです♪   Googleアドセンス広告の設置方法に、PHPやカスタムCSSにコードを記述する方法がありますけど、正直・・・ めんどくさい! ややこしい! むずかしい! わ ...

続きを見る

【AFFINGER5】カエレバ・ヨメレバを実装!カスタマイズデザイン6選
【AFFINGER5】カエレバ・ヨメレバをコピペで実装するカスタマイズ5選

こんにちは。WordPessテーマ研究家SHINです。 カエレバ&ヨメレバは、Amazonや楽天市場、Yahoo!ショッピングなど複数サイトの商品アフィリエイトリンクを、ボタンに設置して告知できるツー ...

続きを見る

【AFFINGER5】スマホフッターに固定メニューを設置する方法-min
【AFFINGER5】スマホフッターに固定メニューを設置する方法

こんにちは。WordPressテーマ研究家SHINです。 スマホユーザーへ訴求する重要なポジションとも言えるのがフッターメニューですよね。   スマホフッターメニューと言えば、パソコンで言う ...

続きを見る

【AFFINGER5】コレは使える!クリップメモのアイコンカスタマイズ大特集
【AFFINGER5】コレは使える!クリップメモのアイコンカスタマイズ集

"AFFINGER5生活"も、かれこれ3ヶ月ほど。相変わらずの使いやすさに、ほれぼれ感が全く薄れないSHINです。   今回は、タグパーツの一つ「クリップメモ」のアイコンを、いろんなバリエー ...

続きを見る

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-AFFINGER5

Copyright© WordPress theme NAVI , 2019 All Rights Reserved Powered by AFFINGER5.