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

「隠しテキスト」とは？

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

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

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

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

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

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

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

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

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

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

グループの中にカスタム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グループそれぞれの一番下に、スペースブロックを追加することで解消されます。
ボタンが次のブロックに被ってしまう時は、スペースを追加して調整してみてください。

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

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

投稿者プロフィール

Asuka: 元銀行員。退行後手に職をつけたい気持ちから元々興味があったWeb制作の道へ。
訓練校でHTMLやCSS、デザインについて半年間学び、その後デザイン会社で2年程度の実務経験を積む。
日々の業務を通して、お客様自身で更新・運用できる生きたサイトを作成できるWordPressの需要を感じ、2024年7月より株式会社ウェブロードに入社。
技術やデザイン、知識を磨きながらお客様視点での制作・運用を行っている。

「隠しテキスト」とは？