AFFINGER7には、ランキングを特定の場所に一括で表示できるランキング管理という機能があります。
しかし、ランキング管理では１種類のランキングしか表示させることができません。
- 記事内にランキングを表示させたい
- 違う種類のランキング記事を複数作成したい
- ランキング記事の作成がしたい
と悩んでいる方も多いのではないでしょうか。
この記事では、AFFINGER7でランキング記事を作成する手順を初心者向けに解説しています。
※ この記事はAFFINGER6時代に作成した内容をAFFINGER7対応版として更新しています。
AFFINGER7でランキングを作成する方法
AFFINGER7で記事にランキングを導入する方法は大きく２パターンあります。
- 特定の場所に一括でランキングを設置する方法（ランキング管理）
- 記事作成機能を使ってランキング記事を作成する方法
① 特定の場所に一括でランキングを設置する方法（ランキング管理）
AFFINGER6のランキング管理では特定の場所に一括でランキングを設置することが可能です。
メリット：
- ランキングウィジェットで特定の場所に配置できる
- 内容・デザインを一括で変更できる
デメリット：
- タイプの違う複数のランキングは作成できない
ランキング管理の使い方ついてはこちらで詳しく解説しています。
② 記事作成機能を使ってランキング記事を作成する方法
記事作成機能を使ってランキングを作成する方法です。
例えば、こんな感じです。
メリット
- 基本的な記事作成機能で作成できる
- 複数タイプのランキングが自由に作成できる
- 独自のランキング表示ができる
デメリット
- 一括で内容を変更したい場合はマイブロック機能の活用が必要
AFFINGER7のさまざまな記事作成機能を使用すれば、ランキング風の記事を作成することができます。
上ではカラムブロックを利用して左側に画像、右側に説明が表示されるようなランキング表示になります。
初心者向けに、こちらを作成する方法を説明していきますので、参考にしてみてください。
【初心者向け】記事作成機能でランキングを作成する手順
基本的な流れになります。
ランキング見出しを作成
AFFINGER６では見出しに「ランキング」機能が備わったスタイルがあります。
それを利用すると簡単にランキング表示が可能です。
「第１位」といったアイコンは同じ見出しレベルを利用すれば、「第２位、第３位・・・」と自動で表示されます。
見出しについて、不安のある方はこちらの記事をご覧になってください。
星マークの設置
「星マークの設置」はショートコードを記載することで、簡単に表示することが可能です。
| ショートコード | 実際表示 | |
|---|---|---|
| 星５個 | star5 | |
| 星４個 | star4 | |
| 星３個 | star3 | |
| 星２個 | star2 | |
| 星１個 | star1 | |
| 星０個 | star0 |
画像を挿入
ランキングに載せる画像を挿入します。
画像と説明文を横に並べたい時は、カラムの機能を使いましょう。
まず画面の左側に画像、右側に説明文を記載する為に「カラムブロック」を利用します。
２カラム：等分を選択します。
２等分したカラムの片側に画像を挿入し、もう片方に説明文などを入力していきます。
説明文を入力
カラムで２等分して表示させる場合は、テキストの位置はスペースを挿入して調整するのがお勧めです。
ボタンを設置
購入などに繋げる為の導線として、ボタン設置は必要です。
テキストでも良いですが、ボタンの方が視覚的にもスマートです。
カスタムボタンの編集については別記事で紹介していますので、そちらを参考にしてください。
以上がランキングの作成方法になります。
まとめ
AFFINGER7は記事作成機能を活用すれば、簡単にランキングを作成することができます。
この記事で解説したランキング表示は一例に過ぎません。
AFFINGER7は記事作成機能も豊富なので、色々と工夫して独自のランキング表示をすることも可能です。
また、ランキングは更新のしやすさも考えるとマイブロック機能で作成し、記事にショートコードを貼り付ける方法がお勧めです。
\\ 収益化に強い圧倒的人気テーマ！//
AFFINGER7がついにリリース！
AFFINGER6から更に機能がパワーアップ！
※ AFFINGER6は現在、AFFINGER7へと移行となりました。