ブログ記事に「続きを読む」を設置できる「Read More Without Refresh」の使い方

ネットでいろんなブログを読んでいて
記事内に「続きを読む」というボタンを見かけることありませんか。
読んできた文章の続きが折りたたまれていてスッキリしますよね。
また、興味のない箇所だと下へのスクロールが早くなります。
でもどうやって文章を折りたたんでいるのかわからない、、、
そこで簡単にテキストを折りたたんで非表示にできる
プラグイン「Read More Without Refresh」の紹介です。
もちろん、何度でも開閉自由ですよ。
ここでは画像付きで設定、使い方を説明してるので参考にしてみてください。

Read More Without Refreshとは

WordPressで作成したブログ記事内で
指定したテキストを折りたたんで「続きを読む」ボタンを設置するプラグインです。
使い方はとてもシンプルで
ショートコードで折りたたみたいテキストを挟むだけで設置できます。
また、設定で「続きを読む」の文字や色なども変更できるようになっています。

プラグイン「Read More Without Refresh」のインストール

それでは始めていきましょう。
WordPressにログインしたら
ダッシュボードから「プラグイン」→「新規追加」へとクリックします。

プラグインを追加のページが表示されたら
キーワード検索欄に「Read More Without Refresh」と入力しましょう。
検索結果は、自動で反映されます。

Read More Without Refreshを見付けたら
「今すぐインストール」をクリックします。
＊下の方や右側、または違うページにある場合があります。

インストールが終わると「有効化」をクリックしましょう。

有効化すると自動でインストール済みプラグインのページに移動します。
もし、WordPressバージョンの違いで移動しない場合は
自分で「プラグイン」→「インストール済みプラグイン」に移動しましょう。

これでRead More Without Refreshのインストールは終わりです。

「続きを読む」ボタンの初期設定

ここでは「続きを読む」で文章を折りたたむための
続きを読むの文字変更や色などを設定していきます。
簡単なのですぐに使えるようになりますよ。

では、管理メニューから「RMWR Settings」をクリックしましょう。

Read More Without Refresh Settingsのページが開くので
上から順番に設定していきましょう。
各項目の説明は画像の下にあるので参考にしてみてください。

Read more text：　折りたたんでいる文章を開くボタンのテキストになります。
　　　　　　　　　 ここでは「続きを読む」にしています。

Read less text：　開いた状態を折りたたむボタンのテキストになります。
　　　　　　　　　 ここは「折りたたむ」にしています。

Background color：　ボタンの背景色を指定します。
　　　　　　　　　　 ここは「白」にしています。

Text color：　ボタンのテキストの色を指定します。
　　　　　　　ここは「ダークオレンジ」にしました。

Text hover color：　マウスが当たった際のボタンのテキストの色を指定します。
　　　　　　　　　　ここは「ディープダークオレンジ」にしました。

Border bottom color：　ボタンのテキストの色を指定します。
　　　　　　　　　　　　ここは「ダークオレンジ」にしました。

Font weight：　フォントの太さを選びます。
　　　　　　　　ここは「normal」のままにしています。

Border bottom：　下線の幅を指定します。
　　　　　　　　　ここは「1px」のままにしています。

Padding：　パディング領域を指定します。
　　　　　　ここは「0px」のままにしています。

最後に「変更を保存」をクリックしましょう。

これで初期設定は終わりです。

投稿に「続きを読む」を設置

ここでは実際に投稿を使って「続きを読む」を設置していきます。

管理メニューから「投稿」→「新規追加」で
通常の投稿記事作成ページに移動しましょう。

投稿作成ページが開いたら適当にタイトルを入力します。

ショートコードを貼り付けるので
ここではクラッシックモードを表示させます。

クラシックモードにある
「表示」→「ソースコード」をクリックしましょう。

ソースコードが開いたら
ショートコードを貼り付けましょう。

ショートコード
　　↓↓↓
[read more] 折りたたみたい文章を入れる [/read]

そして「OK」をクリックします。

このように本文スペースにショートコードが入ったらOKですよ。

それではどのように表示されるのか
「プレビュー」から確認していきましょう。

するとこのようになります。
画像では開閉がわかりにくいので動画を再生して確認してみてください。

これでRead More Without Refreshの紹介は終わりです。

投稿で使える便利なプラグインは他にもいろいろありますよ。
タイトルで改行を使えるようにするものや
ブログ記事のおよその読了時間を表示するもの
伏字が使えるようになるもの
漢字のふりがなを付けるものもあります。
また、英単語や英文章の読み上げや
投稿の後部に署名画像を表示するものまでありますよ。
興味のある方はここより参考にしてみてください。

ブログ記事のタイトルで改行が使える「Page Title Splitter」の使い方

ブログ記事を作成していてタイトルが2行にできなくて 困ったことないですか？ そこで好きな箇所で改行して2行にできる プラグイン「Page Title Splitter」の紹介です。 画像付きで設定、使い方を説明してるので参考にしてみて下さい。

takuweb1.com

ブログ記事におよその読了時間を自動表示「Post Read Time」の使い方

ネットサーフィンでいろんなブログを読んでいると 中には記事を読む時間が書かれていて便利に感じませんか。 そこで自動で記事上部に読了時間を表示する プラグイン「Post Read Time」の紹介です。 画像付きで設定、使い方を説明してるので参考にしてみて下さい。

takuweb1.com

暗記練習のように単語・文章を伏字にできる「Memorizer」の使い方

ブログ記事でテストの答えのようにクリックで表示できる 伏字機能を使ってみませんか。 そこでプラグインMemorizerの紹介です。 暗記練習に使ったりしてもいいですね。 ここでは画像付きで使い方を説明してるので参考にしてみてください。

takuweb1.com

WordPressの文章で読み仮名(ふりがな)を付ける「WP-Yomigana」の使い方

ブログ記事でふりがな・読み仮名を付けるのにルビで囲んで面倒ですよね。 そこでルビボタンから入力ができる プラグイン「WP-Yomigana」の紹介です。設定も簡単で使いやすい！ 画像付きで設定、使い方を説明してるので参考にしてみて下さい。

takuweb1.com

ブログ記事で英単語を読み上げできる「Say It!」の使い方

ブログで英語学習・レッスン記事を作成する場合、 英単語や英文を読み上げできるようにすると便利ですよ。 そこで指定した英文を読み上げる プラグイン「Say It!」の紹介です。 6カ国語対応! 画像付きで設定、使い方を説明してるので参考にしてみて下さい。

takuweb1.com

ブログ記事の後部にサインを表示「danixland author signature」の使い方

ブログでプロフィールとは別に 各記事にサインがあるといいと思いませんか。 そこで投稿後部に署名画像を表示できる プラグイン「danixland author signature」の紹介です。 画像付きで設定、使い方を説明してるので参考にしてみて下さい。

takuweb1.com

まとめ

記事内で長い文章を折りたためることができるプラグインでした。
一見、長文に利用すると考えがちですが
「続きを読む」という名前が変更できることから
問題の回答として使うことができますよ。
また、これをいくつも並べることによって
Q&Aページにも利用できますね。
一度プレビューで試してみてはどうでしょうか。