CSS基礎：知っておくべき2つの落とし穴

1. display:none と visibility:hidden の使い分け

Avadaの要素を一時的に隠したいとき、display: none を使うと 子要素まで完全に消えます。z-index の値も !important も position: fixed も関係なく、子はすべて非表示になります。

一方、visibility: hidden であれば、子要素で visibility: visible を指定することで個別に表示を復元できます。「親は隠しつつ、特定の子要素だけ表示したい」場合は visibility: hidden を使いましょう。

/* NG: 子も全員消える */
.fusion-header-wrapper { display: none !important; }

/* OK: 子が visibility: visible で上書きできる */
.fusion-header-wrapper { visibility: hidden !important; pointer-events: none !important; }

/* 子要素だけ表示 */
.my-nav-container { visibility: visible !important; }

2. pointer-events: none は子要素に継承されない

親要素に pointer-events: none を設定しても、子要素はデフォルトで pointer-events: auto のままです。オーバーレイ要素を透過させたつもりが、子要素がクリックを拾い続けてしまいます。

/* 親だけでは不十分 */
#intro-overlay.exit { pointer-events: none; }

/* 子要素も明示的に指定する */
#intro-overlay.exit * { pointer-events: none !important; }

Avada固有の挙動を知る

3. z-indexはCSSカスタムプロパティ経由で上書きする

Avadaのコンテナ設定でz-indexを指定すると、--awb-z-index: 9999 というCSSカスタムプロパティがインラインスタイルで設定されます。子テーマCSSから !important 付きで z-index を直接指定すれば上書きできます。

/* Avadaが設定した z-index（9999）を上書きする */
#my-element {
  z-index: 10001 !important;
}

4. コンテナ・カラムのoverflow: hidden に注意

Avadaのコンテナやカラムはデフォルトで overflow: hidden になっている場合があります。::before / ::after 疑似要素で要素の外にはみ出すデザインを実装しようとすると、はみ出した部分がクリップされて見えなくなります。

/* はみ出しが消える場合 → overflow: visible を明示 */
.my-title-element.fusion-title {
  overflow: visible !important;
}

5. ::first-line で1行目だけスタイルを変える

Avadaのタイトルエレメントで「1行目は英語キャプション（小さく）、2行目は日本語見出し（大きく）」といったデザインにしたい場合、::first-line 擬似要素が使えます。

/* 全体（2行目以降）のスタイル */
.my-title.fusion-title .fusion-title-heading {
  font-size: 32px !important;
}

/* 1行目だけ上書き */
.my-title.fusion-title .fusion-title-heading::first-line {
  font-size: 12px;
  letter-spacing: 0.3em;
}

6. カラムにはCSS IDとCSS Classの両方がある

Avadaのカラム設定には「CSS Class」と「CSS ID」の入力欄が両方あります。CSS Classはスペース区切りで複数指定できます。IDは1つだけ・ページ内ユニーク。IDセレクタは特異度（specificity）が高くなりすぎるため、多用は避けた方が管理しやすいです。

7. ショートコード内コンテンツを外部から直接書き換えてはいけない

Avada Fusion Builderのショートコードは複雑に入れ子になっています。PHPやPython等のスクリプトでDBを直接書き換えると、エスケープ処理の違いにより CR文字の混入・ショートコード構造の破壊が起きます。コンテンツの変更は必ず管理画面から行うこと。

安全に変更できる範囲は以下です：

• 子テーマの style.css への追記・修正
• functions.php へのフック追加
• 管理画面 Fusion Builder からのパラメータ変更

8. カラーはCSSカスタムプロパティで参照する

Avada Global Options で設定したカラーパレットは、CSSカスタムプロパティとして子テーマCSSから参照できます。カラー値をハードコードするより、グローバル設定と連動させる方がサイト全体の色変更に対応しやすくなります。

/* Avada カラーパレットの参照 */
background-color: var(--awb-color4);
color: var(--awb-custom_color_3);

/* WordPress プリセット形式（ダブルハイフン） */
background-color: var(--wp--preset--color--awb-color-1);

9. コンテナの背景だけをはみ出させる方法

「コンテンツ幅はそのままに、背景色・背景画像だけをカラムの外側にはみ出させたい」という場面では、padding で広げるとコンテンツ幅が変わってしまいます。::before 疑似要素を使うのが正解です。

.my-col > .fusion-column-wrapper {
  position: relative;
  z-index: 0;
}
.my-col > .fusion-column-wrapper::before {
  content: '';
  position: absolute;
  inset: -20px;           /* 四方20pxはみ出す */
  background-color: var(--awb-color4);
  border-radius: 20px;
  z-index: -1;
  pointer-events: none;
}

10. Layout Editorのヘッダーは適用条件（Conditions）を確認する

