← 動的パーツギャラリーへ戻る

パーツ番号 11-04-11 ・ JavaScript使用

閉じられるヒントバナー

ページ上部の一言ヒントを×で閉じられる案内バナーです。閉じると「再表示」ボタンに切り替わります。WordPress管理画面の一時的な操作案内に使えます。

js

プレビュー

ソースコード

HTML

<div class="d11-04-11-page">
          <div class="d11-04-11-banner" id="d11-04-11-banner">
            <span class="d11-04-11-ic">💡</span>
            <p>ヒント: 記事一覧はドラッグで並び替えできます。</p>
            <button class="d11-04-11-x" aria-label="閉じる">×</button>
          </div>
          <div class="d11-04-11-row"></div>
          <div class="d11-04-11-row short"></div>
          <button class="d11-04-11-restore" id="d11-04-11-restore" hidden>ヒントを再表示</button>
        </div>

CSS

.prev.d11-04-11{background:#f4f6fb;align-items:flex-start;padding:20px}
        .d11-04-11-page{width:100%;max-width:300px}
        .d11-04-11-banner{display:flex;align-items:center;gap:10px;background:#eef2ff;border:1px solid #c7d2fe;border-radius:10px;padding:10px 12px;margin-bottom:14px}
        .d11-04-11-ic{font-size:16px}
        .d11-04-11-banner p{flex:1;margin:0;font-size:11.5px;line-height:1.5;color:#3a3f6b}
        .d11-04-11-x{border:none;background:none;font-size:16px;color:#7c85b8;cursor:pointer;line-height:1;padding:0 2px}
        .d11-04-11-row{height:14px;border-radius:6px;background:#e3e7f2;margin-bottom:10px}
        .d11-04-11-row.short{width:60%}
        .d11-04-11-restore{border:1px dashed #9aa5d6;background:none;color:#5b7cfa;font-size:11px;border-radius:8px;padding:6px 12px;cursor:pointer}

JavaScript

(function(){
        var root=document.querySelector('#item-11-04-11');if(!root)return;
        var banner=root.querySelector('#d11-04-11-banner'),restore=root.querySelector('#d11-04-11-restore');
        root.querySelector('.d11-04-11-x').addEventListener('click',function(){
          banner.hidden=true;restore.hidden=false;
        });
        restore.addEventListener('click',function(){
          banner.hidden=false;restore.hidden=true;
        });
      })();

クラス名 .d11-04-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。