PR AFFINGER6専用機能 設定

PCのヘッダー境界線に影をつける方法【CSS不要】

この記事では、

「PCのヘッダーとメニューの境目がわかりにくい」

「ヘッダーの境界線に影をつけられないかなぁ」

という悩みを解決します。

PCヘッダーの境界線に影をつける方法のひとつに「CSSを追加する方法」があるんですが、AFFINGER6では CSSを追加する必要はありません。

やることは ドロップシャドウの設定に適応IDを追加するだけです。

ということで今回は、PCヘッダーに影をつける簡単な方法と、PCヘッダーの境界線に影が追加されない場合の対処法を解説していきます。

スマホのヘッダーにも影をつけたい!

関連記事

PCのヘッダーに影をつける方法

AFFINGER6でPCヘッダーに影をつけるのは簡単です。

ドロップシャドウの「その他の適応ID及びクラス」に、PCヘッダーの適応IDを追加するだけ

それでは手順を詳しく解説していきます。

手順

1.まずは以下の # ではじまる適応IDをコピーしてください。

#headbox-bg

これがPCヘッダーの適応IDです。

2.AFFINGER管理の「全体設定」を開きます。

3.ドロップシャドウの中に「その他の適応ID及びクラス:」という欄があるので、そこに先ほどコピーした適応IDを貼り付けます。

4.適応IDが合っているか確認し[Save]を押して保存します。

問題なくPCヘッダーの境界線に影が追加されました。

あるのと無いのとでは、これくらいの差が出ます。

PCヘッダーの境界線に影が追加されない場合

先ほど手順通りに進めても影が追加されない場合があります。

考えられる原因は、

  • カンマが全角になっている
  • PCヘッダーメニューに背景色を設定している

この2つです。

カンマが全角になっている

複数の適応ID及びクラスを適応したい場合は「半角カンマ」で区切ります。

たとえば、マイボックス(STINGER専用パーツ)とPCヘッダーの適応IDを一緒に追加するとしましょう。

.st-mybox,#headbox-bg

上記のように、マイボックスのCSSクラスとPCヘッダーの適応IDとの間に半角カンマを記入しているのがわかると思います。

これが仮に「全角カンマ」になっている、もしくは「読点(とうてん)」になっていた場合は、正しく適応ID及びクラスを認識できません。

有効なのは、英数字の「半角カンマ」のみです。

必ず英数字の「半角カンマ」で区切りましょう。

PCヘッダーメニューに背景色を設定されている

PCヘッダーメニューに背景色を設定している場合も、PCヘッダーとメニューとの境界線に影が反映されません。

解決策は「背景色をクリアにする」ことです。

手順を解説します。

手順

1.「外観」→「カスタマイズ」→「-各メニュー設定」の順に開きます。

2.「PCヘッダーメニュー」を開き、背景色の「色を選択」をクリック。

色を選択せずに「クリア」を押して保存すれば完了です。

影を反映させた状態でPCヘッダーメニューの背景色を設定する方法

どうしてもPCヘッダーメニューの背景色を設定したい! という場合は1つだけ方法があります。

それは、基本エリア設定で背景色を変える方法です。

これをすることでPCヘッダーメニュー以外の場所の背景色も変わってしまいます。全体のデザインを考慮して設定してください。

手順

まずは「外観」→「カスタマイズ」を開きます。

①「基本エリア設定」→ ②「背景色」の順にクリックし、 一番上の③「色の選択」で背景色を変更します。

これでPCヘッダーメニューの背景色にも反映されているはずです。

-AFFINGER6専用機能, 設定
-

PAGE TOP