イメージタグ付きアフィリエイトリンクをランキング作成機能の公式ボタンに挿入するやり方

イメージタグの付いたアフィリエイトリンクはそのままではランキング作成機能の公式ボタンで利用することはできません。

ですが、ちょっと設定を変えてやればアフィリエイトリンクの改変なしで利用することができるようになります。

イメージタグ付きアフィリエイトリンクをボタンリンクに挿入するやり方

イメージタグ付きアフィリエイトリンクはそのままだとSIRIUSのボタンリンクに載せられません…がやれないことはないです。

dramatic-sirius.com

①【ランキングの新規作成】をクリックし、

②【ランキングデータ】タブ→【新規追加】をクリックすると、下のような『ランキングの設定』ダイアログが出てきます。

上記項目欄に必要事項を入力すれば、こちら↓のようなランキング表が簡単に作成できます。

（※サンプルは角丸テンプレートがベースになってます）

ここで問題なのが赤枠で囲った「公式ページはこちら」の部分。

先ほどの『ランキングの設定』ダイアログの赤枠（リンク先のURL）内に入力可能なのは、純粋なリンク先のURLのみ。

（※それ以外のものを入れても開き直すとリンク以外は消去されてしまいます）

そこでテンプレートを改修することにします。

改修前の準備

『ランキングの設定』ダイアログをキャンセルでいったん消すか、【ランキングの新規作成】で『ランキング作成』ダイアログを表示させます。

『PC用テンプレート』タブをクリックしてテンプレート用HTMLを表示させます。

テンプレートの改修1

テンプレート63～66行目の

<tr>
<th>{##フリー項目6_タイトル##}</th>
<td>{##フリー項目6##}</td>
</tr>

上記コードを下のようにコメントアウトして、フリー項目6をブラウザに表示させないようにします。

<!-- ★<tr>
<th>{##フリー項目6_タイトル##}</th>
<td>{##フリー項目6##}</td>
</tr>★ -->

テンプレートの改修2

テンプレート80行目が『詳細ページはこちら』と『公式ページはこちら』の表示内容になります。

そこで80行目後半部分の、

<span class="official"><a href="{##リンク先URL##}" target="_blank">公式ページはこちら</a></span>

上記のコードを下のように変更します。

{if:フリー項目6}<span class="official">{##フリー項目6##}</span>{/if:フリー項目6}

意味合いとしては「もしもフリー項目6に何らかの値が入力されていたらそれを『公式ページはこちら』に入力する」というものです。

何も記入してない時は『公式ページはこちら』そのものが表示されません。

フリー項目6にアフィリエイトタグを入力

テンプレートの改修が終わったところで、実際にアフィリエイトタグを入力していきます。

1位の行を選択→【編集】をクリックし編集画面を開きます。

さらにフリー項目タブをクリックし、フリー項目6の”内容”にASPから発行されたアフィリエイトリンクタグ（テキストリンク）をコピー＆ペーストします。

※今回テキスト部分は「公式サイトはこちら」に変更してます。（※赤枠内）

2位以下も同様の作業で進めていきます。

余計なマークを非表示

これまでの作業で設定自体は改修終了なんですが、実はイメージタグという目に見えない画像のおかげで矢印ボタンの挙動がおかしくなってしまうケースもあります。

具体的にはリンク部分にマウスオーバーすると矢印ボタンの位置がずれてしまうというもの。

（※下の矢印をドラッグすると違いがわかります）

これを修正するとあちこちに影響が出てしまうので、いっそのこと非表示にしちゃいます。

実のところ、この矢印ボタンが表示されるのはPCブラウザで表示した場合だけなので大勢に影響はないと思います。

やり方は以下のコードを【テンプレート】→【スタイルシート編集】→【ユーザー指定スタイル】に書き込むだけ。

@media screen and (min-width: 1025px) {
.rank .more a::after {
border: none!important;
}
}

結果、こんな感じで表示されます。