【AFFINGER5】オリジナルのランキングを簡単に作る方法

AFFINGER5で非常に便利な「ランキング機能」。この機能を利用したランキングテンプレートは、残念なことにデフォルトでは3つまでしか作成できませんよね。

また、テーマとは別にAFFINGERタグ管理マネ―ジャー3（2019.7現行）を購入すれば、10個まではランキングテンプレートが作れますけど・・正直もっと使いたい方って多いはずです。

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

デフォルトでは3つ。AFFINGERタグ管理マネ―ジャー3購入でも10個。

ランキングテンプレート作成に数限りがある。そこで僕は「うっしゃ！自作したる！」と立ち上がったわけです（笑）

とは言うものの作り方はめっちゃ簡単でして、ちゃちゃっと作れる割には本家ランキングテンプレートに酷似しているという自負さながらの自作テンプレートです（笑）

この自作テンプレートタグを、STINGERタグやAddQuicktagなどに「保存」しておけば、いつでも簡単に投稿挿入もできるので、ぜひ活用してみて下さい^^

ランキングテンプレート自作デザイン

まずは、僕が自作したランキングテンプレートを見てください。

"稼ぐ" に特化したアフィリエイト向け最強のWordPressテーマ「AFFINGER5」。アドセンス広告をはじめ、あらゆる広告をどこでも自由に簡単表示できる機能が満載。また、商品ランキングテンプレートやお客様の口コミなどの記事パーツが非常に豊富。ブログマネタイズや特化型のアフィリエイトとしてサイトを作るテーマでは、まさに頂点に君臨する最強テーマ。

このデザインテンプレートであれば、簡単に複数無限に作成できます。

テキストサイズやリンクボタンカラー、ボタン内テキストのフォントサイズはお好みで簡単に変更できますので、ランキング告知商品を増やしたい場合は、ぜひ活用してみて下さい。

ランキングオリジナルテンプレートの作り方

では早速作り方をステップごとに解説していきます。

step
1ランキングの「見出し」から作っていきます。

WordPress投稿画面から、「タグ」＞「ランキング見出し」と進み、ランキング1位～4位以下までを選択します。

挿入された上のコードへ「★ランク数値（1～5）」「見出しタイトル名」を入力しましょう。

step
2次にランキングに表示するサムネイル（画像）を挿入していきます。

WordPress投稿画面から、「タグ」＞「レイアウト」と進み、「全サイズ左右30:70%」を選択します。

このようにタグが挿入されますので、「左側のコンテンツ30％」というテキストを全てドラッグしながら、ライブラリにある画像を「メディア追加」で挿入します。

サムネイル画像を挿入したら、サイズを「150 × 150」に合わせて左寄せにします。

step
3次にサムネイル画像右側のテキストを挿入していきます。

先ほどのサムネイル画像を挿入した状態から、「右側のコンテンツ70％」というテキストをドラッグして消去し、そのままテキストを入力していきます。

ちなみに、このサンプルのフォントサイズは「90％」で合わせています。

step
4最後に「カスタムボタン」を挿入していきます。

カスタムボタンを設置する位置に、カーソルを持っていきます。

次に「タグ」＞「レイアウト」＞「均等横並び」をクリックして挿入します。

すると3カラム用のタグが挿入されるので、真ん中の「横並びコンテンツ」のみを削除します。

このように2カラムになりましたね。

この左右カラムにカスタムボタンをタグで挿入していきます。

「横並びコンテンツ」というテキストをドラッグしたまま、「タグ」＞「カスタムボタン」からノーマルやミニなど好きなデザインのボタンを選択して挿入します。

このようにカスタムボタンのタグが挿入されましたね。

カスタムボタンに表示する「テキスト」と、このテキストの「フォントサイズ」を変える場合が上の画像の赤枠部分です。

他にもアイコンを入れたり、動き（アニメーション）を付けたり、アイコンやテキストのカラーを変更する場合も、タグの挿入や変更次第で簡単にできます。

最後に、カスタムボタンに「リンクURL」を貼り付けて完了！

作成作業に慣れてしまえば、あっという間に作成できますよ^^

まとめ

本家ランキングデザインに似せた「オリジナルランキング」の自作方法でした♪

作成する個数はもちろん制限がないので、いくらでも作れます。

ちなみにサイドバーへ設置する場合は、カスタムボタンを縦2つに並べるデザインにした方が、特にモバイル（スマホ）で綺麗に表示してくれます。

ぜひ活用してみて下さい^^

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