ウェブサイトの要素をポップにして、訪問者の注目を集めたいですか？シンプルなボックスシャドウを追加するだけで、画像、ボタン、コンテンツセクションを目立たせることができ、デザインを即座に改善することができます。
このガイドでは、WordPressでボックスシャドウを追加する4つの簡単な方法をご紹介します。
なぜWordPressでボックスシャドウを追加する必要があるのか？
ボックスシャドウは、オブジェクトが落とす影を模倣することで、背景から少し浮き上がって見えるような、微妙な奥行きの錯覚を生み出します。このシンプルな効果によって、訪問者のコンテンツに対する印象を劇的に変えることができます。
私たちの脳は、ゲシュタルト心理学に根ざした原則であるコントラストと分離に自然に引き寄せられます。ボックスシャドウを追加することで、要素間の視覚的な分離が生まれ、訪問者の視線を瞬時にウェブサイトの最も重要なエリアに誘導することができます。
つまり、ボックスシャドウはウェブサイトのパフォーマンスを向上させることができるのだ：
- コンバージョンを高める：クリックやコンバージョンを促すために、ボタンやフォームなどのコールトゥアクションを強調しましょう。
- 画像を強調する：画像を背景から浮き上がらせ、注目を集め、インパクトを強める。
- ユーザーエクスペリエンスの向上：より視覚的に魅力的で整理されたレイアウトを作成し、ウェブサイトをより簡単で楽しいものにします。
以下では、WordPressサイトにこれらのエフェクトを追加する4つの簡単な方法をご紹介します。
方法1：WordPressでページビルダーを使ってボックスシャドウを追加する（最も簡単）
ボックス・シャドウの威力を理解したところで、実際に作ってみよう。この方法は、視覚学習者やコード不要のソリューションを求める人に最適です。SeedProdを使って、数クリックでスタイリッシュなボックスシャドウを追加してみましょう。
SeedProdは、100万人以上のユーザーを持つ最高のWordPressウェブサイトビルダーです。ドラッグ＆ドロップのページビルダーで、コードを書くことなく、コンバージョンの高いランディングページやウェブサイトを作成し、デザインの隅々までカスタマイズすることができます。
また、ポイント＆クリックでデザイン要素にボックスシャドウを追加することもできます。
まず、WordPressウェブサイトにSeedProdをインストールし、有効化してください。詳しくは、SeedProdのインストール方法をご覧ください。
プラグインを有効化した後、WordPressのダッシュボードからSeedProd " Landing Pagesに移動します。そして、新しいランディングページを追加ボタンをクリックします。
ここでは、あらかじめ用意された、完全にカスタマイズ可能なページのデザインを選択します。SeedProdのテンプレートは、あなたのブランドに合った外観を簡単に見つけることができ、あなた自身のものにするために細部まで微調整することができます。
上部のフィルターをクリックしてブラウズし、テンプレートにカーソルを合わせてチェックマークアイコンをクリックして選択します。
ページの名前を入力すると、SeedProdが自動的にURLを設定します。URLにページに関連するキーワードを含めると、WordPressの検索エンジン最適化を向上させることができます。
生成されたURLを保持したくない場合は、'ページURL'フィールド内をクリックし、独自のURLを入力してください。
Save and Start Editing the Page（保存してページの編集を開始する）ボタンをクリックして、ページビルダーのインターフェイスでデザインを開始することができます。
SeedProdのドラッグ＆ドロップビルダーは、右側にデザインのライブプレビューを表示します。左側には、ページにドラッグできるブロックのパネルがあります。
追加したいブロックを見つけたら、クリックしてドラッグし、ライブプレビューにドロップします。その後、ブロックを選択して外観や設定をカスタマイズできます。
例えば、見出しブロックをクリックすると、独自のテキストを入力し、フォントサイズ、色、配置を変更することができます。
また、ドラッグ＆ドロップでページ内のブロックを移動させることもできます。詳しい手順については、WordPressでランディングページを作成する方法のガイドをご覧ください。
ブロックにボックスシャドウを追加したい場合は、そのブロックの設定で「詳細設定」タブをクリックする必要があります。
この例では、各フィーチャー・ボックスにボックス・シャドウを追加したい。そこで、列の設定をクリックし、詳細設定タブを選択する。
次に、「シャドウ」のドロップダウンメニューをクリックし、「ヘアライン」、「小」、「中」、「大」、「X大」などのオプションを選択する。
シャドウを選択すると、プレビューが自動的に更新されます。いろいろなスタイルを試すことができます。
あらかじめ用意されているスタイルが合わない場合は、「カスタム」オプションを選んでください。このオプションは、ぼかし、広がり、色、影の位置などを変更する新しいカスタマイズを開きます。
結局、2倍のラージ・オプションを選び、グリッドの各ブロックに対してこのプロセスを繰り返した。
ボックスシャドウを追加した後、さらにブロックやシャドウを追加してページのカスタマイズを続けることができます。
すべての見た目に満足したら、右上の「保存」をクリックし、「公開」を選択してページを公開します。
以下は、新しいボックス・シャドウを使った最終的なページの例である：
方法2：CSSコードでWordPressにボックスシャドウを追加する（よりコントロールしやすくする）
ウェブサイト上のすべての要素にボックスシャドウを追加すると、ごちゃごちゃした印象になってしまいます。むしろ、重要なコンテンツを強調し、デザインの一貫性を保つために使うのがベストです。
最も簡単な方法は、CSSでボックス・シャドウのスタイルを設定することです。
WPCodeは、テーマファイルを直接編集することなく、WordPressサイトにカスタムコードを追加できる人気のコードスニペットプラグインです。これにより、整理整頓が保たれ、偶発的なエラーを避けることができます。
最初に行う必要があるのは、無料のWPCodeプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法をご覧ください。
プラグインを有効化した後、WordPressの管理画面からCode Snippets " +Add Snippetsにアクセスしてください。
このページでは、あなたのウェブサイトに追加するための、あらかじめ用意されたカスタムコードスニペットを見ることができます。独自のコードを追加するには、「カスタムコードを追加」オプションにカーソルを合わせ、「カスタムスニペットを追加」をクリックします。
ページが読み込まれたら、スニペットを識別するために名前を入力します。次に、'Code Type'ドロップダウンメニューで'CSS Snippet'オプションを選択します。
次のコード・スニペットをコード・エディターに追加する：
.custom-box-shadow {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}スニペット内のpx値を置き換えて、作りたい影をカスタマイズできる。
何が起こっているのかを正確に知るために、この数字を分解してみよう：
- .custom-box-shadow:作成するCSSクラスの名前です。これを使用して、特定の要素にボックス・シャドウを適用します。
- Box-shadow:ボックスシャドウを定義しようとしていることをブラウザに伝えます。
- 5px 5px：これら最初の2つの値は、影の水平方向と垂直方向のオフセットです。最初の値で右に移動し、2番目の値で下に移動します。シャドウの位置を調整するには、これらの値を調整してください。
- 10px： ぼかしの半径です。数値を大きくすると、よりソフトでぼやけた影になります。数値を低くするとシャープになります。
- rgba(0, 0, 0, 0.2)：影の色を設定します。ここでは半透明の黒を使用しています。最後の数値（アルファ）は透明度をコントロールし、0は完全に透明、1は完全に不透明です。
スニペットに満足したら、挿入セクションにスクロールダウンし、WPCodeが追加する場所を定義します。ウェブサイト全体で使用するには、「自動挿入」オプションを選択し、場所を「サイト全体のヘッダー」に設定します。
ページの一番上までスクロールし、「Inactive」トグルを「Active」ポジションに切り替えます。そして、「スニペットを保存 」ボタンをクリックします。
次のステップは、任意のWordPressブロックにカスタムCSSクラスを追加することです。これを行うには、WordPressのブロックエディターで任意のブロックを選択し、左側のメニューから「Advanced」をクリックします。
Additional CSS Classes」フィールドに「custom-box-shadow」と入力する。
そして、投稿に満足したら、「更新」または「公開」をクリックします。すると、その投稿にアクセスし、あなたのボックスシャドウが実際に動いているのを見ることができます。
方法3：無料のプラグインを使ってボックスシャドウを追加する（簡単な代替方法）
コードスニペットで作業するのが苦手な方は、Drop Shadow Boxesを使って影を作成する方がいいかもしれません。この無料のWordPressプラグインを使用すると、WordPressの組み込みブロックエディタを使って、任意のブロックにボックスシャドウを追加できます。
まず、ウェブサイトにプラグインをインストールし、有効化します。設定項目はありませんので、すぐにプラグインを使用することができます。
次に、WordPressの投稿またはページを作成または編集する。エディタ内でプラス（＋）アイコンをクリックして新しいブロックを追加し、「ドロップシャドウ」を検索する。
表示されたら、クリックしてページに追加します。空のブロックにドロップシャドウが表示されるので、コンテンツを追加しましょう。
ドロップシャドウ・ブロックの中にあるプラスアイコンをクリックし、ブロックを追加し、通常通り設定します。例えば、画像ブロックを追加し、WordPressのメディアライブラリから画像を選んでみました。
次に、ブロックをクリックすると、左側のサイドバーにボックスシャドウの設定が表示されます。
シャドウの幅はWordPressによって自動的に設定されますが、「幅」のドロップダウンボックスから「ピクセル」または「%」を選択して変更することができます。その後、スライダーで調整できます。
カーブしたエッジや「遠近法」エフェクトなどのオッターエフェクトもあります。これらをプレビューするには、「エフェクト」ドロップダウンを開き、リストから1つを選択します。
その他、内シャドウ、外シャドウ、ボーダーカラー、ボーダーピクセル、角丸などのオプションを試すことができる。
ボックスシャドウに満足したら、他のブロックについてもこの手順を繰り返すか、「更新」または「公開」をクリックして変更を有効にします。
この方法を使った私のボックスシャドウはこんな感じだ：
方法4：CSSヒーローを使ってボックスシャドウを追加する（上級者向け）
コードを扱うのは苦手だけど、高度なボックスシャドウを作りたいという方には、CSS Heroがおすすめです。
このプレミアムプラグインを使えば、コードを一行も書かずにWordPressテーマのあらゆる部分を微調整できます。また、ブロックごとに独自のシャドウを作成できるので、サイト全体で異なるシャドウ効果を試すのに最適です。
はじめに、CSS Heroプラグインをインストールし、有効化してください。次に、製品の有効化手順に従って、CSS HeroアカウントとWordPressサイトをリンクしてください。
ここで、管理ツールバーの'CSS Heroでカスタマイズ'オプションをクリックし、CSS Heroエディタを開きます。
デフォルトでは、CSSヒーローエディタはウェブサイトのライブプレビューを表示し、ウェブデザインの各要素を編集できるパネルを表示します。
ボックスシャドウを追加したいページにいない場合は、画面上部のアイコンを使って「選択」モードから「ナビゲート」モードに切り替えてください。
これで、好きなページに行き、セレクト・モードに戻ることができる。
次に、画像、ボタン、段落、その他のコンテンツなど、ボックスシャドウを追加したいプレビュー内の要素をクリックします。
そうしたら、左側のパネルで「Extra」をクリックする。
デフォルトでは、ボックスシャドウのオプションは「なし」と表示されているので、「シャドウを作成」ボタンをクリックします。
まず、影の位置を変更します。影の位置の設定では、「内側」または「外側」を選択できます。
次に、Orientationセクションで影の角度を調整します。ボックスシャドウの角度が希望する位置になるまで円をドラッグするだけです。
最後に、スポイトツールを使って影の色を変え、スライダーを使って影のぼかしと広がりをコントロールする。
同じ方法で、ウェブサイトの他のエリアにボックスシャドウを追加します。そして、すべての見た目に満足したら、「保存して公開」ボタンをクリックします。
では、変更した部分がウェブサイト上でどのように見えるか、実際に見てみましょう。
WordPressウェブサイトをカスタマイズするその他の方法
このガイドで取り上げた方法は、WordPressでボックスシャドウ効果を追加するのに理想的です。しかし、もっとクリエイティブなエフェクトを追加したい場合は、以下のガイドが参考になるでしょう：
- WordPressで余白を変更する方法- コンテンツの余白をカスタマイズして、洗練されたプロフェッショナルな外観を作りましょう。
- WordPressで画像にテキストを追加する方法- 画像に直接、印象的なグラフィックや行動喚起を作成できます。
- WordPressでParticle.jsのアニメーション背景を作成する方法- 目を引くアニメーションの背景でダイナミックなタッチを追加します。
- WordPressでページを全幅にする方法- サイドバーから解放され、没入感のある全幅のページレイアウトを作成できます。
- WordPressで背景画像を薄暗くする方法- 背景画像を薄暗くしてテキストを読みやすくし、奥行き感を演出しましょう。
- WordPressでテキストアニメーションを作成する方法- 目を引くアニメーションテキスト効果で訪問者の注目を集めましょう。
- WordPressでおしゃれなセクションディバイダーを作成する方法- スタイリッシュな形のディバイダーでコンテンツを視覚的に区切ります。
このガイドが、WordPressでボックスシャドウを追加する方法を学ぶのにお役に立てば幸いです。これで、ウェブサイトのデザインを即座に改善し、最も重要なコンテンツを強調することができます。
WordPressのスキルをさらに高める準備はできましたか？SeedProdを使用して、コーディングなしで魅力的でコンバージョンの高いランディングページやウェブサイトを作成しましょう。
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
