簡単！！ブロックエディターで「隠しテキスト」を実装する方法

「隠しテキスト」とは？

以下のように、文章がある程度長くなってしまう時など、文章の一部を非表示にし、ボタンクリックで全文表示にする方法です。

こんな感じのイメージです↓

----------------- 段落ブロックで通常通り表示させたい文章を入れます。 -----------------

段落ブロックで通常通り表示させたい文章を入れます。段落ブロックで通常通り表示させたい文章を入れます。段落ブロックで通常通り表示させたい文章を入れます。段落ブロックで通常通り表示させたい文章を入れます。段落ブロックで通常通り表示させたい文章を入れます。段落ブロックで通常通り表示させたい文章を入れます。段落ブロックで通常通り表示させたい文章を入れます。段落ブロックで通常通り表示させたい文章を入れます。

----------------- ここから、ボタンをクリックしたら表示される文章を入れます。 -----------------

ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。

ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。

ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。

ブロックエディタでとっても簡単に設定できますので、以下の作成手順よりお試しください！

ブロックは以下のようなイメージです。

グループの中にカスタムHTMLとさらにグループが入っています。下のスペーサーも大事なポイントですので、詳しく見ていきましょう！

● 手順

手順1.「段落」で文章を入力

こちらは説明不要ですね。通常通り「段落」ブロックで文章を入力します。

手順2.「グループ」を追加

グループブロックを追加し、readmore-wrapクラスを付与。

手順3.「カスタムHTML」を追加

readmore-wrapの中に、カスタムHTMLを追加

「続きを読む」などのボタンを追加します。

<input id="btn1" class="readmore-check" type="checkbox"><label class="readmore-btn" for="btn1">続きを読む</label>

手順4.「グループ」を追加

グループブロックを追加し、readmore-text クラスを付与
readmore-textの中に、段落を追加し、続きの文章を記載します。

Check Piont

　グループ（readmore-wrap）の中に「カスタムHTML」「グループ（readmore-text）」が追加できていますか？

手順5.CSS

追加CSS等にコピペします。

ボタンのデザインは適宜調整してください。

/* CSS */
.readmore-wrap {
  position: relative;
}
.readmore-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -55px;
  width: 160px;
  margin: 0 auto;
  padding: 10px;
  background-color: #eee;
  color: #333;
  border: 1px solid #aaa;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  z-index:10;
}
.readmore-text {
  position: relative;
  height: 25px; /*1行のみ表示*/
	overflow: hidden;
}
.readmore-text:before {
   display: block;
   position: absolute;
  bottom: 0;
   left: 0;
   content: "";
   width: 100%;
   height: 20px;
   background: linear-gradient(rgba(255, 255, 255, 0), white);/*テキストを半透明に*/
}
.readmore-check {
  display: none; /*チェックボックスは常に非表示*/
}
.readmore-check:checked + .readmore-btn {
  display: none; /*チェックでボタン非表示*/
}
.readmore-check:checked ~ .readmore-text {
  height: auto; /*チェックでテキストの高さ制限をなくす*/
}

補足

場合によっては以下の画像のように次のブロックにまたがってボタンが配置されたり、隠しテキストのためのぼかしが文字に被って表示されます。

◆ 枠線をまたいでボタンが配置されている

◆ 隠しテキストのためのぼかしが文字に被っている

これで解決！！
readmore-wrapグループ、readmore-textグループそれぞれの一番下に、スペースブロックを追加することで解消されます。
ボタンが次のブロックに被ってしまう時は、スペースを追加して調整してみてください。

隠しテキストは、より多くの情報を見てもらうために有効ですが、内容によっては不適切な場合もあります。
ユーザーの興味のありそうな記事に、あえて隠しテキストを使用する必要はありません。

プロフィールや会社概要の挨拶が極端に長くなってしまう場合など、隠しテキストが必要かどうかを判断して設置するようにしてください。

投稿者プロフィール

志水泉: 2018年より始めた事業のホームページを自作し運用していくなかで、ホームページ制作の楽しさをしり、独学から本格的にWebを学ぶ。
2020年より、自分の周りのWebが苦手な人たちを助けたいという思いからWeb制作を中心にフリーで活動。
2022年より株式会社ウェブロードに入社し、制作・デザインの知識をさらに深めながら、初心者でもわかりやすいWordPressの操作方法などを発信中。

「隠しテキスト」とは？