買って良かった睡眠系アイテム

CSSコピペでOK!クリックで要素の表示・非表示を切り替えるボタンを作る方法

本サイトのコンテンツには、プロモーションが含まれている場合があります。

CSSコピペでOK!クリックで要素の表示・非表示を切り替えるボタンを作る方法

こんな悩みに答えます
  • 長すぎるコードや、ネタバレを隠しておきたい
  • クリックで表示・非表示を切り替えられるボタンを作りたい
  • コピペですむものが簡単で嬉しいな・・・。

記事中にコードが多すぎるので隠したかったり、映画のレビューではネタバレ防止をしたいというときに、クリック/タップで要素が出てきたら便利です。

今回は、そんなボタンの作り方を紹介します。

基本的にコピペで終わるので超簡単です。

クリックで表示・非表示切り替えボタンの見た目

完成品は以下の通りです。

実際にクリックして試してみてください。

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <img src="img_1.png">
  </body>
</html>

コードが表示・非表示されるかと思います。

コードは長ったらしいことが多いので、必要なところだけで表示するときに役立ちます。

コピペするコードは3つ

今回使用するのはHTML、CSS、jQueryの3つです。

HTML、jQueryの掲載場所
投稿画面
 
カスタムHTMLブロック
CSSの掲載場所
外観
 
テーマファイルエディタ―
 
style.css

jQueryも記事中にコピペすることで、ボタンを掲載している記事のみで読み込むので、その記事しか重くならないという利点があります。

なお、グーテンベルクの場合は、カスタムHTMLブロックの中に書くようにしてください!

表示・非表示ボタンの具体的なコード

それでは実際のコードを掲載していきます。
いずれも、先ほど説明した箇所にコピペでOKです!

表示・非表示ボタンのHTML

HTML
<div><a class="slide-btn">+コードを見てみる</a></div>
<div class="slide-contents">
<!--ここに内容を掲載-->
</div>

文字を変えることで、ボタンの名前も変更可能です。

表示・非表示ボタンのjQuery

jQuery
<script type="text/javascript">
jQuery(function($){ jQuery(".slide-btn").click(function(){
  jQuery($(this).parent().next(".slide-contents")).animate( {height: "toggle", opacity: "toggle"}, "nomal" );
  });
}); 
</script>

記事中には1回だけコピペすればOKです。

jQueryを使用することで、記事中にいくつもボタンを使いたい場合でも、HTMLを変更する必要がありません。

HTMLとCSSだけで作成する方法もあるのですが、毎回HTMLとCSSを変える必要があるので面倒です・・・。

また、テーマによってはjQueryを読み込んでいない場合もありますので、そんな場合は以下のコードをhead中に追加しましょう。

HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

また、時に記事内に掲載したjQueryコードの中に自動で改行やタグが入ることがありますので、もし動かなければそこの確認も必要です。

デベロッパーツールなどを使用して確認するようにしましょう。

maipyon
maipyon

デベロッパーツールの使い方についてはコチラの記事で解説しています!

表示・非表示ボタンのCSS

CSS
.slide-btn {
  display: block;
  width: 200px;
  margin: 0 auto 1em auto;
  text-align: center;
  padding: 7px;
  border: none;
  color: #aaa;
  border-radius: 20px;
  background: #f8f8f8;
  cursor: pointer;
}

.slide-btn:first-letter {
  font-weight: bold;
  margin-right: 2px;
}

.slide-contents {
  width: 100%;
  margin: 0 0 1.6em 0;
  display: none;
}

ボタンの最初の文字「+」を大文字にしています。
もしも、そんな文字を使わないのでしたら、.slide-btn:first-letter{ … } の部分は削除しましょう。

クリックで表示・非表示するボタンの作り方まとめ

昔は白色の文字で、ドラッグで色を反転させてネタバレを見ていました。

意外と使用するタイミングがあるので、是非とも機能として追加しておきたいです。

例えば、余談だけど、これを読む人は読者の50%くらいかな?という部分に使ったり、注意事項を隠しておくなどですね。

コードだけでなく、普通の文章中でも使えそうです。

最近はオシャレなサイトが増えましたし、こういう細かいところもおしゃれにこだわって作っていくようにしましょう!

ブログカスタマイズについてまとめた記事はコチラ

【コピペでOK】WordPressのカスタマイズ集15選【ほぼ必須のカスタマイズあり】 【コピペでOK】WordPressのカスタマイズ集15選【ほぼ必須のカスタマイズあり】 今までにやってきたブログカスタマイズをまとめた記事になっています。必須レベルのカスタマイズも紹介。綺麗なブログに近づけたい人に向けて、コピペでカスタマイズできるようなものを集めました。