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

2021年10月13日

 

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

 

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

 

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

 

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

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

 

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

 

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

 

 

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

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

 

mainエリアにドロップシャドウ設定画面

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

 

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

 

 

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

 

 

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

 

mainエリアにドロップシャドウ表示

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

 

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

 

 

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

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

 

 

注意ポイント

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

 

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

 

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

 

 

mainエリアの「文字」にドロップシャドウ表示

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

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

 

 

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

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

 

 

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

 

 

まとめ

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

 

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

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER
-, ,