長くて詳細な投稿を書いている場合でも または 詳細なFAQセクションを作成している場合でも、読者を圧倒することなく多くの情報を提示するのは難しい場合があります。
このような場合、私たちの定番の解決策は、トグル効果でテキストを表示したり非表示にしたりすることです。このアプローチはスペースを節約し、コンテンツをスキャンしやすくし、読者に表示したいものを制御する権限を与えます。
コンテンツのライトスイッチのようなものです。読者はクリックして詳細を表示したり、もう一度クリックして非表示にしたりできます。
スペースを有効活用するために多くのウェブサイトで利用されており、ユーザーは物事をすっきりと整理できる点を評価しています。
長文コンテンツのテキストを表示・非表示するために、WordPressでトグル効果を使用する簡単な3つの方法をご紹介します。
WordPressの投稿でテキストを表示・非表示にする理由
多くのウェブサイトでは、通常、ティーザーを表示し、その後「続きを読む」または「もっと見る」リンクを含めることで、デフォルトでテキストを非表示にしています。訪問者はそのリンクをクリックすることで詳細情報を取得できます。
これは、ページに多くの情報を追加する必要があるが、テキストの塊が訪問者を圧倒することを心配している場合に便利です。
よくある質問（FAQ）は良い例です。ほとんどの訪問者は単一の質問への回答だけを求めているからです。
すべての回答をすべて表示すると、訪問者は必要な情報を見つけるのに苦労する可能性があります。
トグル効果でテキストを非表示にすることで、訪問者は多くの投稿、機能、メリット、その他の情報をスキャンし、詳細を知りたい項目を選択できます。
さて、WordPressでトグル効果を使ってテキストを表示・非表示する方法を見ていきましょう。
どのトグル方法を使用すべきか？
トグル効果を追加する3つの異なる方法を説明します。
決定に役立つ簡単な比較を以下に示します。
| 方法 | 最適 | 難易度 | プラグインは必要ですか？ |
|---|---|---|---|
| 1. Read More プラグイン | クラシックエディターを好むユーザー | 簡単 | はい |
| 2. SeedProd | カスタムランディングページ＆プロフェッショナルなレイアウト | 中程度 | はい |
| 3. Details ブロック | モダンブロックエディター（標準） | 非常に簡単 | いいえ |
以下のリンクをクリックすると、異なる方法にジャンプできます：
方法1：ショートコードを使用してWordPressでテキストを表示・非表示にする（迅速かつ簡単）
Read More Without Refreshを使用するのが、あらゆるページや投稿に「続きを読む」リンクを追加する最も迅速かつ簡単な方法です。この無料プラグインを使用すると、「続きを読む」リンクをカスタマイズしてから、ショートコードを使用してウェブサイトのどこにでも追加できます。
ショートコードは、特定の機能を実行する角括弧で囲まれた短いコード片です。心配しないでください、これらは非常に使いやすく、簡単なコピー＆ペーストで済みます。
まず、Read More Without Refreshプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
有効化したら、「RMWP設定」をクリックしてプラグインの設定を構成してください。
まず、「続きを読む / 続きを読む」リンクで使用されるテキストは、2つのテキストフィールドに入力することで変更できます。
例えば、FAQを作成する場合、「回答を表示 / 回答を非表示」のようなものを使用したい場合があります。
この画面では、文字色、背景色などを変更することもできます。これにより、WordPressテーマに完全に一致するリンクを作成できます。
フォントの太さを変更したり、境界線を追加したり、パディングを変更したりすることもできます。
このページでの作業が完了したら、何も変更しなかった場合でも、「変更を保存」ボタンをクリックしてください。
これは、'変更を保存'をクリックするとプラグインの設定がWordPressデータベースに初期化されるため重要です。
この手順をスキップすると、プラグインはサイトで正しく機能するために必要な情報を取得できません。
それが完了したら、あらゆるページや投稿にトグル効果を追加できます。非表示にしたいテキストを見つけて、ショートコードで囲む必要があります。
まず、任意のページまたは投稿のGutenbergブロックエディターを開きます。次に、「+ブロックを追加」アイコンをクリックして、非表示にしたいテキストの前にブロックを追加します。
次に、「ショートコード」と入力し始め、表示されたら正しいブロックを選択します。
ショートコードボックスに、次のショートコードを追加します。
[続きを読む]
これは、非表示コンテンツの開始を示すプレースホルダータグです。
プラグインは、設定で作成したカスタムリンクテキスト（例：「回答を表示」や「もっと見る」）で[read more]を自動的に置き換えます。
これが完了したら、非表示にしたいテキストの後にショートコードブロックを追加する必要があります。
テキストの最後に、「+」アイコンをクリックし、上記と同じ手順で別のショートコードブロックを作成します。
このブロックに、次のコードを追加します：[/read]
これで、「更新」または「公開」をクリックしてテキストをライブにすることができます。
次に、WordPressブログにアクセスすると、ショートコードブロックの間にあるテキストがデフォルトで非表示になっていることがわかります。
テキストを表示するには、「続きを読む」またはそれに類するリンクをクリックするだけです。
方法2：SeedProd を使用して WordPress でテキストを表示・非表示にする（FAQに最適）
FAQは、WordPressウェブサイトでテキストを非表示および表示するための最も一般的な形式の1つです。見栄えの良い質疑応答セクションを作成したい場合は、代わりにページビルダープラグインを使用することをお勧めします。
SeedProdは、市場で最高のページビルダーであり、WordPressウェブサイト用のあらゆる種類のカスタムランディングページを作成できます。製品、サービス、ウェビナーなどを宣伝するために使用できるデザインを含む、300以上の既製のサイトテンプレートが付属しています。
これらのデザインはすべて、FAQセクションを追加するのに最適な場所です。当社のパートナーブランドのいくつかは、これを使用して完全なウェブサイトを設計しました。詳細については、SeedProdの完全なレビューをご覧ください。
テンプレートを選択した後、SeedProdには、ワンクリックでページデザインに追加できる、すぐに使えるさまざまなFAQセクションがあります。
これらのFAQセクションの多くには、組み込みのテキスト表示/非表示トグル効果があります。
また、完全にカスタマイズ可能なので、独自の質問と回答のテキストを簡単に追加できます。
SeedProdの使用方法については、WordPressでカスタムページを作成する方法に関するガイドをご覧ください。
ページを作成した後、既製のFAQセクションを追加するのは簡単です。SeedProdのページエディターで、左側のメニューにある「セクション」タブをクリックするだけです。
これで「FAQ」を選択すると、SeedProd のすべての質問と回答セクションが表示されます。デザインをプレビューするには、マウスカーソルを合わせ、小さな虫眼鏡をクリックしてください。
注意:これらの既製のFAQセクションには、SeedProdのProバージョンが必要です。無料バージョンを使用している場合は、見出しブロックとテキストブロックをドラッグアンドドロップして、FAQを手動で自分で構築できます。
使用したいデザインを見つけたら、「このセクションを選択」をクリックします。
SeedProdは、セクションをページの下部に追加します。
FAQセクションは、ドラッグアンドドロップを使用して新しい場所に移動できます。
その後、FAQアコーディオンブロックを選択して、独自のテキストを追加する準備が整います。左側のメニューが更新され、すべての質問のリストが表示されます。
質問と回答のペアを編集するには、左側のメニューでその質問をクリックするだけです。
これにより2つの小さなテキストエディターが開かれ、独自の質問と回答を追加できます。リンクの追加やテキストの太字などの標準的な書式設定オプションもすべて使用できます。
FAQセクションの各質問と回答について、これらの手順を繰り返すだけです。
さらに質問を追加したい場合は、「新規アイテムを追加」ボタンをクリックしてください。
質問と回答のペアを削除するには、左側のメニューでその質問にマウスカーソルを合わせるだけです。
次に、表示されたゴミ箱アイコンをクリックします。
入力した情報に満足したら、「フォントサイズ」と「文字間隔」のスライダーを使用して、テキストの外観を変更できます。
FAQの各質問の横に表示される小さな画像である「アイコン」セクションもあります。
この画像をカスタマイズしたい場合は、クリックして「アイコン」セクションを展開してください。
ここでは、アイコンの配置と色を変更する設定が表示されます。「閉じたアイコン」は、質問が折りたたまれたときにデフォルトで表示される画像であることに注意してください。
「開いたアイコン」は、質問が展開されたときに表示される画像です。
完全に異なるアイコンを使用したい場合は、「閉じたアイコン」または「開いたアイコン」のプレビューにマウスカーソルを合わせます。
次に、「アイコンライブラリ」サムネイルをクリックします。
これにより、SeedProdの組み込みライブラリが開かれ、1400以上のFont Awesomeアイコンフォントから選択できます。
「高度」タブを選択することで、FAQセクションの外観をさらにカスタマイズできます。ここでは、フォントを変更したり、余白と間隔を追加したり、CSSアニメーションを追加してFAQを際立たせたりできます。
これで、SeedProdページに新しいブロックを追加し、コンテンツをカスタマイズし続けることができます。
見栄えに満足したら、「保存」ボタンの横にある矢印をクリックし、「公開」を選択してください。
これで、ウェブサイトにアクセスすると、ページのデザインとFAQセクションがライブで表示されます。
代替案：Heroic FAQs プラグインを使用する
SeedProdの代替を探している場合は、Heroic FAQsプラグインを使用してテキストを表示および非表示することもできます。
Heroic FAQsは、WordPress向けの最高のFAQ管理プラグインです。ドラッグ＆ドロップインターフェースにより、FAQグループに質問と回答を簡単に追加できます。
次に、簡単なWordPressブロックを使用して、ウェブサイトのどこにでもFAQを表示できます。
プラグインは複数のFAQスタイルを提供しており、アコーディオンまたはトグル形式で質問と回答を表示したり非表示にしたりできます。
詳細については、WordPressでFAQセクションを追加する方法に関するガイドと、おすすめのWordPress FAQプラグインのリストをご覧ください。
方法3：WordPressの詳細ブロック（プラグインなし）でテキストを表示・非表示する
プラグインやショートコードを使いたくない場合は、WordPressに組み込まれているDetailsブロックを使用してテキストを表示したり非表示にしたりできます。この機能はFAQにも最適です。
このブロックを使用するには、ページまたは投稿のGutenbergエディターを開くだけです。次に、インターフェイスのどこかで「+ブロックを追加」ボタンをクリックして、詳細ブロックを見つけます。
下向き矢印の横のスペースに、よくある質問を書き込むことができます。
下部で、その質問への回答を入力できます。
ブロック設定サイドバーで、必要に応じて回答をデフォルトで開くように選択できます。
完了したら、ウェブサイトをプレビューしてください。次に、「更新」または「公開」をクリックします。
同じ詳細ブロックを他のページで使用したい場合は、同期されたパターンに変換できます。
最も良い点は、同期されたパターンを編集すると、サイト上のどこでも自動的に更新されることです。これにより、各項目を手動で変更する必要がなくなるため、時間を節約できます。
ページの残りの部分に合わせて見栄えを良くするために、ブロックの高さと幅を変更することもできます。
よくある質問：WordPressのトグル効果
WordPressでトグル効果を使用する際によく寄せられる質問をいくつかご紹介します。
WordPressにおけるトグル効果とは何ですか？
トグル効果は、アコーディオンとしても知られ、コンテンツを表示および非表示できるユーザーインターフェイス要素です。
訪問者は、セクションを展開してテキストを表示するために、見出しまたは「続きを読む」リンクをクリックします。これにより、ページが整理され、散らかりにくくなります。
トグルでコンテンツを非表示にすることは、ウェブサイトのSEOに影響しますか？
一般的には、いいえ。ユーザーエクスペリエンスのために行われている限り、Googleは非表示のコンテンツをクロールしてインデックスに登録できます。ただし、ユーザーに関連性のないキーワードを詰め込むためにこの機能を使用することは避けてください。検索エンジンはこれをスパム行為と見なす可能性があります。
トグル効果を追加するのに最適な方法はどれですか？
シンプルで一度きりのトグルには、プラグインが不要なため、WordPressの組み込みの「詳細」ブロックが最も簡単なオプションです。
完全なFAQセクションを作成する場合や、よりデザインを細かく制御したい場合は、SeedProdのようなページビルダーが、より多くのスタイリングオプションと機能を提供します。
「続きを読む」のテキストをカスタマイズできますか？
はい、このガイドで言及されているRead More Without Refreshプラグインのようなトグル効果を追加するほとんどのプラグインでは、リンクテキストをカスタマイズできます。
「回答を表示」、「詳細を表示」、またはコンテキストに合ったその他の任意のテキストに変更できます。
この記事が、WordPressの投稿でトグル効果を使用してテキストを表示および非表示する方法を学ぶのに役立ったことを願っています。また、おすすめのWordPress用Gutenbergブロックプラグインのリストと、WordPressで折りたたみ可能なサイドバーメニューを作成する方法に関するガイドも確認することをお勧めします。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
Mrteesurez
この機能は気に入っており、ウェブサイトで使用する方法を探していました。ショートコードを使用する方法は、投稿でもページでも、あらゆるコンテンツページで使用でき、さらに「続きを読む」テキストをカスタマイズできるため気に入っています。長い投稿も公開しやすくなり、一部を「続きを読む」テキストの後ろに隠すことができます。ありがとうございます。
アルビン
Read More Without Refreshプラグインは、非表示テキストにdisplay: none;を使用しています。これは非表示コンテンツと見なされ、SEOに悪影響を与えませんか？
WPBeginnerサポート
クリック時に表示されるようにコンテンツが設定されているため、そうなるはずはありません。display:none を使用すると、そのコンテンツを表示する予定がない場合に通常は悪影響があり、キーワードの詰め込みと見なされる可能性があります。
管理者
Mrteesurez
プラグインを初めて使用したとき、私も同じ懸念を抱いていました。display: none; を使用するとコンテンツはユーザーから非表示になりますが、隠されたコンテンツが「続きを読む」セクションのようにユーザーエクスペリエンスを向上させることを目的としている場合、SEOにとっては通常問題ないと思います。このプラグインを、SEOへの悪影響に気づかずに使用してきました。隠されたコンテンツが、良い理由でコンテンツが隠されていることを検索エンジンが認識できるほど関連性があり価値があることを確認してください。
ンウォス・エマニュエル
ご協力ありがとうございます
WPBeginnerサポート
お役に立てて嬉しいです！
管理者
カリマ
ありがとう！WordPressの新バージョンでどのように適用できますか？古いバージョンでは、ビジュアルとテキストを切り替えることができました。新しいバージョンでは、どこにコードを記述しますか？
WPBeginnerサポート
このショートコードでクラシックエディターと同様の体験をしたい場合は、クラシックブロックを使用できます。
管理者
エセオグヘネ・アヤ
テキストの下部に「表示を減らす」を表示するにはどうすればよいですか？
WPBeginnerサポート
プラグインの表示については、現在利用可能なカスタマイズについてプラグインのサポートに問い合わせる必要があります。
管理者
ジョン・ルアーク
テキストの下部に「表示を減らす」を表示するにはどうすればよいですか？
WPBeginnerサポート
現時点でサポートされているかどうか、プラグインのサポートに問い合わせたいと思います
管理者
ディカド
しかし、プラグインなしでできますか？
WPBeginnerサポート
プラグインなしでも可能ですが、プラグインなしでこれを行うための初心者向けの簡単な方法はありません。
管理者
シュタインヘン
シンプルで使いやすいプラグインです！添付ファイルセクション（長文の印刷物で多くの段落がある）を非表示にするのに役立ちます。
しかし、注釈テキストを編集可能かどうか疑問に思っています。例えば、「プレスリリースを非表示（123語削減）」ではなく、非表示にしたタイトルを反映させることはできますか？
添付ファイル A1 を表示: …
添付ファイル A1 を非表示: …
WPBeginnerサポート
You can change that by editing the more_text in the second shortcode example we show
管理者
アナスタシア
本当にありがとうございます！動作しており、私の生活を楽にしてくれています！)
オシタ・ソロモン
この素晴らしい投稿をありがとうございます。しかし、「もっと見る」トグルの下にポップアンダーリンクを埋め込むことは可能でしょうか？
ありがとう
ランジャン
このプラグインは、静的ページ上の複数の段落で使用できますか？単一のコードで情報を表示/非表示するために使用したいのですが。もしそうなら、「タイプ」は何になりますか？
1つのコードで試しましたが、段落の書式設定はできませんでした。
「もっと見る」をクリックすると、テキストが連続して表示されます。
ありがとうございます！
アネット
「ショートコードをこのように追加しました」とはどういう意味ですか？ ホバーしますか？ 右クリックしますか？ それとも入力しますか？ ショートコードを入力すると、ページに文字がそのまま表示されてしまいます。教えてください!!
ロバート
そのプラグインは私のウェブサイトで電話番号を隠すのに良いですか？サイトの最後の4桁を隠したいです。そして、人々が私の番号を見たいときは、最後の4桁を表示するために番号をクリックする必要があります。一部の人がプログラムで私の電話を使用し、他の人に与えるため、私はこれを行いたくありません。誰かが良いプラグインを知っていれば、非常に助かります。ありがとう。
シャズ
ありがとう、2017年でも動作します
ファイサル・マイソ
本当にありがとうございます。このプラグインを私のウェブサイトに適用しました。本当に便利です。もう一度ありがとうございます。
ダット
こんにちは、「もっと表示」と「もっと隠す」という言葉をページの中央に表示したいのですが、どうすればいいですか？
ジェシカ
あるコンテンツが表示されているときに、別のコンテンツを非表示にする方法はありますか？
ヴィレナ
I followed the instructions but seems like Wordpress doesn’t allow the code to work on free themes.
Is there any other way how this can be made?
エド
ネストされた要素も表示/非表示できますか？
マイク
下書きモードでは機能しないようです（公開前に調整する必要があります）。テキストエディターとビジュアルエディターの両方にショートコードを貼り付けましたが、プレビューするとショートコードが表示され、何も隠されていません。これは正常ですか？
ミラン
こんにちは。
列に同じ長さでないテキストがあり、グリッドが乱れています。テキストの2番目の部分、つまり余分な部分を非表示にし、最初の部分と連続して表示できるプラグインが必要です。
何をお勧めしますか？
サヴ
「もっと表示」「もっと隠す」のテキストをカスタムボタン画像に置き換える方法も知りたいのですが、可能でしょうか？
フェデリカ
こんにちは、
これは素晴らしいプラグインのようですね。
タイトルをクリックしてフロントページの投稿をトグルするために、それを使用する可能性はありますか？
それでもできない場合、それを可能にするプラグインやコードはありますか？
よろしくお願いいたします。 Federica
デビッド・カランダー
表示/非表示テキストを中央揃えにしようとしていますが、ウェブページでは左揃えになっています。多くのHTMLタグを試しましたが、効果がありませんでした。
ありがとう、
ジャニー・S
こんにちは。
この短いビデオを共有していただき、誠にありがとうございます。確かにインストールは非常に簡単でした。あなたのビデオでは、リンクはすべて左揃えになっています。プラグインの作成者が書いたプラグインの説明に従って試しましたが、うまくいきません。常に中央に表示されます。
この問題について、どうか助けていただけますか？
本当にありがとうございます！
ウマル・サッジャド
1ページで複数回「表示/非表示」を使用したいです。
ラクシュマン
編集者様、「もっと表示するテキスト」を「ボタン」というテキストに変更したいのですが、どうすればよいか説明していただけますか、またはコードを提供していただけますか……。
ラクシュマン
編集者様、「テキスト」をボタン付きのテキストに変更したいのですが、どうすればよいですか？説明またはコードを提供してください。
ダナ
ページに複数の表示/非表示機能を見たい場合はどうすればよいですか？トグルではうまくいかないようです！
ポール
タグに連番を追加するだけです。
イエ
[showhide type="post1" more_text="もっと表示…" less_text="隠す…"] 非表示にしたいテキスト [/showhide]
[showhide type="post2" more_text="もっと見る…" less_text="隠す…"]
隠したいテキスト
[/showhide]
など
ウマル・サッジャド
こんにちは、ポールさん。
Type = 'post1', post2, post3 を使用していますが、私の場合は機能しません。
ランディ・ウタマ
こんにちは、
このプラグインはレスポンシブまたはモバイルテーマをサポートしていますか？
ありがとう
モハンマド・カイザー
コンテンツのトグル表示はSEOに影響しますか？Googleボットはトグル表示されたコンテンツも分析できますか？
WPBeginnerサポート
はい、Googleボットはトグルされたコンテンツとトグルされていないコンテンツの両方を読み取ることができます。
管理者
バヌ
ありがとう、でもよく理解できませんでした。トグルコンテンツはGoogleにインデックスされますか、それともGoogleはトグルされたコンテンツを無視しますか？
WPBeginnerサポート
はい、Googleでインデックスされています。
グラント
読者の希望に応じて、すべての引用/参考文献を表示または非表示にしたいと考えています。脚注の有無で記事を重複させたくありません。単一のコントロールで、すべてのコンテンツの表示/非表示を切り替える方法はありますか？
イブン・カシーム
こんにちは
投稿ありがとうございます。
このプラグインを使用して、ユーザーがトグルをクリックすると投稿全体が表示され、再度閉じることができる、投稿タイトルのみを表示するアーカイブページを作成することは可能ですか？
または、より良い方法があれば教えていただけますか？
WPBeginnerサポート
このプラグインは、そのための最善の方法ではありません。子テーマのarchives.phpテンプレートを編集し、<?php the_content() ?> または <?php the_excerpt() ?> テンプレートタグの前にトグル効果を追加する必要があります。
管理者
イレブン・ユー
それは良いプラグインです！
しかし、新しい機能が必要です。それは、ダウンロードリンクのような一部のコンテンツを非表示にすることです。コメントした後にのみリンクが表示されます。
インポートを手伝っていただけますか？
ありがとうございます。
グレース
これは気に入っていますが、コメントセクションを切り替えることができるか、または変更できるか知っていますか？すべてのコメントを表示するのではなく、ユーザーがさまざまなコメントを非表示にしたり表示したりできるようにしたいです。
事前に感謝いたします
WPBeginnerサポート
いいえ、現時点ではそのプラグインはそれをサポートしていません。
管理者
アンパテル
ナイスプラグインですが、複数の「続きを読む」/「もっと少なく」は可能ですか？
ありがとう
マーク・コロジェイ
私もこれを知りたいです。
WPBeginnerサポート
jQuery FAQアコーディオンのチュートリアルをご覧ください。FAQの部分は無視して、任意のテキストに同じjQueryを実装できます。
管理者
ジャンプリンガー
ページに複数の「表示/非表示」を配置したいのですが。jQuery FAQ AccordianリンクにあるjQueryの実装方法が明確ではありません。WP FAQセクションは必要ないと言っているのだと思いますが、それは正しいですか？
「my-accordian」フォルダをpluginsディレクトリにアップロードしたとき、WPは「WPBeginner’s FAQ Accordion」プラグインを認識しました。
WP FAQを使用せずにページで複数の「表示/非表示」を有効にするには、もう少し詳しく教えていただけますか？ どうもありがとうございます。
アマンダ・メイズ
このプラグインを静的ページの段落で使用することは可能ですか？プライバシーポリシーの一部を表示/非表示するために使用したいのですが。もし可能であれば、「タイプ」は何になりますか？
ありがとうございます！
ニコ
とても便利です！自分でやり方を学ぶ手間が省けました =) はは
ありがとうございます！
ベラの棚
素晴らしい情報を提供してくださるこのサイトに感謝します！私はホスト型WordPress初心者で、「WordPressにGoogleアナリティクスをインストールする」といったことをGoogle検索するたびに、必ずあなたのサイトにたどり着いて答えを見つけています。今夜までそれに気づいていませんでした！
私たちのようなWordPress初心者やベテランの方々を助けてくださり、ありがとうございます！
クローレンス
「もっと表示…」というテキストの場所に画像を追加することは可能ですか？そうすれば、画像をクリックして、一般的な文ではなく、テキストの表示/非表示を切り替えることができますか？
編集スタッフ
プラグインをカスタマイズすれば、おそらくそれが可能になります。
管理者
アダム・ケレット
これはどのように行われますか？試しましたがうまくいきませんでした：
[showhide type=”…” more_text=”” less_text=”” hidden=”yes”]
このカスタマイズは複雑ですか？
fukr
これは本当に役立つと思います..ありがとう