賢威7のデフォルトの状態ではトップページにそれぞれ投稿した最新記事の一部が表示されていて、後は「続きを読む」というボタンになっていることと思います。いまいちこのままじゃ面白みもオリジナリティもないですよね。何よりこの文字自体小さいかなと思うんですね。目立たない上にクリックしにくいので、今回はこの「続きを読む」の部分を画像に変更するカスタマイズ方法を本記事で説明していきます。

続きを読むの部分を画像に変更してオリジナリティアップ

賢威7で記事の「続きを読む」部分を画像にカスタマイズする方法メイン

最新記事を見てみると上からずらっと投稿した記事が並びますね。それぞれに「続きを読む」というテキストでリンクが貼ってあると思います。これを画像にしてみるとなかなかかっこよかったりしますのでやってみてください。しかも画像になって随分とクリックしやすくなりますのでオリジナリティアップすること間違いないでしょう。

では、早速賢威7で「続きを読む」部分を画像に変更する方法を説明していきたいと思います。

 

 

賢威7で「続きを読む」-カスタマイズ方法

必要な画像を用意する

記事の続きを読むアイコン赤

「続きを読む」部分に貼り付ける画像を用意しましょう。画像自体は必要以上に大きすぎたり、もしくは小さすぎたりしなければ好みのサイズで構いません。ちなみに僕は横幅320×縦幅80で作成した画像を使います。

 

画像をメディアから新規追加しURLを控えておく

賢威7で記事の「続きを読む」部分を画像にカスタマイズする方法1

ダッシュボード→メディア→新規追加で上記画像に行きますので、左側のファイルを選択をクリックしPC内に用意した画像を右側のアップロードボタンをクリックし取り込んでください。

 

賢威7で記事の「続きを読む」部分を画像にカスタマイズする方法2

取り込んだ画像のURLを上記画像のようにコピーして控えておいてください。
※後でURLを使うため、後からコピーしても大丈夫です。

 

 

「続きを読む」の前の記号を消す

賢威7で記事の「続きを読む」部分を画像にカスタマイズする方法3

上記画像の通り、デフォルトでは「続きを読む」の前に記号がついています。先程取り込んだ画像を挿入する前に「続きを読む」部分の前についてある記号を先に消してしまいましょう。ちなみにこの作業をしなければ画像を取り込んだ後も記号は残ってしまうので見た目がすごく不自然となります。

 

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

賢威7で記事の「続きを読む」部分を画像にカスタマイズする方法4

ダッシュボード→外観→テーマ編集→base.cssを開きます。その中に上記画像の部分があるのでこちらを一行全て削除してください。

※Ctrlを押しながらFキーを押すと右上に窓が出てきますのでこちらに下記URLを貼り付けてEnterを押すと上記画像の位置に飛べます。

 

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

 

これで記号は消えたので次はいよいよ「続きを読む」の部分を取り込んだ画像に変更しましょう。

 

 

「続きを読む」部分を画像に変更する

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

賢威7で記事の「続きを読む」部分を画像にカスタマイズする方法5

&lt;p class="link-next"&gt;&lt;a href="&lt;?php the_permalink() ?&gt;"&gt;&lt;img src="<strong><span style="color: #ff0000;">コピーした画像のURL</span></strong>"&gt;&lt;/a&gt;&lt;/p&gt;

 

ダッシュボード→外観→テーマの編集→cont.php内の一番下から9行目あたりにある上記画像の赤枠で囲んでいる部分のソースを削除してください。その後、上記画像下にあるソースを削除した部分に挿入します。

そして先程用意していた画像のURLを、先程同箇所に挿入したソースのコピーした画像のURL」という部分を消してそこに貼り付けてください。

貼り付け後は最後にファイルを更新すると設定は完了します。これで「続きを読む」部分は先程用意した画像に変更になったかと思いますので確認してみましょう。

 

 

「続きを読む」部分を画像に変更した完成図

賢威7で記事の「続きを読む」部分を画像にカスタマイズする方法6

「続きを読む」部分を画像に変えた完成図がこちらです。我ながら見やすい「続きを読む」ボタンが完成したと思いますがどうでしょうか?

 

 

まとめ

賢威7のデフォルトでは「続きを読む」部分がテキストですごく小さいです。本記事で説明したような方法をとればかなり簡単にカスタマイズできるかと思いますので是非ためしてみてください。

 

賢威7カスタマイズ一覧まとめ記事へ