Avada Layout Editorで作成したヘッダーレイアウトは、Conditions（適用条件）で表示対象を指定します。「フロントページ専用」で作成すると、他のページに変更が反映されません。全ページ共通にしたい要素は Entire Website または All Singular を条件に設定しましょう。

また、Layout Builder製のヘッダーのクラスは .fusion-tb-header です。標準ヘッダーの .fusion-header-wrapper とは別物なので、CSSで操作するときは間違えないようにしてください。

11. 固定ページにアイキャッチ画像が自動表示される問題

固定ページでアイキャッチ画像を設定したとき、コンテンツエリアの上部に自動表示されてしまう場合があります。これはAvada Global Optionsの設定が原因です。

Avada > Global Options > Miscellaneous > Featured Images on Pages を OFF にします。

12. 子テーマCSSを更新してもキャッシュで反映されない問題

Avadaは全CSSを独自にコンパイル・キャッシュします。style.css をサーバーに上書きアップロードしても、ブラウザのキャッシュをクリアするだけでは反映されないことがあります。

Avada > Performance の最下部にある 「Reset Avada Caches」 を実行してください。これで fusion-styles・fusion-scripts フォルダが削除され、次のアクセス時に再生成されます。子テーマCSSを更新したあとは必ずこの操作を行いましょう。

URLとスクロール系のハマりどころ

13. メニューURLの末尾スラッシュ問題

WordPressはディレクトリ形式のURLに末尾スラッシュがない場合、301リダイレクトでスラッシュ付きに転送します。ハッシュ（アンカー）付きURLでこのリダイレクトが発生すると、ブラウザによってはハッシュ部分が消失します。

/* NG: 301リダイレクト → ハッシュが消える可能性 */
https://example.com/about#section

/* OK: リダイレクトなし・ハッシュ確実に届く */
https://example.com/about/#section

Avadaのメニュー設定でアンカーリンクを入力するときは、必ず末尾スラッシュありでURLを入力してください。

14. 別ページからの同一サイト内アンカーにスムーススクロールを効かせる

別ページから page/#anchor 形式でリンクした場合、ブラウザはページロード後にネイティブで即時ジャンプします。Avadaのスムーススクロールはこのタイミングに介入できません。

解決策は、wp_head（priority: 1）に以下のスクリプトを置くことです。ページロード時点でハッシュをURLから除去し、ロード完了後に独自スクロールを実行します。

// wp_head (priority: 1) に記述
if (window.location.hash) {
  var savedHash = window.location.hash;
  history.replaceState(null, '', window.location.pathname + window.location.search);

  window.addEventListener('load', function () {
    var target = document.querySelector(savedHash);
    if (!target) return;
    setTimeout(function () {
      var offsetTop = target.getBoundingClientRect().top + window.scrollY;
      smoothScrollTo(offsetTop, 800); // 独自スムーススクロール関数
    }, 150);
  });
}

15. タイトルエレメント内のアンカーリンクにスムーススクロールが効かない

Avadaのタイトルエレメントに href="#anchor" 形式のリンクを設定しても、Avadaのスムーススクロールが動作せず即時ジャンプになります。Avadaのスムーススクロール処理が fusion-title 内の タグを対象外にしているためです。

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.my-element a[href^="#"]').forEach(function (link) {
    link.addEventListener('click', function (e) {
      var href = link.getAttribute('href');
      if (!href || href === '#') return;
      var target = document.querySelector(href);
      if (!target) return;
      e.preventDefault();
      target.scrollIntoView({ behavior: 'smooth' });
    });
  });
});

/* 画像エレメントにクラス pc-image を付与 */
.pc-image {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer;
}
.pc-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.pc-image:hover::after { opacity: 1; }

.fusion-placeholder-image {
  background-image: url('子テーマURL/assets/img/default-thumbnail.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* CSS: 初期状態のみ */
.my-fadein { opacity: 0; }

/* JS: フェード実行 */
document.querySelectorAll('.my-fadein').forEach(function (el) {
  el.style.transition = 'opacity 1.5s ease';
  el.style.opacity    = '1';
});

/* Layout Builder製ヘッダーは .fusion-tb-header */
body.intro-active .fusion-header-wrapper,
body.intro-active .fusion-tb-header {
  visibility: hidden !important;
  pointer-events: none !important;
}

.fusion-tb-header {
  min-height: 110px; /* 実測値（ロゴ画像ロード後の高さ）*/
}

.circle-btn.fusion-title {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid;
  border-color: #333 !important; /* !important 必須（後述） */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  cursor: pointer;
}

/* Avadaのセパレーターを非表示 */
.circle-btn.fusion-title .title-sep-container,
.circle-btn.fusion-title .awb-title-spacer { display: none !important; }

/* リンク（a）を円全体に拡張 */
.circle-btn.fusion-title a {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
}