コピペでOK！クリックで要素の表示非表示を切り替えるHTML+CSS【WordPress対応版】

2017-08-112023-11-19Web制作

長い長いウェブページって、スクロールするの大変ですよね。

特にソースコードがずらずらっと表示されていると、興味あったとしても読み解くのが面倒でそっとページを閉じてしまうことも。

このページでは、HTMLとCSSのみで要素の表示非表示をクリックやタップで切り替えられる方法を紹介しています。この方法を導入することでページの長さがグッと変わります。

デモはこんな感じ。

DEMO

中身が表示されます。もう一度クリック/タップすると非表示になります。

映画やゲームの感想の記事で、ネタバレを隠すのにも使えます。

Contents

1. 要素の表示非表示切替システムを作ろうと思った経緯
2. WordPressでpタグが自動挿入される問題
3. クリックで要素の表示非表示を切り替えるソースコード【WordPress対応版】

要素の表示非表示切替システムを作ろうと思った経緯

個人的な話なので次のセクションまで読み飛ばしても問題ありません。

当ブログも長いソースコードを表示しているページがあります。

今まではCrayon Syntax Highlighterというプラグインを使い、高さを指定して枠内でスクロールさせることでページを長々とさせないようにしてました。

Crayon Syntax Highlighter – WordPress プラグイン | WordPress.org 日本

構文複数の言語、テーマ、フォント、URLからのハイライト、または投稿テキストをサポートするハイライ ...

https://ja.wordpress.org/plugins/crayon-syntax-highlighter/

でも、Crayon Syntax Highlighterは重いことで評判なんです。重いページはそれだけで読者が離れていってしまいます。

別の方法で、CodePenというサービスを使い、デザインとソースコードを一気に表示しているページもありました。

CodePen: Online Code Editor and Front End Web Developer Community

An online code editor, learning environment, and community for front-end web development using H ...

https://codepen.io/

それを使っていたページが、よくGoogle先生の検索結果で圏外へ飛ばされる現象に見舞われ

もしや、外部サイトをJavaScriptで読み込んでいるから、先生からは中身が無いように見えるのでは…？

と、分析。

デザインは画像へ、ソースコードはブログ内に直に表示させるように変更。

そのように工夫した結果、該当のページは圏外に飛ばされることはなくなりました。

「直に表示させる」とはいえ、ソースコードは文字が色分けされていたほうが断然見やすい！
ので、私はPrism.jsという軽量なシステムを使っています。
Prism.js

WordPressでpタグが自動挿入される問題

~~HTMLとCSSだけ！要素の表示・非表示を切り替える方法~~

切替システムを作成するにあたり、参考にしたサイトです。ありがとうございます。（2022年12月現在、参考ページは削除されてしまったようです）

このサイトのソースコードをそのままコピペすると、WordPressを使っている場合は要素の開閉ができません！

2017年10月現在、参考元の記事はリライトされ、WordPressでも要素の開閉ができるようなソースコードになっています。

というのも、WordPressではpタグ（段落）が自動的に挿入される仕組みとなっています。

自動挿入させない方法はありますが、過去の記事全てに反映されるためレイアウトが崩れてしまう場合も。
投稿日以降で絞って一括除去できるプラグインもありますが、サイトが重くなるためプラグインはあれこれインストールしないほうが賢明です。

参考サイトのHTMLはこれ。

<div class="hidden_box">
    <label for="label1">クリックして表示</label>
    <input type="checkbox" id="label1"/>
    <div class="hidden_show">
      <!--非表示ここから-->     
          <p><img src="face.png"></p>
      <!--ここまで-->
    </div>
</div>

投稿画面のテキストエディタには余計なタグが入っていないのに…

表示画面ではlabelタグとdivタグの間にpタグが挿入されています。

※参考サイトと若干コードが違います。都合によりinputタグとlabelタグの位置を入れ替えてます。ちなみに元のままでもpタグは自動挿入されます。

参考サイトのソースコードは「inputタグにチェックが入ったらその直後にあるdivタグを表示する」という指定をCSSで行っているため、間にpタグが入るとその指定が効かなくなってしまうのです。

クリックで要素の表示非表示を切り替えるソースコード【WordPress対応版】

主な改変点は3点です。

間にpタグが自動挿入されても、要素の開閉が可能
ボタンのラベルを、閉じている状態では○○を表示、開いている状態では○○を非表示という表記に自動切替
ボタンを中央配置にして、デザインをどんなサイトでも合うように変更

HTML

<div class="hidden_box">
	<input type="checkbox" id="labelX"/> <!-- Xを任意の数字に変更 -->
	<label for="labelX">ラベル</label> <!-- Xを上記と同じ数字に変更 -->
	<div class="hidden_show">
		ここに中身
	</div>
</div>

CSS

.hidden_box {
	margin: 10px 0;
	padding: 0;
	text-align: center;
}

.hidden_box label {
	border: 1px solid #ddd;
	border-radius: 5px;
	cursor: pointer;
	font-weight: bold;
	margin: 0 auto;
	padding: 10px;
	min-width: 50%;
}

.hidden_box label:hover {
	background: #f5f5f5;
}

.hidden_box label:after {
	content: "を表示";	/* 閉じている状態のときにラベルの後ろに続く文字 */
}

.hidden_box input {
	display: none;
}

.hidden_box .hidden_show {
	height: 0;
	overflow: hidden;
	opacity: 0;
	padding: 0;
	text-align: left;
	transition: 0.5s;
}

.hidden_box input:checked + label:after {
	content: "を非表示";	/* 開いている状態のときにラベルの後ろに続く文字 */
}

.hidden_box input:checked ~ .hidden_show {
	height: auto;
	opacity: 1;
	padding: 10px 0;
}

HTMLは投稿画面のテキストエディタに、CSSはWordPress管理画面の外観 → テーマの編集 → style.cssにコピペしてください。

参考サイトでは .hidden_box input:checked + .hidden_show となっていた指定を、.hidden_box input:checked ~ .hidden_show に変更しました。

この記号1つ変えるだけで、inputタグの直後にあるdivタグ（hidden_showクラス）への指定が、inputタグの以降にあるdivタグ（hidden_showクラス）への指定と変わります。

inputタグとdivタグが隣り合っていなくても大丈夫になりました。間にpタグが入っていてもいいんです。

また、ラベルはHTMLでは「CSS」とだけ記載しておいて、CSSで「を表示」「を非表示」と表示させることにより、開閉により表記が変わります。

お好みによりCSSの表記を変えてみてくださいね。

ソースコード開閉システムにより、更に見やすくなったCSSカスタマイズ記事もご覧ください！

タグ：CSS+カスタマイズ記事一覧へ

ページが軽くなったし、スクロールも短くなったし、Prism.jsを使うことでソースコードのコピーも楽になって…いいことづくめだね！