Astraのフッターで特定のウィジェットロゴだけ表示されない時の直し方
Astra のフッターウィジェットエリアで、まったく同じ手順で設定したはずのロゴ画像が、ある特定の位置だけ表示されない。この現象はウィジェット個別の「デザイン」設定にある可視性トグルがオフになっているのが原因だ。
なぜ特定のウィジェットだけ表示されないのか
Astra のウィジェットには、共通の外観設定とは別に、各ウィジェット単体で表示を制御する「可視性（Visibility）」というオプションが存在する。この設定は Astra の「デザイン」タブ内にあり、デスクトップ・タブレット・モバイルのデバイスごとにオンオフを切り替えられる。今回のように「画像ファイル自体は正常で、配置場所を入れ替えても問題のウィジェット枠だけが出ない」という症状は、この可視性トグルが何らかの操作ミスやインポート時のずれでオフになっている典型的なケースだ。
WordPress の標準ウィジェット画面と Astra の独自設定が組み合わさっているため、単にウィジェットの中身を見るだけでは原因に気づきにくい。問題のウィジェットを開き、外観の設定ではなく Astra が拡張した「デザイン」パネルの中まで確認する必要がある。
上の手順図は Astra のウィジェット設定から可視性を修正する流れを示している。管理画面左メニューの「外観」から「ウィジェット」画面へ進み、問題のフッターエリアにある該当ウィジェットを開いて Astra の「デザイン」タブ内を確認する。
表示されないウィジェットを特定し設定を修正する手順
可視性トグルの確認と修正
ウィジェット編集画面を開いたら、まず Astra が追加する「デザイン」タブをクリックする。ここには「可視性」という項目があり、「デスクトップで表示」「タブレットで表示」「モバイルで表示」の3つのスイッチが並んでいる。いずれかひとつでもオフになっていれば、対応するデバイスでそのウィジェットは非表示になる。すべてのデバイスでオフになっていると、当然どの端末からも見えなくなる。
このトグルは、ウィジェットを複製したりテーマの設定をインポートした際に、意図せずオフの状態で保存されることがある。特に3カラム構成で同じロゴ画像を並べている場合、1つだけ設定がずれていても他と同じに見えるため、中身を確認しただけで「設定は同じだ」と思い込んでしまう。必ずデザインタブの可視性まで目を通す必要がある。
修正後にキャッシュをクリアして確認する
可視性トグルをオンにしてウィジェットを保存したら、必ずサイトのキャッシュを削除してからフロントエンドを確認する。キャッシュ系プラグインを使っている場合はそのプラグインのキャッシュ削除機能を実行し、ブラウザのキャッシュも念のためクリアしておくと確実だ。修正が即時反映されないケースの多くはキャッシュが残っているだけなので、焦らずキャッシュクリアを行ってから再度表示をチェックする。
似た症状だが可視性設定以外が原因のケース
z-index が競合している
Astra のフッター内で特定の要素だけが見えない場合、z-index の重なり順が原因になっていることがある。特に上に重なる背景要素や疑似要素（::before / ::after）があると、実際には出力されているのに視覚的に隠れてしまう。ブラウザの検証ツールで該当エリアを右クリックして「検証」を開き、要素が DOM 上に存在するかどうかを最初に確認する。要素自体があるのに見えないなら CSS の z-index や opacity、visibility プロパティを疑う。
プラグインやキャッシュの影響
最適化プラグインが CSS や JavaScript を結合・圧縮する過程で、Astra の可視性制御に関わるスタイルが誤って上書きされることがある。また、CDN を経由している場合はエッジサーバーに古いキャッシュが残っている可能性も考慮する。まずは最適化プラグインを一時停止して表示が直るか切り分け、問題が再現しなければ圧縮除外リストに Astra 関連の CSS を追加するといった対応をとる。
子テーマやカスタムコードの干渉
子テーマの functions.php にウィジェットの表示条件を操作するフィルターフック（widget_display_callback など）が記述されていると、Astra の可視性設定と競合することがある。また、独自に追加した CSS で特定のウィジェット ID に対して display: none を指定してしまっていないかも確認する。こうした干渉は、標準テーマに一時的に切り替えることでは Astra 側の問題と区別できないため、子テーマのコードを直接精査する必要がある。
よくある質問
Astra の可視性設定は Elementor で作ったフッターにも影響するのか
Elementor でフッターを構築している場合、Astra のウィジェット可視性設定は直接影響しない。ただし、Elementor で作成したフッターと Astra の標準フッターが混在している環境では、Astra の設定が効くエリアと効かないエリアが発生する。テーマのフッター管理画面で、実際にどちらのフッターが表示される設定になっているかを先に確認する。
可視性トグルをオンにしたのにまだ表示されない
可視性設定以外に、ウィジェット自体の「コンテンツ」が空になっていないか確認する。画像ウィジェットの場合、画像URLが欠落していると何事もなかったかのように空のHTMLが出力される。また、フッターウィジェットエリア全体が Astra のカスタマイザーで非表示に設定されていないかも再確認する。カスタマイザーの「フッター」→「フッターウィジェット」セクションでエリア自体の表示設定を変更できるためだ。
特定のデバイスだけで消えるのは可視性設定だけが原因か
可視性設定以外にも、CSS のメディアクエリで特定の画面幅に display: none が指定されているケースがある。Astra の追加 CSS や子テーマに誤ったメディアクエリが残っていないか、ブラウザの検証ツールでデバイスモードを切り替えながら該当要素の CSS を確認する。可視性トグルがすべてオンでも、別の CSS で上書きされていると表示されない。
この記事のポイント
- Astra の特定ウィジェットだけ非表示になる主因は「デザイン」タブの可視性トグル
- 修正はウィジェット編集画面のデザインタブからすべてのデバイストグルをオンにするだけ
- キャッシュクリア後にフロントエンドで反映を確認する
- z-index やプラグイン競合でも似た症状が出るため、DOM 上の存在確認が切り分けの第一歩
・ Reddit、Stack Overflow、WordPress.org フォーラムを日々巡回し、現場の悩みを拾い上げて記事化
・ WordPress、WooCommerce、Next.js などモダンWeb制作領域のトラブルシューティングが専門
・ 「検索しても答えが見つからなかった」を一つでも減らすことが目標
・ エラーメッセージから根本原因にたどり着く粘り強い調査が得意
・ 初心者がつまずきやすい箇所を先回りで解決する記事作りを心がけている