AFFINGERのスマホヘッダー背景色が透明のまま変わらない・表示されないときの設定方法

悩み

AFFINGERのスマホヘッダーの色が透明のまま変わらない。何を試してもダメだ！

こんにちは、こんばんは、トレンディです。

今回はこんな悩みについて、知見や経験をもとに解説記事を書いていきます。

結論からすると、スマホヘッダーの背景色が変わらないときは、CSSを追加すれば解決します。

トレンディ

私はこのバグを解決するのに6時間かかりました。カスタマイズから設定してもスマホヘッダーの背景色が変わらない方は、必見です。

本記事は、AFFINGER（WordPressテーマ）を使用している方向けの記事です。

WordPressテーマ「AFFINGER」

＼WordPressテーマ／

AFFINGER公式

※ボタンをクリックすると公式ページへ移動します。

また、当ブログでは「クラシックエディター」を利用していることを前提に「WordPressの使い方」を解説しています。

※Gutenberg（グーテンベルク）、通称ブロックエディターには対応していません。

クラシックエディターのアイコン

WordPressの無料プラグイン「Classic Editor」の導入手順は、下記のとおりです。

1. ダッシュボードをクリック
2. プラグインをクリック
3. 新規追加をクリック
4. 画面右上の検索フォームに「Classic Editor」と入力
5. 今すぐインストールをクリック
6. 有効化

本記事の信頼性

• 職業：フリーランスブロガー・Webデザイナー
• 経歴：Web業界10年目・30代未経験で異業種への転職成功（広告代理店・通販会社経験）
• 実績：会社員時代に複数のSEOメディアを立ち上げ・運営(月間30万PV以上)・収益化

X(Twitter)：トレンディ

今ならブログを開設するのに必要なレンタルサーバー「エックスサーバー」が超オトクなキャンペーンを実施中です。

これからWordPressブログを開設する人は必見です。

＼キャンペーン中がオトク／

本記事を最後まで読んでいただくことで、スマホヘッダーの表示の悩みを解決できます。ぜひ今後のブログ活動に役立ててください！

AFFINGERのスマホヘッダー背景色を変更する方法

通常、AFFINGER(アフィンガー)のスマホヘッダーは、下記の手順で「背景色」を好きな色に変えられます。

本来ならば、下記のスライドメニューバー背景色を好きな色に設定すれば、色が変わるはずなんです・・・

スマホヘッダーの背景色の設定

しかし、手順どおりに設定しても希望するカラーが反映されないことがあります。

AFFINGERのスマホヘッダー背景色が変わらない不具合

私のケースでは、下記の画像のように背景色がつかず透明のままの状態になりました。

トレンディ

iPhoneの実機で起きた表示バグです。

スマホヘッダーの背景色が変わらない不具合

上記のようにタイトルロゴの背景が透過になっているので、スマホヘッダーの部分がとても見づらい表示になっています。

AFFINGERのスマホヘッダー背景色が変わらない・表示されないときの対処法

※タブをクリックするとビフォーアフターの切替えができます。

変更【前】
変更【後】

スマホヘッダーの変更【前】

スマホヘッダーの変更【後】

ちょっとわかりにくいですが、スマホヘッダーの変更【前】は、スマホヘッダーの背景色が透明でページと重なり見づらいです。見栄えも良くないですし、このままバグが表示されたままでは読者はあまりいい気分にならないと思います。

AFFINGERのスマホヘッダー背景色が変わらない・表示されないときは、下記の方法で解決できます。

順番に解説していきます。

WordPressとAFFINGERを最新バージョンにアップデートする

AFFINGERのバージョンが古いとWordPressのカスタマイズに「ヘッダーナビゲーション(スマホ)」・「スライドメニューバー背景色」の設定メニューが表示されません。

WordPressとAFFINGERの2つを最新の状態にアップデートしてからスマホヘッダーの背景色を変更してみましょう。

スマホヘッダーの表示設定を確認する

AFFINGERには、スマホヘッダーを表示する設定があります。

「ヘッダーにサイト名（またはロゴ）を表示しない」にチェックが入っていると、スマホヘッダーが表示されないので、チェックが入っていたらはずして保存しましょう。

手順は、下記のとおりです。

上記の設定をしたらiPhoneの画面でスマホヘッダーの表示を確認します。

スマホブラウザのキャッシュをクリアする

今回は、iPhoneで起きた現象なので、iPhoneの設定からSafariブラウザのキャッシュをクリアします。

iPhoneのキャッシュは、下記の手順でクリアできます。

上記の設定をしたらiPhoneの画面でスマホヘッダーの表示を確認します。

キャッシュプラグインのキャッシュをクリアする

WordPressのキャッシュプラグインを使っている方は、キャッシュプラグインの設定からサーバーのキャッシュをクリアします。

サーバーのキャッシュは、下記の手順でクリアできます。

上記の設定をしたらiPhoneの画面でスマホヘッダーの表示を確認します。

CSSでカスタマイズする

スマホヘッダーの設定やキャッシュクリアでも解決しないときは、CSSを追加すれば解決できます。

手順は、下記のとおりです。

追加CSSに下記のコードをコピペして貼りつけましょう。

※CSSを追加するので、心配な方はバックアップデータを取っておきましょう。

上記の設定をしたらiPhoneの画面でスマホヘッダーの表示を確認します。

トレンディ

もし、この方法でも表示が変わってなければ、キャッシュクリアも数回、試してみましょう。

AFFINGERのスマホヘッダーのカスタマイズ方法

スマホヘッダーの影つきデザイン

トレンディ

上記のようにスマホヘッダーを上部に固定し、下部にうすい影をつけるとちょっとオシャレな感じになります。影は画面を下へスクロールしてもついてきます。

当ブログのようなスマホヘッダーにしたい方は、これから解説するカスタマイズ方法を参考にしてみてください。

順番に解説していきます。

①スマホロゴ画像を設定する

スマホヘッダーに表示する画像を設定します。

手順は、下記のとおりです。

②スマホヘッダー固定する

今回は、スマホヘッダーをスマホ画面の上部に固定にしたいので、設定しておきます。

手順は、下記のとおりです。

トレンディ

スマホヘッダーを固定すると、スマホ画面を下へスクロールしてもスマホヘッダーが表示されます。

③スマホヘッダーに背景色と影をつける

続いて、さきほど解説したCSSを追加します。

手順は、下記のとおりです。

カスタマイズメニューの「追加CSS」に下記のコードをコピペして貼りつけましょう。

※CSSを追加するので、心配な方はバックアップデータを取っておきましょう。

上記の設定をしたらiPhoneの画面でスマホヘッダーの表示を確認します。

まとめ：アフィンガーのスマホヘッダーは追加CSSからデザインできる

スマホヘッダーの背景色が変わらないときは、追加CSSで対応しましょう。

CSSコードを利用すれば、背景色を設定できるだけでなく、スマホヘッダーの下部に影をつけたり、さまざまなデザインアレンジができます。