賢威でサイトを作成している場合、デフォルトの状態だと、トップページにある最新記事の「続きを読む」リンクボタンは、記事タイトルがそのままアンカーテキストになっている。

アンカーテキストというのはリンク部分のテキストのことである。

これだとアンカーテキストが長くなってしまい格好が悪いので、クールな画像に変更したいと思っている人は多いはずだ。

そこで、今回は「続きを読む」リンクをボタン画像に変更する方法について紹介する。

※ちなみに、このサイトはルレアのテンプレートを使用しているが、私のトレンドブログでは賢威を使って作成している。

<ボタン画像の作成>

まずは、ボタン画像をGIMPで作成するのだが、このツールが使えない人は、ネットで「ボタン イラスト」といった単語で画像検索すればフリー素材も簡単に見つけられる。

ボタン画像を作成したら、それをワードプレスにアップロードしておく。

<賢威の設定方法>

1:管理画面で、外観→テーマ編集→メインインデックスのテンプレート(index.php)と進む。

2:以下のコードが記述されている部分までスクロールしていく。

<!--本文抜粋-->
<?php the_excerpt(); ?>
<p class="link-next"><a href="<?php the_permalink() ?>">「<?php echo(get_the_title('', '', false)); ?>」の続きを読む</a></p>
<!--/本文抜粋-->

 

3:上のコードを以下のように変更する。

ここで注意すべきは、上のデフォルトのコードのバックアップを必ずとっておくこと

<!--本文抜粋-->
<?php the_excerpt(); ?>
<p class="link-next"><a href="<?php the_permalink() ?>"><img src="アップロードした画像のURLを記入"></a></p>

<!–/本文抜粋–>

4:次に外観→テーマ編集→design.cssと進み、以下のコードにおいて青色の文字列を削除する。

青色部の文字列を削除することで、デフォルトのリストアイコンを削除できる。

.link-next a{
padding: 3px 0 3px 15px;
background: url(./images/icon/icon-arrow_r.png) 0 5px no-repeat;
}

これで完了だ。