意外に高機能なボタンリンク

キャプチャ画像

SIRIUS ver.1.5で搭載されたボタンリンクですが、
アフィリエイトサイトにはとても便利なリンク機能となってます。

 

『ボタンリンク』はSIRIUS上位版のみの機能です。


ボタンリンクとは

SIRIUSには以前からの機能として、
『ボタン画像』という画像形式のボタン作成機能があります。

 

キャプチャ画像

 

このボタン画像に”リンクの挿入”でリンクを貼りつけることで
ボタンリンクとしての機能が働きます。

 

しかしながらいかんせん画像によるボタン機能であるため、
扱いが少々面倒で柔軟性が低いことも確かです。

 

そこへ登場したのが、画像を使わずCSS(スタイルシート)のみで構成される
ボタンリンク機能です。

 

キャプチャ画像

 

”HTML・CSS”とは?

HTMLとはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の頭文字で、ウェブサイトを作るための専用の言語です。

 

いまあなたが見ているページは基本的にはこのHTMLによって構成されています。

 

【テンプレート】→【HTMLテンプレート編集】に書いてあるものがその実態です。

 

そこには『ヘッダー画像には○○.jpgという画像を表示せよ』とかの記述が書いてあったりします。

 

一方CSSというのは”Cascating Style Sheets”の頭文字をとったもので、スタイルシートとも呼ばれます。

 

サイトの基本的な文書構造を記述するHTMLに対し、レイアウトデザインや見出し・段落などの見栄え(デザイン)を整えるのがCSSになります。

 

【テンプレート】→【スタイルシート編集】に書かれているのが具体的な設計内容になります。

 

そこには『基本となるフォントサイズは○○』とか、『見出し1のフォント色は○○』とか、『ボックスの下余白は○○pxにする』とかの設定が書いてあります。

 

これで作ったボタンリンクのサンプルがコチラ↓。

通常のテキストリンクがボタン画像”風”に表示されます。

 

(※ダミーリンクなのでクリックしてもこのページが表示されるだけです)

詳細設定

細かい設定も可能です。

 

キャプチャ画像

 

いかがです?
とっても便利な機能じゃないですか。

 

ボタンリンクのデザイン

ボタンリンクのデザインは8種類用意されてます。

 

キャプチャ画像

 

なお「デザイン8」のみになりますが、
背景をシルバー調に変更することもできます

 

さらに「デザイン8」は、フリースペースなどに別途著作権フリーのアイコン画像と併せて使えば、
サイドバーにサブメニュー”風”のメニューを置くこともできます。

 

やり方としては

  1. 記事編集画面でボタンリンク(デザイン8)を使ってメニューを作る
  2. 完成したHTMLボタンリンクコードをフリースペース(メインメニュー・上段 or 下段)にコピー&ペーストする

 

SIRIUSの『サブメニュー』機能を使って画像リストを作るよりも簡単にできます。

 

当サイトの個別ページのサイドメニューにのみですが、『ボタンリンク・サブメニュー例』というタイトルでデモメニュー画像を表示させてます。

 

リンクはダミーですのでクリックしても無意味ですよ。

 

ボタンリンクの並列表記

ボタンリンクは扱いの面倒な画像ではないので、
テキストを変更しての新たなボタンリンクの作成もカンタンです。

 

また複数のボタンリンクを並べて表示したい場合は
『ボタンリンクを横並びにする』を使えば簡単に並列表記ができます。

 

『ボタンリンクを横並びにする』やり方

①テキストモードでボタンリンクを2つ作り、
範囲選択して右クリック→『ボタンリンクを横並びにする』をクリックします。

 

キャプチャ画像

 

新たなタグが自動挿入されます。

 

キャプチャ画像

 

これをPCのブラウザで見ると、

 

キャプチャ画像

 

iPhone(スマホ)では縦に並びます。

 

キャプチャ画像

アフィリエイトリンクはタグ次第

公式サイトによると

<div>~</div>タグで囲む形式のため、リンクタグを改変しないままボタン形式にすることができる。

とあります。

 

しかしながらこれはアフィリエイトリンクのみが発行されるASPなら問題はないですが、
イメージタグが付いてくるようなASPのアフィリエイトリンクについては難しいようです。

 

どういうことかというと、発行されたアフィリエイトリンクがこちら↓のようなシンプルなリンクのみの場合はそのままコピー&ペーストで完了します。

 

http://directlink.jp/tracking/xxxxx/
(※xxxxxは管理人個人のデータなんでボカしてます)

 

一方、イメージタグの付いたアフィリエイトリンクタグというのは

 

<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="">

 

こんな感じで赤文字の部分のイメージタグが付いたアフィリエイトリンクタグのことです。

 

イメージタグというのは一般的にはデータの計測用に使われる、ブラウザ上には表示されない画像リンクのことです。

 

イメージタグ自体は邪魔な存在でしかないんですが、それを単純にカットしてしまうとタグの改変にという規約違反になる恐れがあるので、むやみに無視するわけにもいかないんですね。

 

そうなると純粋なアフィリエイトリンク部分だけをコピー&ペーストするわけにもいかず、そうかといって発行リンクそのまま全部を入力してもリンク以外は弾かれちゃうので、結果としてイメージタグのついたアフィリエイトリンクは”使えない”ってことになるわけです。

 

この辺はSIRIUS制作陣はどう考えてるのかわかりませんが、カスタムテンプレート【Volar】ではイメージタグの付いたアフィリエイトリンクでもタグの改変なしに使えるようなウラワザ的なやり方を一応あみだしてはいます。

 

あくまで自己責任にはなりますけど。

 

リンク

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替