こんにちは☆ Rimです(^^)
今回は賢威7のデフォルトである【続きを読む】を変更する方法を書きます。
ホーム画面では最新の記事がずらりと並び、タイトルと冒頭部分が2行ほどあって、その後は【続きを読む】となります。
記事の続きを読みたい時は【続きを読む】というボタンをクリックしますが、いろんなブログを見ていると【read more】とか、おしゃれなボタンに変更されているものを見かけます。
やってみましょう！！
調べてみると、意外と簡単にできたのでやり方をまとめたいと思います(^^)
さて、その【read more】ですが、私のブログだと下の赤枠の部分にあたります⇩
賢威7のデフォルトでは下記のようになっていました。
＞ 続きを読む
ではこれを自分の好きな言葉、デザインにカスタマイズしていきましょう。
画像の作成
まず、変更したい好きな画像を作成します。
パソコンに内蔵されているソフトを使って画像を作成して下さい。
サイズで悩むと思いますが、私の場合294×104でした。
・・・今更だけど、中途半端だな 笑
画像をWordPressに取り込む
さきほど作成した画像をワードプレスに取り込みます。
■【ダッシュボード】⇒【メディア】⇒【新規追加】
■作った画像をドラッグ&ドロップ。または、ファイル選択で画像を指定してもどちらでも大丈夫です。
■【ダッシュボード】の中の【メディア】をクリックすると、【メディアライブラリ】が表示され、指定した画像をクリックするとURLが表示されているはずです。
このURLは後に使いますが、今は確認するだけで大丈夫です(^^)
【続きを読む】を好きな画像に変更
これからはCSSをいじっていくので、少し慎重に取り掛かりましょう！
まずは【続きを読む】の前の【＞】を削除
まず、＞ 続きを読むの前についている ＞ このマークを削除していきますが、あってもOKな方は次の項目まで飛ばして下さいね(^^)
■【ダッシュボード】⇒【外観】⇒【テーマ編集】⇒【base.css】
すると難しそうな英語やら数字が羅列していますね。
この中から下記の一文を探し削除します⏬
background: url(./images/icon/icon-arw-next.png) left 6px no-repeat;
◆簡単に探す方法◆
キーボードのCtrlキーを押しながらFキーを押すと、画面に検索窓が出てきます。そこに検索したい言葉を入力すると探してくれますよ☆
スペースが抜けただけでもHITしないのでコピーして貼るといいですね(^^)
作った画像を挿入
続いて、作っておいた画像を挿入していきます。
まず、メモ帳などに下のコードをコピーし貼り付けて下さい。
<p class=”link-next”><a href=”<?php the_permalink() ?>”><img src=”コピーした画像のURL“></a></p>
そして【コピーした画像のURL】の部分を最初に作った画像のURLに入れ替えます。
最初に作った画像の保存先⏬
■【メディア】⇒【ライブラリ】の中にありますよ☆
そして【コピーした画像のURL】に入れ替えたコード全てをコピーし貼り付けます。
こんな風に、自分のブログのURLが挿入されていますか？
<p class=”link-next”><a href=”<?php the_permalink() ?>”><img src=”https://rim-syuhu.com/wp-content/uploads/2017/10/無題.png“></a></p>
そしてこのコードを全て全コピーします。
貼り付ける先⏬
■【ダッシュボード】⇒【外観】⇒【テーマの編集】⇒【cont.php】
その中から下記のコードを探して削除します⏬
<p class=”link-next”><a href=”<?php the_permalink() ?>”><?php _e(‘see more’, ‘keni’); ?></a></p>
削除した場所にコピーしておいたコードを貼り付けます。
最後に【ファイルを更新】をクリックすることをお忘れなく！
【続きを読む】を好きな言葉に変更する方法は、以上となります(^^)☆
自分の好みに合わせて変更出来るのがWordPressの良いところです！
是非試して下さいね！
ただ今ブログ運営者を対象に、アクセスアップ・収益アップの無料ブログ添削を実施しています！
Rimのコンサルに興味がある方はコチラから↓
17年間ゼロ円の主婦が、月収40万円を達成するようになったのは、たった1通のメルマガ登録からでした。
無料メルマガには、ネットビジネス初心者の方に向けて、専業主婦だった私がブログで稼げるようになるまでを公開しています！
7日間の無料メール講座の登録はこちらをCLICK ↓
コメントを残す