賢威で続きを読むの部分をボタン画像に変更する方法


賢威のサイトでトップページに行くと、記事ページへのリンクは次のようになっていますよね。

<賢威7>賢威7 続きを読む ボタン

<賢威6.2>1

いわゆる「続きを読む」の部分です。これでもいいのですが、ボタンの画像にしたいという方もいるかと思います。

なので今回は、その「続きを読む」のリンクをボタンの画像にする方法について解説します。

画像をアップロードする

まずはボタンに使う画像をワードプレスのダッシュボード→メディア→新規追加からアップロードします。

ここで使う画像はあまり大きいと意味がないので、ボタンとしてふさわしいと思うサイズの画像を作成してアップロードして下さい。

今回はこのような画像を用意しました。

2

アップロードが完了したら、その画像のURLを控えておいて下さい。

3

これですね。これが必要になります。

賢威7でリンクを画像に置き換える方法

ここまでは、「続きを読む」のリンクをボタンの画像にする為の前準備になります。

ここからは、賢威7と賢威6.2で「続きを読む」のリンクをボタンの画像に置き換える方法について解説します。

まずは、賢威7でリンクを画像に置き換える方法から解説します。

賢威7で「続きを読む」のリンクをボタンの画像にするには、

ワードプレスのダッシュボード→外観→テーマの編集→cont.php

の順にクリックし、「cont.php」の編集画面(以下の画面)を開きます。

賢威7 cont.php

「cont.php」の編集画面を開いたら、画像のマーカーした以下の一文を探します。

<p class=”link-next”><a href=”<?php the_permalink() ?>”><?php _e(‘see more’, ‘keni’); ?></a></p>

このうち

<?php _e(‘see more’, ‘keni’); ?>

の部分を、

<img src=”ボタン画像のURL” width=”100″ height=”100″ alt=”続きを読む”>

に書き換えます。

書き換えをすると、以下のようになります。

<p class=”link-next”><a href=”<?php the_permalink() ?>”><img src=”ボタン画像のURL” width=”100″ height=”100″ alt=”続きを読む”></a></p>

そして、「ボタン画像のURL」の部分に先程用意しておいた画像のURLを入力すると、以下のマーカー部分のようになります。

賢威7 cont,php 書き換え

このように「cont.php」の編集をすることで、「続きを読む」のリンクをボタンの画像に変更することができます。

ただ、このままでは、以下の画像のように、賢威7の初期状態で表示される「>」マークが残ってしまいます。

続きボタン

なので、「続きを読む」のリンクをボタンの画像に変更できたら、次は見栄えをよくするために「>」マークを消します。

「>」マークは、賢威7の「base.css」から編集をおこなうことで消すことができます。

「base.css」の編集をするには、

ワードプレスのダッシュボード→外観→テーマの編集→base.css

の順にクリックし、「base.css」の編集画面を開きます。

「base.css」の編集画面を開きましたら、以下の画像のように「.link-next a{」と書かれている箇所(赤くマーカーした部分)まで画面をスクロールします。

賢威7 base.css 

「.link-next a{」まで画面をスクロールしましたら、「.link-next a{」の中に書かれている以下のコードを無効化(コメントアウト)します。

background: url(./images/icon/icon-arw-next.png) left 6px no-repeat;

上記のコードを無効化するには「/* */」で上記のコードを挟みます。

「/* */」はcssのコードを無効化する効果があります。

「/* */」で上記のコードを挟むと、以下の画像のようになります。

ピンクでマーカーした部分が「/* */」になります。

賢威7 base.css コメントアウト

このように「/* */」で上記コードを無効化することで、以下の画像のように「>」マークが消えます。

賢威7 続きを読む ボタン

賢威6.2でリンクを画像に置き換える方法

続いて、「続きを読む」の部分を出力しているコードに、この画像のURLを差し替えます。

まず、ワードプレスのダッシュボード→外観→エディター→メインインデックスのテンプレート(index.php)にいきます。

4

そしたら、画像のこの部分を探してください。この部分を置き換えるのですが、ちょっと細かいので、予めバックアップを取るか、この部分だけをメモ帳やテキストファイルなどにコピペして保存しておくことを強くオススメします。

で、赤枠の部分はこのようになっています。

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

このうち

<p class=”link-next”><a href=”<?php the_permalink() ?>”>「<?php echo(get_the_title(”, ”, false)); ?>」の続きを読む</a></p>

を次のように書き加えます。

<p class=”link-next”><a href=”<?php the_permalink() ?>”><img src=”ボタン画像のURL” width=”100″ height=”100″ alt=”続きを読む”></a></p>

ここで先ほどの画像のURLが必要なんですね。

どういうことかというと、

5

画像の青いラインの部分を見て下さい。

「<?php echo(get_the_title(”, ”, false)); ?>」

の部分が記事のタイトルを読み込んでいて、「続きを読む」の部分のリンク先名となっていたんです。これを消して、新たに

<img src=”ボタン画像のURL” width=”100″ height=”100″ alt=”続きを読む”>

画像を挿入した、ということなんです。

「width=”100″」の数字で画像の横幅、「 height=”100″」の数字で画像の高さを設定できます。とりあえず適当に設定してみて、大きすぎるなどの不都合があれば、ここで数字を変更すればOKです。

また「alt=”続きを読む”」となっている部分は、グーグルのクローラに画像について説明する部分だと思って下さい。ここは無くてもボタンには影響はありませんが、あったほうがグーグルの評価は良いです。

6

この様になったら、「ファイルを更新」で保存し、トップページに戻ってみます。

7

これで「続きを読む」の部分が、ボタンの画像に切り替わりました。

ちなみに、ボタン画像の下に小さい黒丸の矢印がありますよね。ここは先ほどのコードのうち

<p class=”link-next”>と</p>

を消去すると黒丸の画像も消えます。

<p>で始まるタグは必ず</p>でくくらないといけないルールになっているので、<p class=”link-next”>と同時に最後の</p>も消して下さい。

次ページ

12次

今回の記事はお役にたてましたでしょうか?

もし、今回の記事を読んで感想や分からない事などありましたら、下のフォームより僕にお伝え下さい。

些細な事でも構いません。

おそらく、あなたが抱いた疑問は、これからこの記事を読む方も抱く疑問です。

そういった疑問を1つ1つ解決していきます。

コメントして頂ければ気づき次第、すぐに回答いたします。

このブログは、

・アフィリエイト開始初月から9万円のネット収入が得られた秘密

アフィリエイト開始2ヶ月目で以前勤めていた会社からの給料と
 同額
のネット収入を確保した方法

・5ヶ月目で月収120万円を達成した最先端テクニック

・これから流行り始めるブログマネタイズの新しい思考法

などを書いています。

只今、ブログの内容をより体系的にまとめたビジネス教科書を
無料でプレゼントしています。

以下のフォームに教科書を受け取るメールアドレスと、
あなたの苗字を記入してプレゼントをお受け取り下さい。





記事一覧


著者:ヒデアキ
現在は、毎月100万円の収入を得ているブログアフィリエイトの知識を活かして「新たな収入源を手に入れ大切な人を守りたい」と真剣に考えている方を全力でサポートしています。
更に詳しいプロフィールはこちら


このページの先頭へ