こんにちは☆ 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の良いところです！
是非試して下さいね！
コメントを残す