AFFINGER WordPress

【AFFINGER5】mainエリアにドロップシャドウを追加する方法

2021年5月5日

affinger5

ネットで「AFFINGER5のmainエリア(記事)ドロップシャドウを追加する方法」と、いくら検索しても自分の目当ての記事がなくて悩みが解決できません。

他のテーマだと、シャドウを追加する方法はいくらでも出てくるのにアフィンガーだけ出てこないのでmainエリアにシャドウを追加する方法がわかりません。



このように、

mainエリアにシャドウを追加して記事エリアとサイドバーエリアの区別をつけたい!


という人向けの記事になります。
※AFFINGER5ユーザー専用

筆者もつい最近、あなたと同じような悩みを抱えて検索をしまくってました。
しかし、アフィンガー用のシャドウを追加する方法を記載している記事は見つかりませんでした。

ネットの力を借りても1つも出てこなかったので、自分でシャドウを追加することにしました。
試行錯誤すること約1時間

ようやくmainエリアにシャドウを追加することができました。

takablog
takablog


上の画像のような感じです。
うっすらができているのがわかりますでしょうか。

影ができているのがわからない人は、あなたのサイトと比べてみればわかるかと思います。
横に配置されているサイドバーは影を追加していないのでわかりやすいですね。

この影を追加する方法が、ネットで検索してもアフィンガーだけどこにもなかったのです。
※長時間検索した猛者ならわかるはず。

このmainエリアに影を追加する方法を今回は図解付きで解説します。
1分も経たずにできてしまうので、真似してシャドウが追加されているか確認してみてください。

それではさっそく、解説していきます。

本記事の内容

  • mainエリアにドロップシャドウを追加する方法【1分で解決】
  • まとめ



【1分で解決】mainエリアにドロップシャドウを追加する方法

パソコン

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

まずは、WordPressのダッシュボードから、「AFFINGER5 管理」をクリックしてください。

takablog
takablog


開けたら、「デザイン」をクリックしてください。

takablog
takablog


開けたら、下の画像のようにドロップシャドウの項目の設定を行います。

takablog
takablog

以下の要素にドロップシャドウを追加します」にチェックを入れるのを忘れずにしましょう。

注意ポイント

チェックを忘れると、mainエリアにシャドウが追加されないので注意してください。


次に、その他の適応ID及びクラスの項目に「main」と入力し、下のsaveをクリックして保存しましょう。
たったこれだけで、設定は終わりです。

解説したことをまとめると

①ダッシュボードから「AFFINGER5 管理」をクリックして開く

②AFFINGER5 管理が開けたら「デザイン」を開く

③「以下の要素にドロップシャドウを追加します」にチェックを入れる

④その他の適応ID及びクラスの項目に「main」と入力し、下のsaveをクリックして保存する


mainエリアにシャドウが追加されているか確認しましょう。

確認方法

追加でタブを開き、mainを入力したり消したりしてサイトを更新して違いを確認する





まとめ


今回はmainエリアにドロップシャドウを追加する方法を解説しました。

AFFINGER5だけシャドウを追加する方法がないのは悲しいですよね。
この記事が少しでもAFFINGER5ユーザーの役に立てれば幸いです。

何度も言いますが、AFFINGER5のmainエリアにドロップシャドウを追加する方法はおそらくこの記事だけですので、参考になったら拡散お願いします。

筆者のサイトでは、このようにAFFINGER5での悩みなども記事にしているので、気になった方は、別の記事も見ていってください!

  • この記事を書いた人

たか

副業で稼ぎたくブログを始める▶︎全く伸びず1ヶ月で挫折▶︎ショックで目の前真っ暗▶︎manablogさんの動画を見てブログ再開▶︎ブログを猛勉強▶︎ ブログ最高月収56万▶︎コツコツと継続し総合収益300万達成▶︎『役立つ情報』をモットーに情報発信中。普段はTwitterにいます。

-AFFINGER, WordPress
-,

© 2022 takablog