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

この記事がお勧めな方

AFFINGER６のランキング管理機能の使い方を知りたい方
AFFINGER６のランキング表示がどんな感じか知りたい方

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

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

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

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

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

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

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

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

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

a)　タイトル

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

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

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

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

c)　説明

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

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

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

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

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

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

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

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

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

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

①　ランキングの大見出し

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

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

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

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

③　ランキングの表示

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

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

④　バナーサイズ

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

⑤　演出

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

ランキング管理：補足

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

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

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

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

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

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

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

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

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

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

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

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

AFFINGER6：記事一覧

: AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説

2025/2/14

AFFINGER６を使ってみたい！気になる！という方向けに AFFINGER６ってどんなテーマ？ AFFINGER６でどんなことができるの？ AFFINGER６を使うにはどうすればいいの？といった内 ...

: （通常版）AFFINGER6と（上位版）AFFINGER6 EXの違い【まとめ】

2025/3/7 AFFINGER6

AFFINGER6を購入しようと検討している方や既に通常版のAFFINGER6を使用している方で、その違いが気になる方も多いと思います。そこで、この記事では（通常版）AFFINGER6と（上位版）A ...

: 『SWELL』ってどうなの？-実際に利用したメリットとデメリットをガチレビュー！

2025/2/21 SWELL

SWELLはとても人気の高いテーマです。この記事はSWELLが気になる方向けにメリットとデメリットを紹介しています。価格　１７，６００円（税込み）シンプル＆高機能なWordPressテーマ！最 ...

: AFFINGER6は初心者が購入しても大丈夫？-初心者にお勧めの理由

2025/3/7 AFFINGER6

AFFINGER6を購入しようと思っている初心者の方は、解らないことが多いからこそ購入に対して不安を感じるかもしれません。この記事は、実際に知識ゼロからAFFINGER6を使用した私が断言できる内容 ...

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

: 【知っておくべき！】AFFINGER6の購入方法と購入プランの選び方-⑤種類から最適を選択！

2025/4/4 AFFINGER6

AFFINGER6を使ってみたい！という方にちょっと待ってください！ AFFINGER6を購入する際には複数のプランが存在しますので、自分の取り組み方に合った購入方法を選択した方がお得に購入できま ...

: AFFINGER6（アフィンガー6）のインストール方法-初心者でも安心！購入プランから徹底解説！

2025/2/18 AFFINGER6

AFFINGER6の購入からインストールして使えるようにするまでの手順や注意点を詳しく解説しています。価格　１４，８００円（税込み）有名ブロガーさん多数使用のWordPressテーマ！「稼ぐ」に ...

: AFFINGER６（アフィンガー６）EX版の購入とアップグレードの方法

2025/3/9 AFFINGER6

この記事ではAFFINGER６の上位版である「AFFINGER６EX」へのアップグレード方法を解説しています。 AFFINGER６EX版にアップグレードする為の条件 AFFINGER６からEX版にアッ ...

AFFINGER6の設定関係

: AFFINGER6導入後にまず何をしたらいいの？-初心者にお勧めの初期設定４項目

2025/3/6 AFFINGER6

「ブログで稼ぎたい！」って思いブログを始めた初心者の方も多いと思います。収益化するには何より記事を作成しなければ話になりません。この記事ではAFFINGER6を始めたばかりの初心者の方向けに、い ...

: AFFINGER6（アフィンガー６）にお勧めのプラグイン【初心者向け】

2025/2/19 AFFINGER6

AFFINGER6にお勧めのプラグインを９つ紹介しています。初心者の方は何を導入すればいいのか解らないと思いますので、是非参考にしてみてください。プラグインとは？「プラグイン」とはワードプレスを ...

: AFFINGER6で今使っているバージョンを確認する方法

2025/3/12 AFFINGER6

AFFINGER6に限らずテーマを最新の状態にアップデートすることは大切です。ここでは、AFFINGER6で今使っているバージョン情報を確認する方法やアップデートに関する内容を解説しています。バー ...

: AFFINGER６のアップデート方法（２パターンを解説）

2024/12/30 AFFINGER6

この記事がお勧めな方 AFFINGER６のアップデート方法を知りたい方 AFFINGER６の手動でのアップデート方法が知りたい方 AFFINGER６で自動更新のお知らせを設定する方法を知りたい方 AF ...

: AFFINGER６（アフィンガー６）でGoogleアナリティクスを導入する方法

2025/3/9 AFFINGER6

ここではAFFINGER6（アフィンガー６）でGoogleアナリティクスを導入する方法を初心者向けに解説しています。 AFFINGER6（アフィンガー６）では簡単にGoogleアナリティクスを導入して ...

: AFFINGER6：Googleサーチコンソールへの登録方法

2025/3/9 AFFINGER6

Googleサーチコンソールではあなたのサイトが「どんなキーワードで表示されたのか」を確認することができたり、あなたのサイトのページが「どれくらいインデックスされているか」などを調べることができます。 ...

: AFFINGER6のステマ規制対策-広告表記を表示させる方法

2025/3/8 AFFINGER6

この記事ではステマ規制対策としてAFFINGER6（アフィンガー6）で記事に「広告」表記を表示させる方法を解説しています。ステマ規制とは２０２３年１０月から開始された「ステルスマーケティング」に対す ...

AFFINGER6の使い方

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

2025/3/8 AFFINGER6

この記事はAFFINGER6（アフィンガー6）の使い方を初心者向けに詳しく解説しています。見出しの作成方法記事作成の基本！見出し作成や見出しについての記事です。カテゴリーの作成とカテゴリーページ ...

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

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

2025/3/8 AFFINGER6

この記事ではAFFINGER6のカスタマイズ方法を初心者向けに詳しく解説しています。デザインカードプラグインでサイトデザインを変更する方法プラグインでサイトデザインを簡単に変更できるようになりまし ...

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

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

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

a) タイトル

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

c) 説明

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

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

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

① ランキングの大見出し

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

ランキング全体の説明

③ ランキングの表示

④ バナーサイズ

⑤ 演出