ブログ運営

「続きを読む」を「read more」へ簡単カスタマイズする方法を初心者向けに解説【賢威7】

WordPressブログサイトのトップページに表示される記事一覧。記事全文を表示させる「続きを読む」ボタンを「read more」など、海外仕様にするなど「もっとおしゃれにカスタマイズしたい!」と思いますよね。

テンプレートを賢威にしている場合は、非常に簡単にカスタマイズが可能です!

今回は、WordPressで「続きを読む」ボタンを「read more」など自分の好きなデザインへカスタマイズする方法を初心者向けに解説していきます!

【賢威7】WordPressの記事一覧で「続きを読む」を「read more」などおしゃれにカスタマイズする方法を動画で解説!

【賢威7】WordPressの記事一覧で「続きを読む」を「read more」などおしゃれにカスタマイズする方法を文章&画像で解説!

まずは、「続きを読む」の形式から、自分がカスタマイズしたいデザインの画像を決めます。

使用する画像に関しては、photoscapeなどの無料画像作成ツールで1から作成するのもいいですし、既存の商用OKなものでも、ご自身の好みのものを使用していきましょう。

どの画像を使用するかを決めたら、ワードプレスのダッシュボード画面から、該当画像を「メディア」→「新規追加」でアップロードします。

 

アップロードが終わったら、続いてはテーマの編集を行っていきます。

ワードプレスのダッシュボードから「外観」→「テーマの編集」を選択、「cont.php」をクリックします。

 

HTMLコードを編集していきますので、必ずバックアップを取っておきましょう!変更ボタンを押す前に、万が一のことを考えて必ず変更前のコードをメモ帳なのに保存しておいて下さいね。

参考:WordPressテーマ編集でサイトが真っ白に!FTPでもエラーが戻らない時の対処方法

 

バックアップが取れたら、ctrl+Fの検索窓から下記コードを検索します。

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

 

画面下の方でヒットすると思いますので、こちらを削除します。

 

削除した部分に、以下のコードを貼り付けます。

<p class="link-next"><a href="<?php the_permalink() ?>"><img src=“画像URL"></a></p>

 

コード内の「画像URL」の部分は、先ほどアップロードした画像のURLを入力しましょう。

画像のURL確認方法は、「メディア」→「ライブラリ」で該当画像をクリックし、右側に表示される「URL」の部分になります。

参考:画像をメディアにアップロードする方法!画像サイズ設定やURLの確認方法も紹介

 

貼り付けたら、こんな感じになると思います。

 

ここまできたら、画面下の「ファイルを更新」ボタンをクリック。

 

ブログサイトを更新表示させると、「続きを読む」の部分が自分が作成した画像の様に表示されます。

 

「続きを読む」が自分のオリジナルデザインにカスタマイズされるだけでも、かなり印象が変わりますよね!

とても簡単に出来るカスタマイズなので、是非参考にされてみてください^^