パーツ番号 03-04-10 ・ JavaScript使用

言語別お知らせバナー

「English version available」のような多言語案内バナーです。閉じるボタン付きで、訪問者の言語に応じた案内をWPML/Polylangサイトの上部に表示する用途に使えます。

i18njs

プレビュー

ソースコード

HTML

<div class="d03-04-10-banner">
          <svg class="d03-04-10-ico" width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.6"/><path d="M2 12h20M12 2c2.5 2.7 4 6.2 4 10s-1.5 7.3-4 10c-2.5-2.7-4-6.2-4-10s1.5-7.3 4-10z" stroke="currentColor" stroke-width="1.6"/></svg>
          <span class="d03-04-10-text">English version available. <a href="#">View in English</a></span>
          <button class="d03-04-10-close" aria-label="閉じる">×</button>
        </div>

CSS

.d03-04-10{background:#eff6ff}
        .d03-04-10-banner{width:100%;display:flex;align-items:center;gap:10px;
          background:#dbeafe;border:1px solid #bfdbfe;border-radius:8px;padding:10px 12px}
        .d03-04-10-ico{flex:none;color:#2563eb}
        .d03-04-10-text{flex:1;font-size:12.5px;color:#1e3a8a;line-height:1.5}
        .d03-04-10-text a{color:#1d4ed8;font-weight:700;text-decoration:underline}
        .d03-04-10-close{flex:none;border:none;background:none;font-size:16px;line-height:1;color:#1e3a8a;cursor:pointer}
        .d03-04-10-banner.is-hidden{display:none}

JavaScript

(function(){
        var root=document.querySelector('#item-03-04-10 .d03-04-10');
        var banner=root.querySelector('.d03-04-10-banner');
        root.querySelector('.d03-04-10-close').addEventListener('click',function(){
          banner.classList.add('is-hidden');
        });
      })();

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