HTMLとCSSで作る! クリックで要素の表示非表示を切り替える方法【WordPress対応版】

2017-08-11Web制作

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

こんにちは、とみーです。

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

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

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

デモはこんな感じ。

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

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

スポンサーリンク

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

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

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

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

でも、このプラグインは重いことで評判なんです。重いページはそれだけで読者が離れていってしまいます。

 

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

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

とみー
とみー

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

と、分析。

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

結果がどうなったかは究明中です。

 

「直に表示させる」とはいえ、ソースコードは文字が色分けされていたほうが断然見やすい!
ので、私はWP Code Highlight.jsという軽量なプラグインを使っています。
WP Code Highlight.js icon-external-link 

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

切替システムを作成するにあたり、参考にしたサイトです。ありがとうございます。

このサイトのソースコードをそのままコピペすると、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タグが自動挿入されても、要素の開閉が可能
  • ボタンのラベルを、閉じている状態では○○を表示、開いている状態では○○を非表示という表記に自動切替
  • ボタンを中央配置にして、デザインをどんなサイトでも合うように変更

 

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

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

.hidden_box label {
	border: 1px solid #ddd;
	border-radius: 5px;
	cursor :pointer;
	margin: 0 auto;
	padding: 10px;
	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カスタマイズ記事もご覧ください!

icon-arrow-circle-o-right タグ:CSS+カスタマイズ 記事一覧へ

 

とみー
とみー

ページが軽くなったし、スクロールも短くなっていいことづくめかと思いきや、ソースコードのコピーはめちゃくちゃしづらくなったよ・・・一長一短ですな。

こちらの記事もおすすめです