【AFFINGER5カスタマイズ】記事のパーツに影をつける方法

AFFINGER5を使っていると、下記の悩みに直面しました。

• ボックスデザインが平凡すぎる。
• かっこよくしたい。

そんなとき、AFFINGER5を使っている人のブログを拝見したら、なんか影がついててカッコいい。

普通のボックスなら、下記のような感じになります。

なんか立体感もなく、平凡な感じです。

それを影を付けて立体感があるようにすると下記のようになります。

画像ではわかりづらいですが、実際のボックスで見ると、下の方に影がついています。

本記事では、上記のような影の作り方を詳しく解説しています。

WordPress初心者の方でも簡単に設定することができます。

【AFFINGER5カスタマイズ】｜ボックスに影を付ける

まず、ボックスに影を付ける方法を4ステップで解説します。

WordPressの左のバーからAFFINGER5 管理をクリック

左のバーからAFFINGER5 管理を探し、クリックします。

管理の中にデザインがあるのでクリック

ドロップシャドウを探し、以下の要素にドロップシャドウを追加しますにチェックを付ける

SAVEボタンをクリックし完了

4ステップでできるので、初めてAFFINGER5に触る方でも簡単に出来てしまいます。

【AFFINGER5カスタマイズ】｜影がつくボックスの種類

上記のボックスに影がつきます。

【AFFINGER5カスタマイズ】記事のパーツに影をつける方法 まとめ

ボックスに影を付ける方法は4ステップで簡単にできます。

【before】

【after】

写真ではわかりづらいが、実際表示すると下記の感じになります。

影が付くと、立体感が生まれ、ボックスを目立たせる効果があります。

目立つとそこで止まってくれるので、滞在時間も増えます。

簡単にできるので、自分のブログで試してみて、影カッコいいとなったら使ってみてください。

ここまで読んでいただきありがとうございました。