ドロップシャドウとは、文字や画像に対する視覚効果のひとつで、対象の輪郭の脇に影が落ちているような演出を行うことです。
簡単に言うと、影を演出することで浮いているように見せられる効果のことです。
AFFINGER6は、ドロップシャドウを追加したい装飾ブロックを、ピンポイントで設定することができます。
- 段落スタイルのボックスとAFFINGER専用のボックスにメリハリをつけたい！
- ドロップシャドウありとなしをうまく使い分けたい！
- AFFINGER6を使っている他の人と差別化したい！
という方はぜひ参考にしてください。
ドロップシャドウを追加する方法
まずは、ドロップシャドウを一括で追加する手順を解説します。
ドロップシャドウが一括で反映されるのは、
- おすすめヘッダーカード
- まるもじ
- ミニふきだし
- おすすめ記事
- ステップ
- ポイント
- 見出し付きフリーボックス
- マイボックス
- クリップメモ
- こんな方におすすめ
この10個です。
１．WordPressのダッシューボードメニューにある「AFFINGER管理」→「全体設定」の順に開きます。
２．ドロップシャドウの項目にある「以下の要素にドロップシャドウを追加します」にチェックを入れて「Save」を押します。
これで先ほどあげた10個の装飾パーツにドロップシャドウが追加されているはずです。
ドロップシャドウを個別に追加する場合
ドロップシャドウを個別に反映させるには、適応ID及びクラスを指定して追加する必要があります。
たとえば「マイボックスのみドロップシャドウを追加したい！」という場合は、マイボックスの適応ID及びクラスを追加する。または「マイボックスと見出し付きフリーボックス、この2つだけドロップシャドウを追加したい！」という場合は、この2つの適応ID及びクラスを追加すればピンポイントで反映されます。
複数のクラスを追加する場合は、「,」で区切ればOK。
記事IDを「,」で区切って追加していく、それと同じ要領です。
１．先ほどと同じように、「全体設定」を開きます。
「AFFINGER管理」→「全体設定」
２．先ほどチェックを入れた「以下の要素にドロップシャドウを追加します」のチェックを外します。
「その他の適応ID及びクラス」にドロップシャドウを反映したいクラスを追加し「Save」をクリック。
例：会話ふきだし
すると、クラスを入力した装飾パーツだけにドロップシャドウが追加されます。
その他STINGER専用のブロックパーツのクラスは以下にまとめています。
| ブロック名 | 適応ID及びクラス |
|---|---|
| メモボックス | .clip-memobox |
| マイボックス | .st-mybox |
| 見出し付きフリーボックス | .freebox |
| バナーボックス | .st-header-flexwrap |
| 会話ふきだし | .st-kaiwa-hukidashi |
※さらにAFFINGER6で使えるパーツの適応ID及びクラス一覧は以下にまとめていますので、参考にしてください。
