AFFINGER6専用機能 設定

ドロップシャドウの「適応ID及びクラス」を個別に設定する方法

ドロップシャドウとは、文字や画像に対する視覚効果のひとつで、対象の輪郭の脇に影が落ちているような演出を行うことです。

簡単に言うと、影を演出することで浮いているように見せられる効果のことです。

AFFINGER6は、ドロップシャドウを追加したい装飾ブロックを、ピンポイントで設定することができます。

  • 段落スタイルのボックスとAFFINGER専用のボックスにメリハリをつけたい!
  • ドロップシャドウありとなしをうまく使い分けたい!
  • AFFINGER6を使っている他の人と差別化したい!

という方はぜひ参考にしてください。

ドロップシャドウを追加する方法

まずは、ドロップシャドウを一括で追加する手順を解説します。

ドロップシャドウが一括で反映されるのは、

  • おすすめヘッダーカード
  • まるもじ
  • ミニふきだし
  • おすすめ記事
  • ステップ
  • ポイント
  • 見出し付きフリーボックス
  • マイボックス
  • クリップメモ
  • こんな方におすすめ

この10個です。

手順

1.WordPressのダッシューボードメニューにある「AFFINGER管理」→「全体設定」の順に開きます。

2.ドロップシャドウの項目にある「以下の要素にドロップシャドウを追加します」にチェックを入れて「Save」を押します。

これで先ほどあげた10個の装飾パーツにドロップシャドウが追加されているはずです。

ドロップシャドウを個別に追加する場合

ドロップシャドウを個別に反映させるには、適応ID及びクラスを指定して追加する必要があります。

たとえば「マイボックスのみドロップシャドウを追加したい!」という場合は、マイボックスの適応ID及びクラスを追加する。または「マイボックスと見出し付きフリーボックス、この2つだけドロップシャドウを追加したい!」という場合は、この2つの適応ID及びクラスを追加すればピンポイントで反映されます。

複数のクラスを追加する場合は、「,」で区切ればOK。

記事IDを「,」で区切って追加していく、それと同じ要領です。

手順

1.先ほどと同じように、「全体設定」を開きます。

「AFFINGER管理」→「全体設定」

2.先ほどチェックを入れた「以下の要素にドロップシャドウを追加します」のチェックを外します。

「その他の適応ID及びクラス」にドロップシャドウを反映したいクラスを追加し「Save」をクリック。

例:会話ふきだし

すると、クラスを入力した装飾パーツだけにドロップシャドウが追加されます。

その他STINGER専用のブロックパーツのクラスは以下にまとめています。

ブロック名適応ID及びクラス
メモボックス.clip-memobox
マイボックス.st-mybox
見出し付きフリーボックス.freebox
バナーボックス.st-header-flexwrap
会話ふきだし.st-kaiwa-hukidashi

※さらにAFFINGER6で使えるパーツの適応ID及びクラス一覧は以下にまとめていますので、参考にしてください。

購入特典

-AFFINGER6専用機能, 設定
-