賢威で簡単シンプルかつ目立つテキストリンクを作る方法

ブログを作ってると地味に工夫に悩むのがこのリンクテキストではないでしょうか。例えば、商品のレビューをするブログを作っていて、記事の末尾で「ご購入はこちら」みたいに誘導したいときとかは、このテキストリンクを使うことが大半だと思います。

もちろんボタン画像を使ったほうが本当は見栄え的にも綺麗ですしスマートですが、「毎回、ボタン画像を作るのは面倒」とか、「SEO対策上アンカーテキストを残したい」（もちろんボタン画像でもテキストだけHTMLにできますが、CSS周りがわからない／面倒）とか、「画像よりもテキストリンクのほうがクリック率が高いって聞いた」（そうなんですか？！）とか、色々アフィリエイターにはこだわりがあると思います。

なので今回は、賢威でシンプルにテキストでかけて、かつそれなりに見栄えもよくクリックされそうな以下のようなテキストリンクの作り方を紹介します。

 
シンプルなリンクの作り方はこちら

まずはテキストリンクに使う矢印の画像を用意

まずはテキストリンクの左側につける矢印の画像を用意します。テキストリンクの場合は、この矢印の画像が唯一の画像なので、それなりに目立つ画像のほうがいいと思います。一応、今回は以下のような矢印の画像を作ってみましたので、そのまま他で使って貰って大丈夫です。

 
他にもいくつかの色バリエーションをいつものように「無料画像素材置き場」においてありますので、欲しいのがあれば持っていってください。チカチカ点滅してるやつもあります（笑）　ただ点滅は、使い方によってはスパムっぽくなってしまい警戒心を高めてしまうので注意が必要です。

CSSを使って背景画像として指定する

賢威の管理画面から「テーマ編集->design.css」を開いてください。design.cssの末尾あたりに以下のような記述をそのまま追加してください。

#main-contents a.link_arrow{
display: block;
background: url(矢印のアイコン画像) center left no-repeat;
height: 43px;
width: 450px;
padding-top: 10px;
padding-left: 150px;
font-size: 25px;
font-weight: bold;
color: #08406D;
}

 
次にテキストリンクにマウスを乗せたときの文字色の変化を指定します。さきほど記述したCSSの真下に以下のような記述を追加してください。

#main-contents a.link_arrow:hover{
color:#7892A7;マウスを乗せたときに変化させたい文字色を指定します。
}

 
上にもし、そのままbackground:url( … )の記述も足せば、マウスを乗せたときに矢印の画像の色を変化させる、ということも可能です。

最後にリンクを貼りたい場所にclassを指定する

あとは最後に賢威の記事の投稿画面で、リンクにしたい部分をaタグで囲うときに以下のように記述すればOKです。

<a href="リンク先のURL" class="link_arrow">リンクテキストにしたい部分の記述</a>

 
以上が賢威の２カラムテンプレート（横幅600px以上）で目立つテキストリンクを作る方法でした。文字サイズなどはあくまでも私個人の好みで適当に設定しているので、大きすぎるようだったらアレンジして使ってみてください。