【WordPress】クリックで画像を表示・非表示にするボタンの作り方

ブログなどで画像を直接表示させたくない、読者に注意喚起した上で画像を表示させたい場合に使えるHTMLボタンの作り方をご照会します！

クリックで画像を表示・非表示にするHTMLボタンとは？

クリックで画像を表示・非表示にするボタンサンプルはこちら👇

今回はこんな感じの「一度クリックしないと画像が表示されない＆もう一度クリックすればまた非表示に戻ることのできるボタン」の作り方をご紹介します！

HTMLの入力方法

※HTMLの入力方法が分かる方は飛ばして読んでください※

HTML入力方法はこちら👇

クリックで画像を表示・非表示にするHTMLボタンの作り方

入力するHTMLはこちらをコピペして利用してください！👇
所々、ご自身で編集するべき部分がありますので、詳しくご説明します。

<!--▼画像表示ボタンと画像を包む全体のコンテナ（中央寄せ）-->
<div class="click-to-show-image" style="text-align: center;">

  <!--▼画像を表示させるためのボタン-->
  <button 
    id="toggleBtn1"
    onclick="document.getElementById('imgWrap1').style.display='block'; this.style.display='none';"
    style="
      display: inline-block;         /* ボタンをインラインブロックに */
      background: #31d66d;           /* ボタン背景色（現在：緑系） */
      color: white;                  /* ボタン文字色（現在：白 ）*/
      border: none;                  /* 枠線なし */
      padding: 15px 25px;            /* 内側の余白 */
      font-size: 16px;               /* 文字サイズ */
      border-radius: 8px;            /* ボタン角を丸く */
      cursor: pointer;               /* カーソルをポインターに */
    "
  >
    ※クリックして画像を表示※
    <!--ボタン内のテキスト(改行したい場合は<br>の後に文字を追加)-->
  </button>

  <!--▼表示される画像を包む要素（初期は非表示）-->
  <div id="imgWrap1" style="display: none; margin-top: 10px;">
    
<!--▼表示される画像本体-->
<!-- 画像のURLの貼り付け -->
<img 
  src="https://●●.png"  　　　
  style="
    width: 300px;               /* 画像の横幅 */
    height: auto;               /* 画像の縦幅 */
    cursor: pointer;            /* クリック可能なカーソルに */
  "
  onclick="document.getElementById('imgWrap1').style.display='none'; document.getElementById('toggleBtn1').style.display='inline-block';"
/>
<!-- 画像をクリックすると非表示に戻り、ボタンが再表示される -->
  </div>
</div>

ボタンの背景色・文字色の変更方法

ボタンの背景色を変更したい場合は10行目、文字色を変更したい場合はは11行目に任意の色を入力してください。

カラーコードが分からない場合は下記サイトを参照してみてください！

カラーコード確認サイトはこちら（原色大辞典公式HP）

ボタンに表示される文字の編集方法

ボタンに表示される文章を編集したい方は19行目を修正してください。
表示される文章を改行したい場合は、文と文の間に<br>を入力したください。

画像URLの取得・貼り付け方法

ボタンを１つの記事で複数使う場合の注意点

このボタンを１つの記事で複数使う場合、6・35行目にある「toggleBtn1」と７・24・35行目にある「imgWrap1」の番号を「toggleBtn2」「imgWrap2」という風に連番に修正して利用してください。

おわりに

無事に入力することはできましたでしょうか？
皆さんのブログがより良いものになればと思います！

もし他にも「これ具体的に教えてほしい！」といったご要望がありましたら、ぜひコメントにてお知らせください！コメントにて返事や新規記事としてキチンとご紹介しようと思います！🤔