長くて詳細な投稿を書いている場合でも または 詳細なFAQセクションを作成している場合でも、読者を圧倒することなく多くの情報を提示するのは難しい場合があります。
このような場合、私たちの定番の解決策は、トグル効果でテキストを表示したり非表示にしたりすることです。このアプローチはスペースを節約し、コンテンツをスキャンしやすくし、読者に表示したいものを制御する権限を与えます。
コンテンツのライトスイッチのようなものです。読者はクリックして詳細を表示したり、もう一度クリックして非表示にしたりできます。
スペースを有効活用するために多くのウェブサイトで利用されており、ユーザーは物事をすっきりと整理できる点を評価しています。
長文コンテンツのテキストを表示・非表示するために、WordPressでトグル効果を使用する簡単な3つの方法をご紹介します。
WordPressの投稿でテキストを表示・非表示にする理由
多くのウェブサイトでは、通常、ティーザーを表示し、その後「続きを読む」または「もっと見る」リンクを含めることで、デフォルトでテキストを非表示にしています。訪問者はそのリンクをクリックすることで詳細情報を取得できます。
これは、ページに多くの情報を追加する必要があるが、テキストの塊が訪問者を圧倒することを心配している場合に便利です。
よくある質問（FAQ）は良い例です。ほとんどの訪問者は単一の質問への回答だけを求めているからです。
すべての回答をすべて表示すると、訪問者は必要な情報を見つけるのに苦労する可能性があります。
トグル効果でテキストを非表示にすることで、訪問者は多くの投稿、機能、メリット、その他の情報をスキャンし、詳細を知りたい項目を選択できます。
それを踏まえて、トグル効果でWordPressのテキストを表示および非表示にする方法を見てみましょう。使用したい方法にジャンプするには、以下のクイックリンクを使用してください。
- 方法1：ショートコードを使用してWordPressでテキストを表示・非表示にする（迅速かつ簡単）
- Method 2: Show and Hide Text in WordPress Using SeedProd (Best For FAQs)
- Method 3: Show and Hide Text With WordPress Details Block (No Plugin)
- よくある質問：WordPressのトグル効果
方法1：ショートコードを使用してWordPressでテキストを表示・非表示にする（迅速かつ簡単）
任意のページまたは投稿に「続きを読む」リンクを追加する最も迅速かつ簡単な方法は、Read More Without Refreshを使用することです。この無料プラグインを使用すると、「続きを読む」リンクをカスタマイズし、ショートコードを使用してウェブサイトのどこにでも追加できます。
ショートコードは、特定の機能を実行する角括弧で囲まれた短いコード片です。心配しないでください、これらは非常に使いやすく、簡単なコピー＆ペーストで済みます。
まず、Read More Without Refresh プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。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 のすべての質問と回答セクションが表示されます。デザインをプレビューするには、マウスカーソルを合わせ、小さな虫眼鏡をクリックしてください。
使用したいデザインを見つけたら、「このセクションを選択」をクリックします。
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エディターを開くだけです。次に、インターフェイスのどこかで「+ブロックを追加」ボタンをクリックして、詳細ブロックを見つけます。
下向き矢印の横のスペースに、よくある質問を書き込むことができます。
下部で、その質問への回答を入力できます。
ブロック設定サイドバーで、必要に応じて回答をデフォルトで開くように選択できます。
完了したら、ウェブサイトをプレビューしてください。次に、「更新」または「公開」をクリックします。
他のページや投稿で同じ内容のDetailsブロックを同じように使用したい場合は、このブロックを再利用可能なブロックまたはブロックパターンに変換できます。
再利用可能なブロックを編集すると、サイトのどこでも自動的に更新されるのが最も優れている点です。これにより、各ブロックを手動で変更する必要がなくなるため、多くの時間を節約できます。
ブロックの高さと幅を変更して、ページの他の部分とより良く調和させることも検討してください。
どのトグル方法を使用すべきか？
トグル効果を追加する3つの異なる方法を説明しました。最適な方法はニーズによって異なります。以下に推奨事項を示します。
- どこでも機能する、迅速で簡単なソリューションとして、方法1（ショートコード）は、「続きを読む」リンクの後ろにテキストを非表示にする最も簡単な方法です。
- プロフェッショナルな見た目でカスタマイズ可能なFAQセクションを作成するには、Method 2 (SeedProd) が最良の選択肢です。コードなしでデザインを完全に制御できます。
- プラグインを避けたい場合、または単一の投稿またはページに基本的なトグルが必要な場合は、方法3（詳細ブロック）が最適な組み込みオプションです。
よくある質問：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への悪影響に気づかずに使用してきました。隠されたコンテンツが、良い理由でコンテンツが隠されていることを検索エンジンが認識できるほど関連性があり価値があることを確認してください。
Nwosu Emmanuel
ご協力ありがとうございます
WPBeginnerサポート
お役に立てて嬉しいです！
管理者
Karima
ありがとう！WordPressの新バージョンでどのように適用できますか？古いバージョンでは、ビジュアルとテキストを切り替えることができました。新しいバージョンでは、どこにコードを記述しますか？
WPBeginnerサポート
このショートコードでクラシックエディターと同様の体験をしたい場合は、クラシックブロックを使用できます。
管理者
エセオグヘネ・アヤ
テキストの下部に「表示を減らす」を表示するにはどうすればよいですか？
WPBeginnerサポート
プラグインの表示については、現在利用可能なカスタマイズについてプラグインのサポートに問い合わせる必要があります。
管理者
john ruark
テキストの下部に「表示を減らす」を表示するにはどうすればよいですか？
WPBeginnerサポート
現時点でサポートされているかどうか、プラグインのサポートに問い合わせたいと思います
管理者
Dicado
しかし、プラグインなしでできますか？
WPBeginnerサポート
プラグインなしでも可能ですが、プラグインなしでこれを行うための初心者向けの簡単な方法はありません。
管理者
シュタインヘン
シンプルで使いやすいプラグインです！添付ファイルセクション（長文の印刷物で多くの段落がある）を非表示にするのに役立ちます。
しかし、注釈テキストを編集可能かどうか疑問に思っています。例えば、「プレスリリースを非表示（123語削減）」ではなく、非表示にしたタイトルを反映させることはできますか？
添付ファイル A1 を表示: …
添付ファイル A1 を非表示: …
WPBeginnerサポート
You can change that by editing the more_text in the second shortcode example we show
管理者
アナスタシア
本当にありがとうございます！動作しており、私の生活を楽にしてくれています！)
オシタ・ソロモン
この素晴らしい投稿をありがとうございます。しかし、「もっと見る」トグルの下にポップアンダーリンクを埋め込むことは可能でしょうか？
ありがとう
Ranjan
このプラグインは、静的ページ上の複数の段落で使用できますか？単一のコードで情報を表示/非表示するために使用したいのですが。もしそうなら、「タイプ」は何になりますか？
1つのコードで試しましたが、段落の書式設定はできませんでした。
「もっと見る」をクリックすると、テキストが連続して表示されます。
ありがとうございます！
Annette
「ショートコードをこのように追加しました」とはどういう意味ですか？ ホバーしますか？ 右クリックしますか？ それとも入力しますか？ ショートコードを入力すると、ページに文字がそのまま表示されてしまいます。教えてください!!
ロバート
そのプラグインは私のウェブサイトで電話番号を隠すのに良いですか？サイトの最後の4桁を隠したいです。そして、人々が私の番号を見たいときは、最後の4桁を表示するために番号をクリックする必要があります。一部の人がプログラムで私の電話を使用し、他の人に与えるため、私はこれを行いたくありません。誰かが良いプラグインを知っていれば、非常に助かります。ありがとう。
shaz
ありがとう、2017年でも動作します
ファイサル・マイソ
本当にありがとうございます。このプラグインを私のウェブサイトに適用しました。本当に便利です。もう一度ありがとうございます。
Dat
こんにちは、「もっと表示」と「もっと隠す」という言葉をページの中央に表示したいのですが、どうすればいいですか？
ジェシカ
あるコンテンツが表示されているときに、別のコンテンツを非表示にする方法はありますか？
Virena
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?
Ed
ネストされた要素も表示/非表示できますか？
mike
下書きモードでは機能しないようです（公開前に調整する必要があります）。テキストエディターとビジュアルエディターの両方にショートコードを貼り付けましたが、プレビューするとショートコードが表示され、何も隠されていません。これは正常ですか？
ミラン
こんにちは。
列に同じ長さでないテキストがあり、グリッドが乱れています。テキストの2番目の部分、つまり余分な部分を非表示にし、最初の部分と連続して表示できるプラグインが必要です。
何をお勧めしますか？
Sav
「もっと表示」「もっと隠す」のテキストをカスタムボタン画像に置き換える方法も知りたいのですが、可能でしょうか？
Federica
Hello,
これは素晴らしいプラグインのようですね。
タイトルをクリックしてフロントページの投稿をトグルするために、それを使用する可能性はありますか？
それでもできない場合、それを可能にするプラグインやコードはありますか？
よろしくお願いいたします。 Federica
デビッド・カランダー
表示/非表示テキストを中央揃えにしようとしていますが、ウェブページでは左揃えになっています。多くのHTMLタグを試しましたが、効果がありませんでした。
ありがとう、
Janie S.
こんにちは。
この短いビデオを共有していただき、誠にありがとうございます。確かにインストールは非常に簡単でした。あなたのビデオでは、リンクはすべて左揃えになっています。プラグインの作成者が書いたプラグインの説明に従って試しましたが、うまくいきません。常に中央に表示されます。
この問題について、どうか助けていただけますか？
本当にありがとうございます！
Umar sajjad
1ページで複数回「表示/非表示」を使用したいです。
ラクシュマン
編集者様、「もっと表示するテキスト」を「ボタン」というテキストに変更したいのですが、どうすればよいか説明していただけますか、またはコードを提供していただけますか……。
ラクシュマン
編集者様、「テキスト」をボタン付きのテキストに変更したいのですが、どうすればよいですか？説明またはコードを提供してください。
ダナ
ページに複数の表示/非表示機能を見たい場合はどうすればよいですか？トグルではうまくいかないようです！
ポール
タグに連番を追加するだけです。
ie
[showhide type="post1" more_text="もっと表示…" less_text="隠す…"] 非表示にしたいテキスト [/showhide]
[showhide type="post2" more_text="もっと見る…" less_text="隠す…"]
隠したいテキスト
[/showhide]
など
Umar sajjad
こんにちは、ポールさん。
Type = 'post1', post2, post3 を使用していますが、私の場合は機能しません。
ランディ・ウタマ
Hello,
このプラグインはレスポンシブまたはモバイルテーマをサポートしていますか？
ありがとう
Mohammad Qaiser
コンテンツのトグル表示はSEOに影響しますか？Googleボットはトグル表示されたコンテンツも分析できますか？
WPBeginnerサポート
はい、Googleボットはトグルされたコンテンツとトグルされていないコンテンツの両方を読み取ることができます。
管理者
Bhanu
ありがとう、でもよく理解できませんでした。トグルコンテンツはGoogleにインデックスされますか、それともGoogleはトグルされたコンテンツを無視しますか？
WPBeginnerサポート
はい、Googleでインデックスされています。
グラント
読者の希望に応じて、すべての引用/参考文献を表示または非表示にしたいと考えています。脚注の有無で記事を重複させたくありません。単一のコントロールで、すべてのコンテンツの表示/非表示を切り替える方法はありますか？
Ibn Kassiem
Hi
投稿ありがとうございます。
このプラグインを使用して、ユーザーがトグルをクリックすると投稿全体が表示され、再度閉じることができる、投稿タイトルのみを表示するアーカイブページを作成することは可能ですか？
または、より良い方法があれば教えていただけますか？
WPBeginnerサポート
このプラグインは、そのための最善の方法ではありません。子テーマのarchives.phpテンプレートを編集し、<?php the_content() ?> または <?php the_excerpt() ?> テンプレートタグの前にトグル効果を追加する必要があります。
管理者
eleven-yu
それは良いプラグインです！
しかし、新しい機能が必要です。それは、ダウンロードリンクのような一部のコンテンツを非表示にすることです。コメントした後にのみリンクが表示されます。
インポートを手伝っていただけますか？
ありがとうございます。
Grace
これは気に入っていますが、コメントセクションを切り替えることができるか、または変更できるか知っていますか？すべてのコメントを表示するのではなく、ユーザーがさまざまなコメントを非表示にしたり表示したりできるようにしたいです。
事前に感謝いたします
WPBeginnerサポート
いいえ、現時点ではそのプラグインはそれをサポートしていません。
管理者
ampatel
ナイスプラグインですが、複数の「続きを読む」/「もっと少なく」は可能ですか？
ありがとう
Mark Kolodziej
私もこれを知りたいです。
WPBeginnerサポート
こちらの jQuery FAQ Accordion のチュートリアルをご覧ください。FAQ の部分は無視して、同じ jQuery を任意のテキストに実装できます。
管理者
Jumpringer
ページに複数の「表示/非表示」を配置したいのですが。jQuery FAQ AccordianリンクにあるjQueryの実装方法が明確ではありません。WP FAQセクションは必要ないと言っているのだと思いますが、それは正しいですか？
「my-accordian」フォルダをpluginsディレクトリにアップロードしたとき、WPは「WPBeginner’s FAQ Accordion」プラグインを認識しました。
WP FAQを使用せずにページで複数の「表示/非表示」を有効にするには、もう少し詳しく教えていただけますか？ どうもありがとうございます。
Amanda Mays
このプラグインを静的ページの段落で使用することは可能ですか？プライバシーポリシーの一部を表示/非表示するために使用したいのですが。もし可能であれば、「タイプ」は何になりますか？
ありがとうございます！
Nico
とても便利です！自分でやり方を学ぶ手間が省けました =) はは
ありがとうございます！
Bella's Shelf
素晴らしい情報を提供してくださるこのサイトに感謝します！私はホスト型WordPress初心者で、「WordPressにGoogleアナリティクスをインストールする」といったことをGoogle検索するたびに、必ずあなたのサイトにたどり着いて答えを見つけています。今夜までそれに気づいていませんでした！
私たちのようなWordPress初心者やベテランの方々を助けてくださり、ありがとうございます！
Clawrence
「もっと表示…」というテキストの場所に画像を追加することは可能ですか？そうすれば、画像をクリックして、一般的な文ではなく、テキストの表示/非表示を切り替えることができますか？
編集スタッフ
プラグインをカスタマイズすれば、おそらくそれが可能になります。
管理者
Adam Kellett
これはどのように行われますか？試しましたがうまくいきませんでした：
[showhide type=”…” more_text=”” less_text=”” hidden=”yes”]
このカスタマイズは複雑ですか？
fukr
これは本当に役立つと思います..ありがとう