![](https://www.webroad.co.jp/wp/wp-content/uploads/2023/04/401x267xhide-text-1.jpg.pagespeed.ic.tBCLG3mStd.jpg)
「隠しテキスト」とは?
以下のように、文章がある程度長くなってしまう時など、文章の一部を非表示にし、ボタンクリックで全文表示にする方法です。
こんな感じのイメージです↓
----------------- 段落ブロックで通常通り表示させたい文章を入れます。 -----------------
段落ブロックで通常通り表示させたい文章を入れます。 段落ブロックで通常通り表示させたい文章を入れます。 段落ブロックで通常通り表示させたい文章を入れます。 段落ブロックで通常通り表示させたい文章を入れます。 段落ブロックで通常通り表示させたい文章を入れます。 段落ブロックで通常通り表示させたい文章を入れます。 段落ブロックで通常通り表示させたい文章を入れます。 段落ブロックで通常通り表示させたい文章を入れます。
----------------- ここから、ボタンをクリックしたら表示される文章を入れます。 -----------------
ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。
ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。
ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。ボタンをクリックしたら表示される文章を入れます。
ブロックエディタでとっても簡単に設定できますので、以下の作成手順よりお試しください!
ブロックは以下のようなイメージです。
グループの中にカスタムHTMLとさらにグループが入っています。下のスペーサーも大事なポイントですので、詳しく見ていきましょう!
![](https://www.webroad.co.jp/wp/wp-content/uploads/2023/04/1262.png.pagespeed.ce.PGodvvz4Qi.png)
● 手順
手順3.「カスタムHTML」を追加
readmore-wrapの中に、カスタムHTMLを追加
「続きを読む」などのボタンを追加します。
<input id="btn1" class="readmore-check" type="checkbox"><label class="readmore-btn" for="btn1">続きを読む</label>
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; /*チェックでテキストの高さ制限をなくす*/ }
補足
![](https://www.webroad.co.jp/wp/wp-content/uploads/2022/08/6-1.png.pagespeed.ce.mBioHGdMZD.png)
隠しテキストは、より多くの情報を見てもらうために有効ですが、内容によっては不適切な場合もあります。
ユーザーの興味のありそうな記事に、あえて隠しテキストを使用する必要はありません。
プロフィールや会社概要の挨拶が極端に長くなってしまう場合など、隠しテキストが必要かどうかを判断して設置するようにしてください。
投稿者プロフィール
![志水泉](https://www.webroad.co.jp/wp/wp-content/uploads/2023/04/IMG_0882.png.pagespeed.ce.Vnnk0a-Q-n.png)
-
2018年より始めた事業のホームページを自作し運用していくなかで、ホームページ制作の楽しさをしり、独学から本格的にWebを学ぶ。
2020年より、自分の周りのWebが苦手な人たちを助けたいという思いからWeb制作を中心にフリーで活動。
2022年より株式会社ウェブロードに入社し、制作・デザインの知識をさらに深めながら、初心者でもわかりやすいWordPressの操作方法などを発信中。
最新の投稿
お問合せフォームはこちら
(※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。)
お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。 2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。