賢威トップページの「続きを読む」をボタン画像に変更する方法【備忘録】

こんにちは、ユウトです。

今回は、賢威でトップページの記事に表示される「続きを読む」のリンクをボタン画像に変更する方法についてまとめておきます。

ボタン画像

まずは、ボタン画像を作成し、ワードプレス管理画面のメディアからアップロードさせておきます。

メディア

続いて、ワードプレス管理画面の外観、テーマの編集と進み、メインインデックスのテンプレートを開きます。

メインインデックス

そして、以下のコードが記載されている箇所を探してください。

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

このコードを次のように変更します。

※シートを変更する前にバックアップをとっておきましょう。

<!--本文抜粋-->

<?php the_excerpt(); ?>

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

次に、テーマの編集のdesign.cssを開き、次のコードが記載されている箇所を見つけます。

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

上記コードの青色文字を削除すれば完了です。

トップページを表示させ、記事の「続きを読む」の文字リンクがボタン画像に変更されたことを確認してください。

 ボタン画像

 以上で終了です。



コメントを残す

サブコンテンツ

このページの先頭へ