カテゴリ一覧から記事を探す

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

要素の表示・非表示を切り替えるボタンを作る方法


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

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

1.表示・非表示切り替えボタンの見た目

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

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>

こんな感じ。
試してみてくださいね~。

2.コピペするコードは3つ

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

HTML、jQueryの掲載場所
投稿画面
テキスト編集
CSSの掲載場所
外観
テーマの編集
style.css

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

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

それでは実際のコードを掲載していきます。
いずれも、先ほど説明した箇所にコピペで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コードの中に自動で改行やタグが入ることがありますので、もし動かなければそこの確認も必要です。

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

表示・非表示ボタンの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{ … } の部分は削除しましょう。

4.まとめ

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

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

他のブログデザインは以下の記事でチェック!