【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。
そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。
また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。
パーツ＜ランキング＞は、商品やサービスをランキング形式で紹介できる機能です。
SIRIUS2のランキングはけっこう凝ったレイアウトで、商品画像が複数枚あるときはスライダー形式での表示になります。
また必要事項を入力するだけでランキング設定が完了するなど簡単操作も特長の一つです。
SIRIUS2標準の＜ランキング＞はタイトルだけランキングっぽく表示（文字装飾系）する機能で、ここでご紹介するパーツ＜ランキング＞とは全く別物になります。
（タブ）ランキング
公式サイトでは複数のページにまたがるマニュアルをこの1ページでわかるようにまとめてみました。
各設定項目値と実際の表示位置との連動が最初はこんがらがるかもしれないのでかなりかみ砕いてご紹介してますが、一度理解してしまえばその後の追加や修正はそれほど難しくありません。
＜ランキング＞の設定画面を開くには、
【パーツ】→＜ランキング＞→【ランキングの管理】→【追加】
もしくは
【パーツ】→＜ランキング＞→【ランキングの追加】
から開けます。
すでにいくつか設定済みの画面でご説明していきます。
縮小版
- ①新規追加
-
新規にランキング表示用の商品（or サービス）を追加する時にクリックします。
（追加登録済みの商品データは「ランキングアイテム」と呼称）
詳しくはコチラをご覧下さい。
- ②編集
-
すでに登録済みのランキングアイテムを修正する時にクリックします。
- ③複製
-
一部だけを修正すればいいような類似商品などの作成時は『複製』で新規追加した方が修正箇所が少なくて済みます。
- ④削除
-
ランキングアイテムを削除するときに使います。
- ⑤順位を上げる（下げる）
-
ランキングアイテムを選択した状態で順位を上げる（下げる）ボタンをクリックすれば順位を変えることができます。
- ⑥登録済みランキングアイテム
-
登録済みのランキングアイテムがここに表示されます。
（上から順に1位、2位...）
- ⑦表示
-
登録はしたものの一時的に非表示にしたい時はチェックを外します。
- ⑧保存（読み込み）
-
複数のサイトでランキングデータを使い回ししたい時は「保存」ボタンでデータを外部ファイルとして保存して置き、利用したいサイトで「読み込み」をクリックすれば保存済みデータを読み込めます。
ランキングデータの拡張子は「.rank2」となります。
すでにあるランキングデータは上書きされるので注意が必要です。
- ⑨独自タグ
-
デフォルトで「独自タグでの出力」になってますが、ここをクリックして「HTMLタグ」に切り替えるとランキング・データをHTML形式で直接出力することができるようになります。
詳しくはコチラをご覧下さい。
新規追加（or 編集）
（タブ）ランキングデータ
新規追加や編集時には下のような設定画面が表示されます。
（すでに設定済みの画面&実際の表示への反映でご説明していきます。）
縮小版
- ①タイトル
-
商品名やサービス名を入力します。
- ②リンクページ
-
商品（or サービス）のリンク先URL、アフィリエイトリンクなどを入力します。
ただしウェブビーコン付きアフィリエイトリンクはURLのみの出力に変えられてしまうので、純粋なアフィリエイトリンクURLのみ記入可と覚えておきましょう。
- ③詳細ページ
-
商品（or サービス）詳細ページのURLを入力します。
内部ページの指定なら右側のアイコンから指定するとラクです。
- ④画像
-
商品（or サービス）画像の登録エリアになります。（※右上の「画像の追加」で追加可能）
サンプルのように複数登録した場合はスライダー形式での表示になります。
商品（or サービス）の表示順は画像上で右クリック→該当項目を選択で変更可能。
- ⑤評価
-
商品（or サービス）の評価をスターをクリックして0～5の間で表示（0.5刻み）できます。
- ⑥価格
-
商品（or サービス）の価格を入力します。
（数字だけの入力）
- ⑦備考
-
「送料無料」や「特典付き」といった付加情報がある場合に入力します。
- ⑧⑨⑩説明文 or フリーテキスト
-
商品（or サービス）に関する情報を項目別に分けて紹介できます。
必要なければ未記入のままにしておきます。
（タブ）フリー項目
デフォルトで搭載されてる「⑤評価・⑥価格・⑦備考」の3つの情報以外にも、フリー項目を利用して「容量・個数・ブランド…」といった様々な情報を追加で表示することができます。
このあと紹介する『フリー項目のタイトル設定』で項目が設定されてる箇所のみ入力できます。
（※項目未設定時はグレー表示）
（タブ）レビューグラフ
フリー項目と併せて、商品の比較用にレビューグラフも表示できます。
（選択項目は評価1～評価5までの5段階）
このあと紹介する『レビューグラフのタイトル設定』で項目が設定されてる箇所のみ入力できます。
（※項目未設定時はグレー表示）
（タブ）詳細設定
主にタイトル系のカスタム設定項目になります。
縮小版
- ①キャッチコピー
-
商品（or サービス）タイトルの上にキャッチコピーを付けられます。
（未入力のままなら非表示）
- ②説明文1のタイトル
-
『説明文1』に何らかを記載している場合、（自動入力の）「商品（or サービス）」タイトルの後ろに付加テキストを設定できます。
サンプルでは「の特徴」が付加テキストでそこだけ変更可です。
「商品（or サービス）」タイトルが不必要なら項目内全体を削除してから新たにテキストを記述します。
- ③説明文2のタイトル
-
『説明文2』に何らかを記載している場合、（自動入力の）「商品（or サービス）」タイトルの後ろに付加テキストを設定できます。
サンプルでは「の評価」が付加テキストでそこだけ変更可です。
「商品（or サービス）」タイトルが不必要なら項目内全体を削除してから新たにテキストを記述します。
- ④フリーテキストのタイトル
-
『フリーテキスト』に何らかを記載している場合、フリーテキスト用のタイトルを記述できます。
（未入力のままなら非表示）
- ⑤価格の単位
-
価格の単位として「円・円（税込み）・円（月額）」が用意されてます。
とりあえずの設定が完了したら、いったん画面下部の「OK」をクリックします。
すると冒頭のサンプル登録画面のように（1個の）「ランキングアイテム」として追加されます。
筆者
これを繰り返すことでランキングに掲載するアイテムを追加していきます。
さらに「保存」をクリックするとランキングの登録画面になるので適当な名称で登録しておきます。
編集画面上には＜ランキング＞専用の独自タグが自動挿入されます。
以降はこのタグをダブルクリックするか、【ランキングパーツの管理】で修正したいランキング名を選択すれば前回までの修正データが立ち上がります。
パーツ機能はデザインモードでもテキストモードと同じくSIRIUS2の独自タグでの表示になるので、（ブラウザ or内蔵）プレビューでの表示チェックが不可欠になります。
プレビュー・タブ
設定済みのランキングがどのように表示されるかがここで確認できます。
項目タイトル
タイトル関連のデフォルト設定がここで指定できます。
項目のタイトル設定
- ①フリー項目のタイトル設定
-
デフォルトでは「評価・価格・備考」の3つの情報表示機能が搭載されてますが、それ以外にもフリー項目を利用して「容量・個数・ブランド…」といった様々な情報を追加で表示することができます。
ただしフリー項目で追加情報を入力・表示する際には、先にここで項目名や単位を決めておく必要があります。
設定済みになるとランキングアイテム・データ編集時の「フリー項目の設定」内で値が入力できるようになります。
（未設定の箇所はグレー表示で入力不可）
- ②レビューグラフのタイトル設定
-
レビューグラフで評価を表示する際には、先にここで項目名を決めておく必要があります。
設定済みになるとランキングアイテム・データ編集時の「レビューグラフの設定」内で評価値が選択できるようになります。
（未設定の箇所はグレー表示で入力不可）
その他のタイトル設定
- ①説明文のタイトル（デフォルト値）
-
『説明文1・説明文2・フリーテキスト』の各タイトルのデフォルトとなるテキストを入力しておけます。
新規でランキングアイテムを追加する際には何もしなくてもここに入力したテキストがデフォルトで表示されるので、必要に応じて修正していくというわけです。
- ②③その他の項目タイトルの設定
-
ここに記入したテキストはそれぞれ連動する番号の位置に全ランキングアイテム共通のタイトルテキストとして表示されます。
ランキングアイテムの編集画面内には該当する項目がないので、個別に修正することはできないようです。
テンプレート
＜ランキング＞用のテンプレートをカスタマイズすることもできます。
これはもちろんHTMLに詳しい方向けの機能なので、初心者の方は完全無視して問題ありません。
ただ利用に際しては注意が必要です。
詳しくはこのあとの「HTML形式で出力」をご覧ください。
HTML形式で出力
ランキング作成画面の右上には「独自タグ」というトグルスイッチがあります。
ここをクリックすると「HTMLタグ」という名称に切り替わります。
その状態で「保存」をクリックすると、ランキング・データを独自タグではなくHTML形式での直接出力ができるそうなんですが…筆者の環境ではなぜかできませんでした。
筆者
やり方が間違っているのか、バグなのか。
ただしこちらもHTMLに詳しい方向けの機能なので初心者の方やカスタマイズに興味はない方は完全無視して大丈夫です。
なおHTML形式で出力したデータも＜ランキング＞設定画面にて再編集（修正）することができるそうです。
しかしながら記事編集エリア内でHTMLタグをカスタマイズしても再編集時にその内容が設定画面に反映されるわけではないそうなので、この機能を使うんであればランキングデータが完全に完成し終わったあとにさらに細かいカスタマイズを行う時しか使えないということです。
（システム内部の＜ランキング＞用HTMLを強制的に読み込む仕様だそうで）
そうはいってもまたいつか再編集する機会が出てくる確率は極めて高いと思われるため、そうなるとこの機能はむしろ使わずにいた方がいいのかもしれません。
筆者
HTMLタグだけ別ファイルに保存しておき、再編集（修正）するたびに毎回貼り付け直すという手法もあるにはありますけど。
ウェブビーコン付きアフィリエイトリンクは貼れない
アフィリエイトリンクというのは通常2種類あります。
一つはコチラ↓のようにシンプルなリンクURL。
https://directlink.jp/tracking/xxxxx/
もう一つはウェブビーコンが付いたアフィリエイトリンタグ（※ASP発行のアフィリエイトリンク用コード）。
たとえばASPのA8から発行されるアフィリエイトリンクタグは下のようになってます。
<a href="https://px.a8.net/xxxxx" target="_blank" rel="nofollow">自由テキスト</a><img border="0" width="1" height="1" src="https://www18.a8.net/0.gif?xxxxx" alt="">
（※xxxxxには個人データが入ります）
このうち赤文字の部分はいわゆるウェブビーコンと呼ばれる部分になります。
『ウェブビーコン』とは？
ウェブビーコンというのは一般的にはASP側がクリック数などを計測するために使われる、ブラウザ上には表示されない画像リンクのことです。
『ASP』とは？
ASPというのは『アフィリエイト・サービス・プロバイダ』の頭文字をとったもので、成功報酬型広告（成果が発生した場合にのみ報酬が支払われる広告）を配信するプロバイダのことです。
「A8」とか「バリューコマース」とか「リンクシェア」などが有名どころです。
ただこのウェブビーコンというのは少々厄介なヤツでして、これが付いてるがためにアフィリエイトリンクタグをボタン画像にしにくかったり、できたとしてもレイアウトが崩れたりすることもあります。
そのため本来ならウェブビーコンは”亡き者にしたい”ところなんですがアフィリエイトリンクタグの改変はほとんどのASPで禁止になってます。
よってボタンリンクは諦めてテキストリンクにしている方も多いんじゃないでしょうか。
ちなみにA8のヘルプにはその旨についての記載があります。
バナー素材やテキスト素材に付属している1ピクセル×１ピクセルのタグは、広告素材のインプレッションをカウントするために必要なものです。
削除してしまうと正確なトラッキングが出来なくなりますので、取り外さないでそのままご利用ください。
パーツ＜ランキング＞の『リンクページ』（”公式サイトはこちら”の部分）もこのウェブビーコンが付いたアフィリエイトリンクタグはそのままではうまくはめ込めません。
中にはウェブビーコンをばっさりカットして純粋なアフィリエイトリンクURLだけを使っている
それできちんと成果として認められてるのか、ASP側から何らかのペナルティは受けないのか、その辺のところはよくわかりません。
（私は”マジメで気が小さい”のでそのまま改変せずに使ってますけど）
ちょっとやってみましょう。
こちらが実際のアフィリエイトリンク（※画像）で、青枠内がリンクURLで赤枠内がウェブビーコンです。
このアフィリエイトリンクタグを＜ランキング＞の『リンクページ』にコピー＆ペーストしてみます。
しかしながら（青枠内の）リンクURLのみのテキストに強制的に変換されてしまいます。
ソース上で確認してもウェブビーコンはどこにも見当たらず、結果としてアフィリエイトリンクタグが改変された形になってます。
リンクテキストも＜ランキング＞用HTMLの「公式サイトはこちら」のままです。
ということで＜ランキング＞の『リンクページ』に記載可能なのは、現状では純粋なアフィリエイトリンクURLのみということになります。
【Volar2】での設定
【Volar2】ではウェブビーコンを活かしたまま、結果的にはアフィリエイトリンクタグが改変されない形で表示されるようなカスタマイズをご用意してます。
基本的には＜ランキング＞用HTMLの一ヵ所をこちらで用意したHTMLタグで差し替えることで、ウェブビーコンも残したままリンク改変なしでのリンク設定が可能になります。
ちなみにこちらが【Volar2】の設定でカスタマイズしたアフィリエイトリンクのソース上での表示です。
アフィリエイトリンクタグが（改変されることなく）全部表示されてますでしょ。
リンク内のテキストもちゃんとアフィリエイトリンクタグ内のテキストに変わってます。
ソース上では一応”リンクの改変なし”は確認できてますが、あくまでアフィリエイトリンクタグという特殊なタグゆえご利用に際しては自己責任にてお願いしてます。
とはいえ筆者の環境では特にペナルティをくらったことはないので大丈夫かとは思いますが。
