AFFINGER６（アフィンガー６）のランキング管理で指定の場所に一括でランキングを設置する方法

AFFINGER６：ランキングを表示させる手順

AFFINGER６では１位から３位までのランキング作成して指定の場所に一括で表示させることができます。

こんな感じのランキングを表示することができます。

表示させる手順は次の通りになります。

• ランキング管理でランキング１位から３位を作成する
• ランキング管理の基本設定で見出しや表示位置を設定する

①　ランキング管理でランキングを作成する

まず、ランキング１位から３位までを作成します。

「ランキング管理」→「ランキング１位～３位」で作成することができます。

a) タイトル	ランキングで紹介する商品のタイトルと星を設定
b)アフィリエイトコード（バナー）	アフィリエイトコード（バナー）を入力して商品画像を設定
c)説明	紹介する商品の説明文を設定
d)詳細ページへのリンクURL	自分のサイトで商品の詳細ページがある場合はURLを入力
e)アフィリエイトコード（テキスト）	アフィリエイトコード（テキスト）を入力

a)　タイトル

ランキングで紹介する商品のタイトルと星数を設定することができます。

b)　アフィリエイトコード（バナー）

アフィリエイトコード（バナー）を入力することで、商品画像を表示させることができます。

バナーサイズは３００ｐｘ以上が推奨です。

c)　説明

紹介する商品の説明分を入力します。

d)　詳細ページへのリンクURL

自分のサイトで商品の詳細ページなどがある場合に、そのURLを入力します。

e)　アフィリエイトコード（テキスト）

アフィリエイトコード（テキスト）を入力します。

詳細についてはAFFINGER６（アフィンガー６）の公式マニュアルでも確認できます。

ランキング商品の登録が終了したら保存するのを忘れないように注意しましょう。

②　ランキング管理の基本設定で見出しや表示位置を設定する

次にランキング管理の基本設定で大見出しや表示位置を設定します。

①：ランキングの大見出し	ランキングの大見出しの設定
②：オリジナルページへのリンクボタンに表示するテキスト	オリジナルページへのボタンに表示するテキストを設定
ランキング全体の説明	大見出しの説明文の設定
③：ランキングの表示	ランキングを表示させる場所の設定
④：バナーサイズ	バナーサイズを300pxに設定
⑤：演出	ボタンに光る演出を追加

①　ランキングの大見出し

ランキングの大見出しを作成します。

例：入力欄に「お勧めレンタルサーバー」と入力するとこんな感じです。

②　オリジナルページへのリンクボタンに表示するテキスト

オリジナルページへのリンクボタンに表示するテキストを設定可能です。

ランキング全体の説明

大見出し下のランキングの説明分です。

③　ランキングの表示

ランキングを表示する位置を設定できます。

トップページとサイドバーに表示を選択するとこんな感じです。

④　バナーサイズ

バナーサイズを300pxに変更することが可能です。

⑤　演出

ボタンに光る演出を加えることができます。

ランキング管理：補足

①　ランキングアイコンを変更する

ランキングのアイコンを変更することが可能です。

変更する方法は「ランキング管理」の「アイコン」から１位～３位にそれぞれ用意した画像をアップロードすればOKです。

実際にランキングアイコンを変更してみるとこんな感じです。

アップロードする画像サイズは５０～６０ｐｘ程度がいいかもしれません。

上の表示例では６０×６０ｐｘの画像を作成してアップロードしました。

オリジナルのランキングアイコンを使用したい場合は複数サイズの画像を準備して実際表示を確認しながら設定するのがお勧めです。

②　見出しやボタンの色などを変更する

見出しやボタンの色を「ランキング管理」→「ランキングCSS」で変更することができます。

ランキングCSSで変更できること

ランキング見出し部分
ランキング見出しテキスト色
ランキング見出し背景色
ランキング見出しボーダー色

リンクボタン部分
リンク文字カラー
オリジナルリンク背景色
アフィリエイトリンク背景色

その他
ランキングタイトル吹き出し背景色
ランキング総タイトル文字色
ランキング一覧背景色

ランキング管理では１位～３位までのランキングを指定の場所に一括で表示させることができますが、記事内でちょっとしたランキングを作成したいなぁと思う方もいると思います。

例えば、下のような感じのランキングです。

AFFINGER６（アフィンガー６）の記事作成機能を使用して簡単に記事内にランキングを作成することができます。

詳細については別記事で説明していますので、そちらを参考にしてみてください。

こちらの記事もチェック！

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

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

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

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

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

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

AFFINGER6：記事一覧

• AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説
• （通常版）AFFINGER6と（上位版）AFFINGER6 EXの違い【まとめ】
• AFFINGER6を実際に利用したガチ評価-２年以上愛用して感じたメリットとデメリット
• AFFINGER6は初心者が購入しても大丈夫？-初心者にお勧めの理由

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

• AFFINGER6の購入方法と購入プランの選び方
• AFFINGER6（アフィンガー6）のインストール方法-初心者でも安心！購入プランから徹底解説！
• AFFINGER６（アフィンガー６）EX版の購入とアップグレードの方法

AFFINGER6の設定関係

• AFFINGER6導入後にまず何をしたらいいの？-初心者にお勧めの初期設定４項目
• AFFINGER6（アフィンガー６）にお勧めのプラグイン【初心者向け】
• AFFINGER６のアップデート方法（２パターンを解説）
• AFFINGER６（アフィンガー６）でGoogleアナリティクスを導入する方法
• AFFINGER6：Googleサーチコンソールへの登録方法
• AFFINGER6のステマ規制対策-広告表記を表示させる方法

AFFINGER6の使い方

• AFFINGER6の使い方【まとめ】-初心者向けガイド-

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

• AFFINGER6のカスタマイズ方法-初心者向けガイド-