こんにちは "osaboo"
です。"@osaboo_Bot"
この記事で解決できる悩み
この記事では、これらのお悩みを解決します。
「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。
AFFINGER7で「影」をつけるメリットとは？
- 見た目に立体感が出て引き締まる
- ブロックに影（シャドウ）をつけることで、平坦なデザインに立体感が加わり、全体の見た目がグッと引き締まります。シンプルなデザインでも、影を入れるだけでプロっぽい印象になります。
- 強調・注目ポイントを目立たせやすい
- 読者に特に見てほしいポイント、注意書き、レビューのまとめなどに影をつけることで、自然と視線を誘導できます。重要な情報が埋もれず、しっかりと伝わります。
- 読みやすく印象的なデザインに
- 記事にメリハリが生まれ、視覚的にも読みやすくなります。特に文章量の多い記事では、適度な影を入れることで読者のストレスを減らす効果も期待できます。
AFFINGER7でブロックに影を付ける方法は2つ
AFFINGER7でブロックに影（シャドウ）を付ける方法は、次の2つです。
- AFFINGER7の標準機能（ドロップシャドウ）を使う方法
- CSSを使って自由に影を付ける方法
手軽に影を付けたい方は、AFFINGER7の標準機能がおすすめです。設定するだけで簡単にブロックへ影を追加できます。
一方で、影の大きさや色、ぼかし具合などを細かく調整したい場合は、CSSを使う方法が向いています。
それぞれの特徴を理解して、自分に合った方法を選びましょう。
AFFINGER7の標準機能（ドロップシャドウ）で影を付ける方法
AFFINGER7には、ブロックに影（シャドウ）を付けられる「ドロップシャドウ」機能が用意されています。
CSSを書く必要がないため、初心者でも簡単にブロックへ影を追加できるのが特徴です。
設定場所
Menu『WordPress管理画面 → AFFINGER管理 → 全体設定 』から行えます。
まずはドロップシャドウを設定し、実際にブロックへ適用してみましょう。
ドロップシャドウを設定する
まずは、AFFINGER7のドロップシャドウを設定しましょう。
ここでは、影の色やぼかし具合、表示位置などを設定できます。
設定を変更したら、「Save」をクリックして保存しましょう。
□ ボタンに透過シャドウを適応する（一括強制）
この項目を有効にすると、サイト内のすべてのボタンに透過シャドウが適用されます。
記事全体に統一感のあるデザインを取り入れたい場合におすすめです。
投稿・固定ページのエディター画面で、ボタンごとに影の表示・非表示を個別に設定できます。必要に応じて使い分けましょう。
□ 以下の要素にドロップシャドウを追加します
チェックを入れると、以下のブロック全てに影を付けることができます。
おすすめヘッダーバナー・記事パーツ（まるもじ・ミニふきだし・おすすめ記事・ステップ・ポイント・タイトル付きフリーボックス・マイボックス・クリップメモ・こんな方におすすめ）
適応ID及びクラス（特定のブロック・エリアを選んでドロップシャドウを追加）
注意『□ 以下の要素にドロップシャドウを追加します』のチェックを外します。
- 「その他の適応ID及びクラス：」の入力例
- 『.st-kaiwa-hukidashi,.st-header-flexwrap,.freebox,.st-mybox,.clip-memobox,.main』
主な適応ID及びクラスは以下の通りです。（参考にしてください）
| ブロック名称 | 適応ID及びクラス |
|---|---|
| AFFINGER：会話ふきだし | .st-kaiwa-hukidashi |
| AFFINGER：バナー風ボックス | .st-header-flexwrap |
| AFFINGER：タイトル付きフリーボックス | .freebox |
| AFFINGER：マイボックス | .st-mybox |
| AFFINGER：メモ | .clip-memobox |
| メインエリア | main |
- 利用できるID・クラスは、テーマや使用しているブロックによって異なる場合があります。
表示イメージと設定項目の違いは以下の通りです。好みに合わせてチェックを入れてください。
影無し
影有り
ブロックの影だけでなく、サイト全体のデザインを統一したい方は、「AFFINGER7の全体カラー設定方法」や「AFFINGER7の初期設定」もあわせてご覧ください。
CSSでブロックに影を付ける方法
AFFINGER7では、標準機能のドロップシャドウだけでなく、CSSを使って自由に影を付けることもできます。
CSSを利用すれば、影の色や大きさ、ぼかし具合などを細かく調整できるため、自分好みのデザインに仕上げられます。
また、特定のブロックだけに影を付けたり、ホバー時に影を変化させたりと、標準機能ではできないカスタマイズも可能です。
ここからは、CSSを使ってブロックに影を付ける方法を紹介します。
CSSクラス名を指定してブロックに影を付ける方法
影をつけたいブロックに「追加 CSS クラス名」を指定するだけで反映させる方法をご紹介します。【AFFINGER限定】
投稿（エディター）画面で、対象ブロックを選択し、画面右側の『設定 → ブロック（タブ） → 高度な設定 → 追加 CSS クラス』の窓に『st-box-shadow』と入力します。
これで、AFFINGER管理で設定できるドロップシャドウが反映されます。
⬅︎
CSSで影を付ける基本手順
AFFINGER7でCSSを使ってブロックに影を付ける場合は、以下の流れで設定します。
- 影を付けたいブロックにクラス名を追加する
- 「追加CSS」に影用のCSSコードを記述する
- プレビューで表示を確認する
まずは、影を付けたいブロックに専用のクラス名を設定します。
投稿（エディター）画面で対象のブロックを選択し、右側の設定パネルにある「高度な設定」を開きます。
「追加CSSクラス」の項目に、任意のクラス名を入力します。
今回は例として、以下のクラス名を使用します。
custom-shadow基本のCSSコード（シンプルな影）
カスタマイザーの「追加 CSS」に貼り付けるコードを準備します。
以下のCSSは、自然な立体感を出せるシンプルな影のスタイルです。
どんなデザインにも馴染みやすく、初心者さんにも扱いやすくなっています。「コピペOKです」
.custom-shadow {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
padding: 1em;
background: #fff;
border-radius: 6px;
}これで「custom-shadow」のクラスを設定したブロックに影が表示されます。
box-shadowでは、以下の項目を調整できます。
| 設定値 | 意味 |
|---|---|
| 0 | 横方向のずれ |
| 2px | 縦方向のずれ |
| 4px | ぼかしの強さ |
| rgba() | 影の色と透明度 |
丸み・背景色との組み合わせテクニック
影と合わせて border-radius（角の丸み）や background-color（背景色）を調整すると、より柔らかく印象的なデザインにできます。白背景に薄いグレー影を加えるだけでも雰囲気が一変します。
スマホ表示での注意点
影が強すぎると、スマホ画面では逆に読みづらくなることがあります。モバイル用のメディアクエリで影の強さを調整するのがおすすめです。
影を付けたいブロックにCSSクラスを指定する方法
影を付けたいブロックにCSSクラスを指定
カスタマイザーの「追加 CSS」へのコードを貼り付けます。
カスタマイザーを起動します。
Menu『WordPress管理画面 → 外観 → カスタマイズ』をクリックします。
「カスタマイザー」画面で以下の手順で進み、CSSコードを貼り付けます。
『追加 CSS』をクリック
➡︎
CSSコードを貼り付け
⬇︎
- 編集後『公開』ボタンを押します。
影をつけたいブロックへのクラス指定方法
投稿（エディター）画面で、対象ブロックを選択し、画面右側の『設定＞ブロック（タブ）＞高度な設定＞追加 CSS クラス』の窓に『shadow-box』と入力します。
これで、先ほどのCSSが反映されます。
⬅︎
ホバー時に影を変化させる方法（オシャレな影）
このCSSは、ホバー時にブロックがふわっと浮かび上がるように見せるアニメーション効果付きの影です。
おしゃれさと動きを取り入れたい方におすすめです。
ブロックにマウスカーソルを乗せたときだけ影を強くすると、立体感のある動きを演出できます。
特に、ボタンやブログカード、CTAボックスなど、クリックを促したいデザインによく使われるテクニックです。
ここの例として、以下のクラス名を使用します。
floating-shadow以下のCSSコードを、カスタマイザーの「追加CSS」に貼り付けます。
.floating-shadow {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.floating-shadow:hover {
transform: translateY(-4px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}transitionを指定することで、影がゆっくり変化し、自然なアニメーションになります。
また、box-shadowの数値を変更すれば、ホバー時の影の強さを自由に調整できます。
ただし、影を強くしすぎるとデザイン全体のバランスが崩れることがあります。 まずは控えめな設定から試し、サイトの雰囲気に合わせて調整するのがおすすめです。
投稿（エディター）画面では、『追加 CSS クラス』の窓に『floating-shadow』と入力します。
ブロックに影が付かないときの対処法
CSSを追加してもブロックに影が表示されない場合は、設定方法や入力内容に原因があることがほとんどです。
以下のポイントを確認してみましょう。
CSSクラス名が一致しているか確認する
ブロックに設定したCSSクラス名と、CSSコードに記述したクラス名が完全に一致しているか確認しましょう。
例えば、ブロックに
custom-shadowと設定した場合は、CSSも以下のように記述する必要があります。
.custom-shadow {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}クラス名のスペルやハイフンの有無が異なると、CSSは適用されません。
キャッシュを削除して再読み込みする
CSSを変更しても表示が変わらない場合は、ブラウザやキャッシュ系プラグインが古いCSSを表示している可能性があります。
ページをスーパーリロード（Ctrl + F5、Macでは Shift + ⌘ + R）したり、キャッシュを削除したりして、最新の状態で確認してみてください。
他のCSSが優先されていないか確認する
テーマやプラグインで同じブロックにCSSが設定されていると、追加したCSSが反映されないことがあります。
その場合は、ブラウザの開発者ツールで適用されているCSSを確認し、必要に応じてセレクタを見直したり、!importantを使用したりして調整しましょう。
装飾機能とCSSの使い分けのポイント
AFFINGER7では、標準機能とCSSのどちらでも影をつけることができますが、目的や操作のしやすさによって使い分けるのがコツです。
たとえば「とにかく簡単にサッと影をつけたい」という場合は、標準機能を使うのがおすすめです。スタイルを選ぶだけで影付きのボックスが完成するので、初心者でも安心して使えます。
一方、「影の濃さや角の丸み、ホバー時の動きなど細かく調整したい」ときは、CSSを使う方が自由度が高く、細かいデザインに対応できます。
また、サイト全体のデザインに統一感を持たせたいときは、基本のCSSを決めておき、必要に応じて装飾機能を補助的に使うとバランスよく仕上がります。
影の使いすぎに注意！バランスよく使おう
影をつけるとデザインに立体感が出て、読みやすくなるメリットがありますが、使いすぎると逆効果になることもあります。
たとえば、すべてのブロックに濃い影をつけてしまうと、画面がごちゃごちゃして見えたり、視線が散ってしまったりして、かえって読みにくくなってしまいます。
本当に強調したい部分だけに絞って影をつけることで、視線誘導がしやすくなり、メリハリのあるレイアウトになります。
また、同じページ内で影のスタイルや濃さ、角の丸みがバラバラだと、全体のデザインに統一感がなくなってしまいます。基本のスタイルを決めて、それをベースに調整するとバランスが取りやすくなります。
影は「少し足すくらい」がちょうどよく、引き算のデザインを意識すると洗練された印象になります。
まとめ！AFFINGER7でブロックに影をつける方法｜CSSとドロップシャドウ設定を解説
AFFINGER7では、標準機能のドロップシャドウだけでなく、CSSを使うことでブロックの影を自由にカスタマイズできます。
CSSクラスを指定して「追加CSS」にコードを貼り付けるだけなので、一度設定方法を覚えれば、画像やボックス、プロフィールカードなど、さまざまなブロックに同じデザインを適用できます。
また、影の大きさや色、ぼかし具合を調整したり、ホバー時に変化するアニメーションを追加したりすることで、よりおしゃれで見やすいサイトに仕上げることも可能です。
まずはシンプルな影から試し、サイト全体のデザインに合わせて少しずつアレンジしてみてください。CSSを活用すれば、AFFINGER7のデザインの幅がさらに広がります。
