ホリデープロモーションを実施したいですか？Elementorのカスタムコードでサイト全体にアナウンスバーを素早く追加、驚くほど効果的です

使い方を知っていますかエレメンタウェブサイトの最上部に目立つお知らせバーを追加しませんか？ElementorのCustom Code機能は、テーマファイルを変更することなく、安全かつ柔軟にサイト全体で統一されたお知らせバーを実装する方法を提供します。本記事では、Custom Codeを使用して機能性が高く視覚的に美しいトップ通知バーをゼロから追加する方法を詳細に解説します。

一、なぜElementorカスタムコードでアナウンスバーを作成するのか？

プラグインやテーマファイルの手動編集と比べて、Custom Codeは初心者向けで、より安全かつ安定しています。以下の利点があります：

• あらゆるテーマに対応し、テーマのアップグレードによって無効になることはありません
• サイト全体を一括で読み込めるため、ページを繰り返し編集する必要がありません
• HTML、CSS、JavaScriptをサポートし、高度なカスタマイズが可能
• 表示条件を制御可能（例：ホームページのみ表示）
• 軽量でリソースを消費せず、追加プラグインのインストールよりも効率的

マーケティングキャンペーン、祝祭日のプロモーション、物流のお知らせなどの場面で非常に実用的です。

二、サイト全体のお知らせ欄の仕組み

公告条は通常、三つの部分で構成される：

HTML ブロックとしてお知らせ内容
CSSによるスタイル制御と固定位置
カスタムコードの注入により、各ページの最上部に表示されるようにする

一度だけ記述すれば、Elementorが自動的にサイト全体に読み込みます。

三、カスタムコード作成の準備作業

必要なもの：

• インストール済みエレメンタ（無料版で十分です）
• 管理者権限
• 広告文案を明確に定める（例：「送料無料」「新商品発売」など）

プログラミングの基礎知識は全く必要ありません。コードをコピーするだけでOKです。

四、カスタムコードで告知バーを追加する方法

4.1 カスタムコードページへ移動

バックエンドで順に開く：Elementor → カスタムコード → 新規追加、名前を入力（例：「サイト全体のお知らせバー」）。

4.2 コード配置位置の設定

Location で選択：ボディエンド（推奨）これによりページの読み込み速度に影響を与えず、ヘッダーの固定表示もより簡単に実現できます。

4.3 お知らせ項目のHTML構造を追加

以下の内容をコードエディタに貼り付けてください：

<div class="site-announcement-bar">
  <span>🎉 全商品期間限定送料無料キャンペーン開催中！</span>
  <a href="/ja/%e3%82%b7%e3%83%a7%e3%83%83%e3%83%97/" class="notice-btn">今すぐ確認</a>
</div>

これはシンプルな構造で、イベントやお知らせの表示、またはリンクの遷移に適しています。

4.4 CSSスタイルの追加

公告条をトップに固定するため、以下のスタイルを上記の HTML 一緒に置く：

.site-announcement-bar { position: fixed; top: 0; left: 0; width: 100;
  background: #15111; color: #fff; padding: 10px 0; text-align: center; font-size: 15px; z-index: 9999; } .site-announcement-bar .notice-btn { margin-left: 12px;
  padding: 6px 14px; background: #f4c21d; color: #000; border-radius: 4px; text-decoration: none; font-weight: bold; }

黒い背景に白い文字のトップバーが表示され、ボタンは黄色で、視覚効果は明確で目立ちます。

五、お知らせ項目に閉じるボタンを追加（任意）

ユーザーが手動でアナウンスバーを閉じられるようにしたい場合は、以下の内容を追加してください。

5.1 終了ボタンの追加 HTML

このボタンをアナウンスバー内に配置してください。

六、コンテンツが告知欄に隠れないようにする

お知らせ欄をトップに固定するとページコンテンツが隠れる可能性があるため、以下のスタイルを追加できます：

body { padding-top: 50px; }

公告条の高さに応じて数字を調整してください。

七、特定ページでのみ表示される公告条項の方法

すべてのページにアナウンスバーを表示したくない場合は、条件を設定できます：エレメンタカスタムコード → 条件

選択する：

• Entire Site（全サイト）
• Front Page（トップページ）
• Singular（単一の記事ページ）

これにより、イベント、祝日、製品コレクションに対してより精密な設定が可能になります。

八、よくある問題の解決策

1. 公告条が表示されない？

確認可能：

• カスタムコードは公開済みですか？
• 読み込み位置は適切か（Body Endが最も安定）
• テーマによって上書きされたスタイルはありますか

2. モバイル端末の表示が良くない？

メディアクエリによるフォントとレイアウトの最適化を追加：

@media(max-width: 768px){  .site-announcement-bar{    font-size: 13px;    padding: 8px 0;  }}

3. 告知欄をもっと目立たせたいですか？

追加可能：

• グラデーション背景
• スクロール表示効果
• カウントダウンモジュール
• アクティビティアイコン

CSSを調整するだけで視覚効果を改善できます。

まとめ

Elementorカスタムコード強力かつ軽量なツールで、わずか数行のHTMLとCSSでサイト全体に共通するお知らせバーを作成できます。テーマファイルの修正も不要、追加プラグインのインストールも不要で、ECサイト、コンテンツサイト、マーケティングページに最適です。本記事の手順に従えば、独自のサイト通知システムを素早く構築でき、スタイルや表示範囲を自由にデザイン可能。ユーザーが最初に目にする重要な情報を確実に届けられます！！！

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み