要約：WordPressでボックスシャドウを追加する方法
ボタンや画像が背景に溶け込んでいる場合、ボックスシャドウはWordPressデザインで最も迅速な修正方法です。ここでは4つの方法を紹介します。
- SeedProd — コーディング不要のビジュアルビルダーで、ポイント＆クリックでシャドウプリセットを設定できます（最も簡単）。
- カスタムCSS — box-shadow CSSプロパティを記述し、任意のブロックにCSSクラスを適用します（より詳細な制御）。
- Drop Shadow Boxesプラグイン — コンテンツをシャドウで囲む無料のGutenbergブロックで、コーディングは不要です。
- CSS Hero — 要素ごとのシャドウを微調整できるプレミアムビジュアルCSSエディター（高度）。
ページが平坦に見える場合、通常はシャドウが欠けています。フィーチャーカードやCTAボタンにボックスシャドウを追加することは、WordPressで行える最も迅速なデザイン修正の1つです。
このガイドでは、WordPressでボックスシャドウを追加する簡単な4つの方法を共有します。これにより、最も重要なコンテンツを強調表示できます。
WordPressでボックスシャドウを追加すべき理由
ボックスシャドウは、オブジェクトが背景からわずかに浮き上がっているように見えるように、影を模倣することで、奥行きの微妙な錯覚を作り出します。このCSSシャドウ効果は、訪問者がコンテンツをどのように認識するかに劇的に影響を与える可能性があります。
私たちの脳は、ゲシュタルト心理学に根ざしたコントラストと分離に自然に引き寄せられます。ボックスシャドウを追加すると、要素間に視覚的な分離が生まれ、訪問者の目をウェブサイトの最も重要な領域に即座に誘導します。
これは、ボックスシャドウが実際にウェブサイトのパフォーマンスを向上させる可能性があることを意味します。
- コンバージョン率の向上：ボタンやフォームなどのコールトゥアクションを強調表示し、クリックとコンバージョンを促進します。
- 画像の強調：画像を背景から際立たせ、注目を集め、そのインパクトを高めます。
- ユーザーエクスペリエンスの向上：より視覚的に魅力的で整理されたレイアウトを作成し、ウェブサイトのナビゲーションをより簡単で楽しいものにします。
以下に、これらの効果をWordPressサイトに追加する簡単な4つの方法を紹介します。
方法1：SeedProdを使用してWordPressでボックスシャドウを追加する（最も簡単）
ボックスシャドウの力を理解したところで、作成してみましょう。この方法は、視覚的な学習者やコード不要のソリューションを求める人に最適です。ここでは、SeedProdを使用して、数回クリックするだけでスタイリッシュなボックスシャドウを追加します。
SeedProdは、100万人以上のユーザーを持つ最高のWordPressウェブサイトビルダーです。ドラッグ＆ドロップのビジュアルビルダーを使用すると、コンバージョン率の高いランディングページやウェブサイトを作成し、コードを書かずにデザインのあらゆる部分をカスタマイズできます。
ポイント＆クリックで、あらゆるデザイン要素にボックスシャドウを追加することもできます。
まず、WordPressウェブサイトにSeedProdをインストールして有効化します。詳細については、SeedProdのインストール方法をご覧ください。
プラグインを有効化した後、WordPressダッシュボードから SeedProd » ランディングページ に移動します。次に、 新しいランディングページを追加 ボタンをクリックします。
ここでは、ページにあらかじめ用意された、完全にカスタマイズ可能なデザインを選択します。SeedProdのテンプレートを使用すると、ブランドに合ったデザインを簡単に見つけることができ、あらゆる詳細を調整して独自のページを作成できます。
上部にあるフィルターをクリックして閲覧し、テンプレートにカーソルを合わせてチェックマークアイコンをクリックして選択します。
次に、ページの名前を入力します。SeedProdは自動的にURLを設定します。ページに関連するキーワードをURLに含めることは、WordPressの検索エンジン最適化を改善するのに役立つため、良い考えです。
生成されたURLを保持したくない場合は、「ページURL」フィールド内をクリックして、独自のURLを入力してください。
次に、 保存してページ編集を開始 ボタンをクリックして、ページビルダーインターフェイスでデザインを起動します。
SeedProdのドラッグ＆ドロップビルダーは、右側にデザインのライブプレビューを表示します。左側には、ページにドラッグできるブロックのパネルがあります。
追加したいブロックを見つけたら、クリックしてドラッグし、ライブプレビューにドロップします。その後、ブロックを選択して、その外観と設定をカスタマイズできます。
たとえば、見出しブロックをクリックすると、独自のテキストを入力したり、フォントサイズ、色、配置を変更したりできます。
ブロックをドラッグ＆ドロップしてページ上で移動することもできます。詳細な手順については、WordPressでランディングページを作成する方法をご覧ください。
ブロックにボックスシャドウを追加したい場合は、そのブロックの設定にある詳細タブをクリックする必要があります。
この例では、各フィーチャーボックスにボックスシャドウを追加したいと思います。そのため、列の設定をクリックして、詳細タブを選択します。
次に、「シャドウ」ドロップダウンメニューをクリックし、ヘアライン、小、中、大、特大などのオプションを選択します。
シャドウを選択すると、プレビューが自動的に更新されます。最適なスタイルが見つかるまで、さまざまなスタイルを試すことができます。
あらかじめ用意されたスタイルが機能しない場合は、「カスタム」オプションを選択します。このオプションを選択すると、ぼかし、広がり、色、シャドウの位置などを変更するための新しいカスタマイズが開きます。
最終的に、2倍特大オプションを選択し、グリッド内の各ブロックで同じプロセスを繰り返しました。
ボックスシャドウを追加した後、さらにブロックやシャドウを追加して、ページのカスタマイズを続けることができます。
すべてが希望どおりに見えるようになったら、右上隅の「保存」をクリックし、「公開」を選択してページを公開します。
新しいボックスシャドウが適用された、最終的なページの表示例を以下に示します。
WordPressボタンにボックスシャドウを追加するには、SeedProdでボタンブロックを選択し、「詳細」タブを開いて、上記と同じシャドウ設定を適用します。
方法2：CSSコードを使用してWordPressでボックスシャドウを追加する（より詳細な制御）
ウェブサイトのすべての要素にボックスシャドウを追加すると、煩雑に見えることがあります。代わりに、重要なコンテンツを強調し、デザインの一貫性を保つために使用するのが最善です。
これを実現する最も簡単な方法は、CSSでボックスシャドウのスタイルを設定することです。私はWPCodeを使用して、これを非常に簡単にします。
WPCodeは人気のコードスニペットプラグインで、テーマファイルを直接編集せずにカスタムコードをWordPressサイトに追加できます。これにより、整理整頓され、誤ってエラーを回避できます。
まず、無料のWPCodeプラグインをインストールして有効化する必要があります。完全な手順については、WordPressプラグインのインストール方法に関するこの記事を参照してください。
プラグインを有効化した後、WordPress管理画面から「コードスニペット » +スニペットを追加」に移動します。
このページには、ウェブサイトに追加できる既製のカスタムコードスニペットが表示されます。独自のコードを追加するには、「カスタムコードを追加」オプションにカーソルを合わせ、「カスタムスニペットを追加」をクリックします。
ページが読み込まれたら、スニペットを識別しやすくするために名前を入力します。次に、「コードタイプ」ドロップダウンメニューで「CSSスニペット」オプションを選択します。
次に、コードエディタに次のコードスニペットを追加します。
.custom-box-shadow {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}スニペットのpx値を変更して、作成したいシャドウをカスタマイズできます。
何が起こっているのかを正確に理解するために、これらの数値を分解してみましょう。
- .custom-box-shadow: これは、作成しているCSSクラスの名前です。これを特定の要素にボックスシャドウを適用するために使用します。
- Box-shadow: これは、ボックスシャドウCSSプロパティを定義しようとしていることをブラウザに伝えます。
- 5px 5px: これら最初の2つの値は、シャドウの水平および垂直オフセットです。最初の値は右に移動し、2番目の値は下に移動します。これらの値を変更して、シャドウの位置を調整してください。
- 10px: これはぼかし半径です。数値を大きくすると、より柔らかくぼやけたシャドウになります。数値を小さくすると、シャープになります。
- 0px（スプレッド半径）: これはスプレッド半径です。正の値はシャドウを外側に拡張します。0pxはタイトに保ちます。使用したい場合は、ぼかし値とrgbaカラーの間に挿入してください。
- rgba(0, 0, 0, 0.2): これはシャドウの色を設定します。ここでは半透明の黒を使用しています。最後の数値（アルファ）は透明度を制御します。0は完全に透明、1は完全に不透明です。
最初の値として「inset」を追加して、要素の外側ではなく内側にシャドウを作成することもできます。
ボックスシャドウが表示されない場合は、次の3つの点を確認してください。
- CSSセレクターが正しい要素をターゲットにしていない可能性があります。ブラウザの開発者ツールを使用して、クラスが適用されている要素を確認してください。
- 別のスタイルシートがシャドウを上書きしている可能性があります。競合を解決できない場合は、最終手段として!importantを追加してください。
- overflow:hiddenが設定された親コンテナは、シャドウをクリップします。そのプロパティを削除するか、コンテナを調整してください。
スニペットに満足したら、下にスクロールして「挿入」セクションでWPCodeがスニペットを追加する場所を定義します。ウェブサイト全体で使用するには、「自動挿入」オプションを選択し、場所を サイト全体ヘッダーに設定します。
次に、ページの上部に戻り、「非アクティブ」トグルを「アクティブ」の位置に切り替えます。その後、 スニペットを保存 ボタンをクリックしてください。
次のステップは、カスタムCSSクラスをWordPressのブロックに追加することです。これを行うには、WordPressブロックエディターで任意のブロックを選択し、左側のメニューで「高度」をクリックします。
「追加CSSクラス」フィールドに「custom-box-shadow」と入力します。
次に、投稿に満足したら、「更新」または「公開」をクリックできます。その後、投稿にアクセスして、ボックスシャドウが機能していることを確認できます。
方法3：無料プラグインを使用してボックスシャドウを追加する（簡単な代替手段）
コードスニペットの操作に慣れていない場合は、ドロップシャドウボックスを使用してシャドウを作成することをお勧めします。この無料WordPressプラグインを使用すると、WordPressの組み込みブロックエディターを使用して、任意のブロックにボックスシャドウを追加できます。
まず、ウェブサイトにプラグインをインストールして有効化します。設定可能な設定がないため、すぐにプラグインを使用できます。
次に、WordPressの投稿またはページを作成または編集します。エディター内で、プラス（+）アイコンをクリックして新しいブロックを追加し、「ドロップシャドウ」を検索します。
表示されたら、クリックしてページに追加します。空のブロックにドロップシャドウが表示されるので、コンテンツを追加しましょう。
ドロップシャドウブロック内で、プラスアイコンをクリックし、ブロックを追加して、通常どおり設定します。たとえば、画像ブロックを追加し、WordPressメディアライブラリから画像を選択しました。
次に、ブロックをクリックして、左側のサイドバーにあるボックスシャドウ設定を表示します。
シャドウの幅はWordPressによって自動的に設定されますが、「幅」ドロップダウンボックスから「ピクセル」または「％」を選択して変更できます。次に、スライダーを使用して調整できます。
また、カーブしたエッジや「遠近感」効果などの他の効果にも気づくでしょう。それらをプレビューするには、「効果」ドロップダウンを開き、リストから1つを選択します。
内側と外側のシャドウ、境界線の色、境界線のピクセル、角丸など、試せるその他のオプションもあります。
ボックスシャドウに満足したら、他のブロックでこれらの手順を繰り返すか、「更新」または「公開」をクリックして変更をライブにします。
この方法でボックスシャドウがどのように見えるかは次のとおりです。
方法4：CSS Heroを使用してボックスシャドウを追加する（高度）
コードを扱うことに慣れていないが、高度なボックスシャドウを作成したい場合は、CSS Heroが優れた選択肢です。
このプレミアムプラグインを使用すると、コードを一行も書かずにWordPressテーマのあらゆる部分を微調整できます。各ブロックにユニークな影を作成することもできるため、サイト全体でさまざまな影の効果を試すのに理想的です。
まず、CSS Heroプラグインをインストールして有効化します。次に、製品のアクティベーション手順に従って、CSS HeroアカウントをWordPressサイトにリンクします。
次に、管理バーの「CSS Heroでカスタマイズ」オプションをクリックして、CSS Heroエディターを開きます。
デフォルトでは、CSS Heroエディターにはウェブサイトのライブプレビューと、ウェブデザインの各要素を編集できるパネルが表示されます。
ボックスシャドウを追加したいページにいない場合は、画面上部のアイコンを使用して、「選択」モードから「ナビゲート」モードに切り替えます。
これで、目的のページに移動し、選択モードに戻ることができます。
次に、画像、ボタン、段落、その他のコンテンツなど、ボックスシャドウを追加したいプレビュー内の要素をクリックします。
それが完了したら、左側のパネルで「その他」をクリックします。
デフォルトでは、ボックスシャドウオプションは「なし」と表示されているため、「影を作成」ボタンをクリックします。
まず、影が表示される場所を変更します。「影の位置」設定で、「内側」または「外側」を選択できます。
次に、「向き」セクションで影の角度を調整します。円をドラッグするだけで、ボックスシャドウの角度を目的の位置に設定できます。
最後に、スポイトツールを使用して影の色を変更し、スライダーを使用して影のぼかしと広がりを制御します。
同じアプローチを使用して、ウェブサイトの他の領域にもボックスシャドウを追加します。次に、すべての見た目に満足したら、「保存して公開」ボタンをクリックします。
次に、変更内容を確認して、ウェブサイトでどのように表示されるかを確認します。
よくある質問
WordPressのボックスシャドウとは何ですか？
WordPressのボックスシャドウは、画像、ボタン、コンテンツブロックなどの要素に適用されるCSSシャドウ効果であり、奥行きを与えます。これにより、要素がページ背景からわずかに浮き上がっているように見えます。ビジュアルページビルダー、CSSスニペット、または専用プラグインを使用して、テーマファイルを編集せずにこれらを追加できます。
プラグインなしでWordPressにボックスシャドウを追加するにはどうすればよいですか？
プラグインなしでWordPressにボックスシャドウを追加するには、カスタムCSSスニペットを作成します。「外観」>「カスタマイズ」>「追加CSS」でbox-shadowルールを追加するか、WPCodeを使用してスニペットを管理します。次に、ブロックエディターの「高度な設定」パネルを通じて、任意のブロックにCSSクラス名を適用します。
ボックスシャドウとドロップシャドウの違いは何ですか？
ボックスシャドウは要素の長方形の境界ボックスに従い、要素の形状に関係なく常に長方形の影を生成します。ドロップシャドウはCSSフィルタープロパティを使用し、要素の透明な領域を含む実際の輪郭に従います。カード、ボタン、画像など、ほとんどのWordPressのユースケースでは、ボックスシャドウが適しています。不規則な形状や切り抜き形状の影が必要な場合は、ドロップシャドウを使用してください。
WordPressで画像にボックスシャドウを追加できますか？
はい。SeedProdでは、画像ブロックを選択し、[高度な設定]タブを開いて、[影]ドロップダウンからプリセットを選択します。CSSでは、img要素またはカスタムCSSクラスを対象とするbox-shadowルールを適用します。Drop Shadow Boxesプラグインは、ネイティブのWordPressエディターを使用して画像ブロックを影で囲みます。
WordPressウェブサイトをカスタマイズするその他の方法
このガイドで説明した方法は、WordPressにボックスシャドウ効果を追加するのに最適です。しかし、よりクリエイティブな効果を追加したい場合は、次のガイドが役立ちます。
- WordPressで余白を変更する方法 — コンテンツの周りのスペースをカスタマイズして、洗練されたプロフェッショナルな外観にします。
- WordPressで画像にテキストを追加する方法 — 画像に直接、印象的なグラフィックと行動喚起を作成します。
- WordPressでAnimated Particle.js背景を作成する方法 — 印象的なアニメーション背景で、ダイナミックなセンスを加えます。
- WordPressでページをフル幅にする方法 — サイドバーから解放され、没入感のあるフル幅のページレイアウトを作成します。
- WordPressで背景画像を暗くする方法 — テキストを読みやすくし、暗くなった背景画像で奥行き感を演出します。
- WordPressでテキストアニメーションを作成する方法 — 印象的なテキストアニメーション効果で訪問者の注意を引きます。
- WordPressでFancyセクション区切りを作成する方法 — スタイリッシュな形状の区切りでコンテンツを視覚的に分離します。
このガイドがWordPressでボックスシャドウを追加する方法を学ぶのに役立ったことを願っています。これで、ウェブサイトのデザインを即座に改善し、最も重要なコンテンツを強調することができます。
WordPressスキルをさらに向上させる準備はできましたか？SeedProdを使い始め、コーディングなしでコンバージョン率の高いランディングページとウェブサイトを作成しましょう。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
