PR AFFINGER6専用機能 専用パーツ 設定

カスタムボタンに 影&ドロップシャドウ をつける方法

AFFINGER6のカスタムボタンには、「影」または「ドロップシャドウ」をつけることができます。

「影」と「ドロップシャドウ」はまったく別物。

簡単に説明すると、

  • 「影」
    →ボタンが立体的に見える
  • 「ドロップシャドウ」
    →ボタンが浮いて見える

という違いがあります。

それではそれぞれの設定を解説していきます。

カスタムボタンに「影」をつける手順

カスタムボタンに影を追加するのは、ブロック編集の「レイアウト・デザイン設定」にて行います。

1.新しい段落に「/カスタムボタン」と入力し、カスタムボタンのブロックを挿入する。

または、ブロック追加の「+」を押して、「STINGER:カスタムボタン」を選択する。

注意

※デザインブロックのボタンではありません!

2.カスタムボタンの設定を下にスクロールしていくと、「レイアウト・デザイン設定」という項目があります。

そこに「影」のオン・オフがあるので、オン(右)にします。

設定

プレビュー

あとは、

  • テキスト設定
  • リンク設定
  • レイアウト・デザイン設定
  • ボーダー設定
  • 色設定

を変更してください。

カスタムボタンに「ドロップシャドウ」をつける手順

ドロップシャドウは「AFFINGER管理」にて設定します。

1.ダッシュボードを開き、「AFFINGER管理」→「全体設定」を選択します。

2.「カラーパターン」の項目下に「ドロップシャドウ」の項目があります。

そこにある「ボタンに透過シャドウを適応する(一括強制)」にチェックを入れます。

これで、カスタムボタンにドロップシャドウが反映されました。

プレビュー1

プレビュー2

ちょっとわかりにくいので、もう一発プレビューを載せておきます。

プレビュー3

補足

ドロップシャドウをつけると、強制的に影が反映されなくなります。

「カスタムボタンに影をつけておきたい!」

という場合は、ドロップシャドウを追加するのはやめておきましょう。

-AFFINGER6専用機能, 専用パーツ, 設定
-

PAGE TOP