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


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

<賢威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>も消して下さい。

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

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

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

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

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

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



総合案内

著者情報
著者情報
年収1000万円まで守る2つの事
年収1000万円まで守る2つの事
読者さまの声
読者さまの声
もくじ
もくじ
超初心者講座
超初心者講座
ブログ基礎講座
ブログ基礎講座
トレンドブログ講座
トレンドブログ講座
パワーブログ講座
パワーブログ講座
マインドセット
マインドセット
コピーライティング
コピーライティング
ブログアフィリエイト
ブログアフィリエイト
トレンドアフィリエイト
トレンドアフィリエイト
ネットビジネス
ネットビジネス
SEO
SEO
コラム
Googleアドセンス
Googleアドセンス
与える事に徹する
与える事に徹する
先生の選び方
先生の選び方
Googleアドセンスの始め方
Googleアドセンスの始め方
賢威カスタマイズ
賢威カスタマイズ
このブログについて
このブログについて
女性のブログアフィリエイト
女性のブログアフィリエイト
そもそものステップが違う
そもそものステップが違う
中高年の方はシンプルな方法がお勧め
中高年の方はシンプルな方法がお勧め

著者:ヒデアキ
現在は、ネット集客のスキルを活かして既に起業されている方やこれから起業を真剣に考えている方を全力でサポートしています。
更に詳しいプロフィールはこちら

このページの先頭へ