【AFFINGER6】トップページにドロップシャドウをカスタマイズ

今回は「AFFINGER」のmainエリアにドロップシャドウ表示させるカスタマイズ方法について解説していきます。

「AFFINGER」の設定ということなので、WordPressテーマを他のテーマを使用している人は今回の記事はあまり参考にならないかのしれません…

今回の記事作成の理由としては、他のテーマにおいてはmainエリアのシャドウを追加する方法は結構解説ページが存在しますが、「AFFINGER」があまりありませんでしたので、解説して行こうかと思います。

せなお

作業自体はとても簡単で数分で完了できますよ！

＼当ブログ使用テーマ／

有名ブロガーに愛用されているSEO最強WordPressテーマ。本ブログも使用中のカスタマイズ性が抜群のテーマです！

mainエリアにドロップシャドウとは？

mainエリアのドロップシャドウとは、下の図のような「mainエリア」にうっすら影ができることを指します。

影ができているかどうかは、自分のサイトを他のサイトと見比べてみるとわかりやすいかと思います。

当サイトでは、横に配置している「サイドバー」には影を効果を追加していないので、違いが分かり易いかと思います！

それでは、ドロップシャドウの設定を行っていきましょう！

まず初めに、WordPress管理者画面から「AFFINGER管理」→「全体設定」を選択してください。

「サイト全体の設定」から「ドロップシャドウ」の項目を編集していきます。

ドロップシャドウの設定は、以上の項目にて編集するだけなので作業自体はとても簡単です！

mainエリアにドロップシャドウを追加していきます。

先ほど同様に「サイト全体の設定」から「ドロップシャドウ」の項目を編集していきます。

作業１：「ドロップシャドウ」項目の下、「以下の要素にドロップシャドウを追加します」にチェクを入れます。

作業２：「その他の適応ID及びクラス」に「main」を入力してください。

注意ポイント

「以下の要素にドロップシャドウを追加します」にチェックを忘れると、mainエリアにシャドウが追加されないので注意してください！

最後に、下にある「save」をクリックして保存しましょう。作業は以上で設定は終わりです。

ちゃんと設定が行えていれば、以下のようにメインエリアにドロップシャドウの効果が追加されています。

続いて「mainエリアにある文字」にドロップシャドウを追加していきます。

同様に「サイト全体の設定」から「ドロップシャドウ」の項目を編集していきます。

作業１：「ドロップシャドウ」項目の下、「以下の要素にドロップシャドウを追加します」にチェクを入れます。

作業２：テキストシャドウの項目に「適応ID及びクラス」に「main」を入力してください。

メインエリアの文字にドロップシャドウが追加されているか確認してみましょう。しっかり設定が行えていれば、以下のような文字に対して影の効果がついているかと思います。　

今回は、mainエリアのドロップシャドウの追加についての解説でした。

自分好みのデザインに仕上げて、お気に入りのサイトを完成させてみましょう！

参考トップページのカスタマイズに関する記事かこちら

参考アップデートやインストール・プラグインに関する記事はこちら

参考投稿記事のカスタマイズも関する記事はこちら

参考Gogleアドセンス×AFFINGERのカスタマイズについての記事はこちら