AFFINGER6（アフィンガー６）の記事作成機能でランキングを作成する方法

AFFINGER6でランキングを作成する方法

AFFINGER6で記事にランキングを導入する方法は大きく２パターンあります。

• 特定の場所に一括でランキングを設置する方法（ランキング管理）
• 記事内に自由にランキング記事を作成する方法

特定の場所に一括でランキングを設置する方法（ランキング管理）

AFFINGER6のランキング管理では特定の場所に一括でランキングを設置することが可能です。

下画像はサンプルになりますが、このようなランキングを作成して「トップページ」や「投稿ページの下」などに一括で設置することができます。

ランキング管理にてランキングを作成する方法は別記事で解説しています。

そちらを参考にしてみてください。

ランキング管理を利用すると一括で特定の場所にランキングを表示できるのですが、１種類のランキングしか作成できません。

例えば、

「母の日のプレゼントお勧めランキング」

「父の日のお勧めランキング」

といった複数の別のランキングを作成することができないんです。

そこで、この記事では記事内に自由にランキングを作成する方法を初心者向けに解説しています。

記事内に自由にランキング記事を作成する方法

記事内に下のようなランキングを作成する方法です。

AFFINGER6のさまざまな記事作成機能を使用すれば、ランキング風の記事を作成することができます。

上ではカラムブロックを利用して左側に画像、右側に説明が表示されるようなランキング表示になります。

初心者向けに、こちらを作成する方法を説明していきますので、参考にしてみてください。

【初心者向け】記事作成機能でランキングを作成する手順

• カラム設定
• 画像挿入
• ランキング見出し作成
• 星マークの設置
• 説明文
• ボタンの設置

①　カラム設定

まず画面の左側に画像、右側に説明文を記載する為に「カラムブロック」を利用します。

２カラム：等分を選択します。

②　画像挿入

２カラムの左側を選択して、画像をアップロードして挿入する。

画像を挿入するとこんな感じです。

挿入する画像サイズは3ある程度のサイズ（300px以上）がお勧めです。

画像サイズが大きい分にはリサイズされるので問題ないですが、画像サイズが小さいとバランスが悪くなるので少し大きめがお勧めです。

ちなみにここでは600pxの画像を使用しています。

③　ランキング見出し作成

まず、カラム右側上部のランキング見出しを作成します。

「見出しブロック」を選択します。

「見出しブロック」のスタイルから「ランキング」を選択します。

「第１位」などのランキングアイコンは自動で表示されます。

スタイル「ランキング」で作成した「見出し」順に自動で「第１位」「第２位」とアイコンは変化していきます。

注意として、「見出し」ブロックで作成しているので当たり前ですが「見出し」として扱われる点です。

他の「見出しレベル」に留意する必要があります。

「見出し」作成の決まり事について初心者向け説明している別記事も参考にしてみてください。

AFFINGER6：見出しの作成方法

④　星マークの設置

「星マークの設置」はショートコードを記載することで、簡単に表示することが可能です。

	ショートコード	実際表示
星５個	star5
星４個	star4
星３個	star3
星２個	star2
星１個	star1
星０個	star0

⑤　説明文の記入

説明文を入力していきます。

それぞれのブロックはスペースを利用するとバランス良く表示が可能になります。

⑥　ボタンの設置

最後にボタンを設置します。

カスタムボタンの編集については別記事で紹介していますので、そちらを参考にしてください。

AFFINGER6：カスタムボタンの作成方法

こんな感じで記事内にランキング表示を作成することができます。

カラムやグループを利用することでランキングの表示形式を変えることもできるので、色々と工夫してみるのがいいですよ。

ブログの記事を書くのにAIライティングツールを利用すると効率を上げることができます。

現在は多くのAIライティングツールがあります。

そのほとんどが無料お試しでの利用が可能です。

お試し期間が限定のツールもありますが、中には機能制限はありますがずっと無料で利用できるツールもあります。

無料お試しがずっと可能なAIライティングツールをまとめてみたので、是非試してみてください。

\\ 無料お試し利用がずっと可能なAIライティングツール//

AFFINGER6：記事一覧

AFFINGER6の購入とインストール方法

AFFINGER6の設定関係

AFFINGER6の使い方

AFFINGER6のデザインカスタマイズ