カスタマイズ

【AFFINGER5】ランキングテンプレートを簡単にカスタマイズする方法

alt=AFFINGER5 ランキング

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

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

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

 

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

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

 

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

 

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

 

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

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

 

パソコンブラウザ表示

AFFINGER5

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

 

モバイル(スマホ)表示

 

alt=AFFINGER5 ランキングテンプレート モバイル

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

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

 

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

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

 

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

alt=AFFINGER5 ランキングテンプレート 見出し

alt=AFFINGER5 ランキングテンプレート 見出し1

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

[st-rank rankno="1" bgcolor="" color="#000" bordercolor="#ccc" radius="" star="5"]AFFINGER5[/st-rank]

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

 

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

alt=AFFINGER5 ランキングテンプレート サムネイル

alt=AFFINGER5 ランキングテンプレート サムネイル1

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

alt=AFFINGER5 ランキングテンプレート サムネイル2

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

alt=AFFINGER5 ランキングテンプレート サムネイル3

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

 

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

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

AFFINGER5 ランキングテンプレート テキスト1

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

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

 

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

alt=AFFINGER5 ランキングテンプレート カスタムボタン

alt=AFFINGER5 ランキングテンプレート カスタムボタン1

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

alt=AFFINGER5 ランキングテンプレート カスタムボタン2

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

alt=AFFINGER5 ランキングテンプレート カスタムボタン3

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

alt=AFFINGER5 ランキングテンプレート カスタムボタン4

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

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

alt=AFFINGER5 ランキングテンプレート カスタムボタン5

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

alt=AFFINGER5 ランキングテンプレート カスタムボタン6

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

alt=AFFINGER5 ランキングテンプレート カスタムボタン7

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

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

alt=AFFINGER5 ランキングテンプレート カスタムボタン8

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

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

 

まとめ

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

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

 

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

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

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

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

SHIN

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

-カスタマイズ
-

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