WordPressにボックスシャドウを簡単に追加する方法（4つの方法）

ボックスシャドウは、WordPress サイトの要素に奥行きと強調を追加する最も簡単な方法の 1 つです。数行の CSS でこの効果を作成できます。

とはいえ、簡単なことでも、一部のWPBeginnerの読者から、特にコーディングに慣れていない場合に、効果的に実装する方法についてのポインターを求められています。

この記事では、WordPressでボックスシャドウを簡単に追加するいくつかの方法を、ステップバイステップでご紹介します。 

WordPressにボックスシャドウを追加する理由

ボックスシャドウ（ドロップシャドウとも呼ばれます）は、画面上の何かが影を落としているように見せる視覚効果です。

私たちは、より近くにあるオブジェクトにより注意を払う傾向があります。これを念頭に置いて、多くのウェブサイト所有者は、最も重要なコンテンツにボックスシャドウを追加して、ページの上に浮いているように見せます。

例えば、行動喚起ボタンに大きな影を追加すると、訪問者にとって物理的に近く見え、注意を引きます。

それでは、WordPressのブログやウェブサイトにボックスシャドウを追加する方法を見ていきましょう。以下のクイックリンクを使用して、使用したい方法に直接ジャンプしてください。

• 方法1. コードを使用してボックスシャドウを追加する（より詳細な制御）
• 方法2. 無料プラグインを使用してボックスシャドウを追加する
• 方法3：ページビルダーでボックスシャドウを追加する（簡単）
• 方法4：CSS Heroでボックスシャドウを追加する（上級）
• WordPress サイトにユニークなデザインを追加するその他の方法を学ぶ

方法1。 コードを使用してボックスシャドウを追加する (より詳細な制御)

すべてのWordPressブロックに影の効果を追加すると、サイトが乱雑でわかりにくくなる可能性があります。それを念頭に置いて、ページの最も重要な要素にのみボックスシャドウを追加する必要があります。

また、サイト全体でボックスシャドウを一貫させる必要があります。これを行う最善の方法は、WPCodeを使用してCSSでスタイルを定義することです。

WPCodeは、100万以上のWordPressサイトで使用されている最高のコードスニペットプラグインです。functions.phpファイルを編集することなく、WordPressにカスタムコードを追加することを容易にします。

WPCodeを使用すると、初心者でもウェブサイトのコードを編集する際に、多くの一般的なWordPressのエラーを引き起こす可能性のある間違いやタイプミスをリスクなしで行うことができます。

まず、無料のWPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、コードスニペット » スニペットを追加に移動します。

ここでは、サイトに追加できるすべての既製のWPCodeスニペットが表示されます。これらには、コメントを完全に無効にする、WordPressが通常サポートしていないファイルタイプのアップロード、添付ページを無効にするなどを可能にするスニペットが含まれています。

マウスカーソルを「カスタムコードを追加（新規スニペット）」に合わせ、表示されたら「+カスタムスニペットを追加」をクリックするだけです。

次に、画面に表示されるオプションのリストからコードタイプを選択する必要があります。

このチュートリアルでは、WordPress にカスタム CSS を追加する必要がありますので、コードの種類として「CSS スニペット」を選択してください。

次に、カスタムスニペット作成ページに移動します。

開始するには、カスタムコードスニペットのタイトルを入力します。これは、WordPressダッシュボードでスニペットを識別するのに役立つものであれば何でも構いません。

次に、「Code Preview」ボックスで、次のコードスニペットをコピーして貼り付けます。

.shadow-effect {
box-shadow: 5px 5px 0px 2px #a9a1a1;
}

上記のスニペットでは、作成したい影の種類に応じてpx値を変更する必要がある場合があります。

参考までに、左から右へのpx値の意味を以下に示します。

• 水平オフセット。正の値を設定すると、影は左に押し出されます。-5pxのような負の値を入力すると、影は右に押し出されます。水平オフセットを追加したくない場合は、代わりに0pxを使用できます。
• 垂直オフセット。 正の値を指定すると、影は下方向に移動します。負の値を入力すると、影は上方向に移動します。影を垂直方向にオフセットしたくない場合は、0px と入力してください。
• ぼかし半径。これにより、シャドウがぼかされ、鋭いエッジがなくなります。値が高いほど、ぼかし効果が大きくなります。シャープなエッジを使用したい場合は、0pxと入力してください。
• 広がり半径。 値が高いほど、影の広がりが大きくなります。この値はオプションなので、広がりを表示したくない場合はスキップしてください。
• 色。影の最も一般的な色は灰色ですが、16進数コードを入力することで好きな色を使用できます。どのコードを使用すればよいかわからない場合は、HTML Color Codesのようなリソースを使用してさまざまな色を探索できます。

スニペットに満足したら、「挿入」セクションまでスクロールします。WPCodeは、すべての投稿の後、フロントエンドのみ、または管理者のみなど、さまざまな場所にコードを追加できます。

ウェブサイト全体でカスタムCSSコードを使用するには、まだ選択されていない場合は「自動挿入」をクリックします。次に、「場所」ドロップダウンを開き、「サイト全体ヘッダー」を選択します。

その後、画面の上部までスクロールし、「非アクティブ」トグルをクリックして「アクティブ」に変更します。

最後に、「スニペットを保存」をクリックして、CSSスニペットをライブにします。

これで、カスタムCSSクラスを任意のブロックに追加できます。

WordPressのブロックエディターで、ボックスシャドウを追加したいブロックを選択します。次に、右側のメニューで「詳細設定」セクションをクリックして展開します。

ここには、さまざまなクラスを追加できるフィールドが表示されます。

「追加のCSSクラス」に shadow-effect と入力します。

ボックスシャドウを公開する準備ができたら、「公開」または「更新」ボタンをクリックするだけです。

ウェブサイトを訪問すると、ボックスシャドウがリアルタイムで表示されます。

ボックスシャドウを追加する以外にも、WPCodeを使用してテキストの色を変更したり、WordPressテーマのブロッククォートスタイルをカスタマイズしたりすることもできます。

方法 2. 無料プラグインを使用してボックスシャドウを追加する

コードを書くことに慣れていない場合は、Drop Shadow Box を使用して影を作成することをお勧めします。この無料プラグインを使用すると、WordPress の組み込みのページおよび投稿エディターを使用して、任意のブロックにボックスシャドウを追加できます。

まず、プラグインをインストールして有効にする必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

設定する設定はないため、このプラグインはすぐに使用を開始できます。

ドロップシャドウを追加するには、「+」アイコンをクリックして「Drop Shadow Box」と入力し始めます。適切なブロックが表示されたら、クリックしてページまたは投稿に追加します。

これにより、ドロップシャドウが空のボックスとして追加されるため、次のステップはコンテンツを追加することです。

これを行うには、ドロップシャドウボックスブロック内の「+」をクリックしてください。

次に、使用したいブロックを追加し、通常どおりに設定するだけです。

たとえば、次の画像では、画像ブロックを追加し、WordPressメディアライブラリから画像を選択しました。

これが完了したら、ドロップシャドウボックスブロックをクリックして選択します。右側のメニューに、このブロックのスタイル設定に使用できるすべての設定が表示されます。

WordPressはシャドウの幅を自動的に設定しますが、「幅」ドロップダウンを開いてから「ピクセル」または「%」を選択することで変更できます。

表示される設定を使用してサイズを変更できます。

Drop Box Shadow プラグインには、角丸や目を引く「パースペクティブ」効果など、いくつかの異なるエフェクトが用意されています。

さまざまなエフェクトをプレビューするには、「エフェクト」ドロップダウンを開いてリストから選択するだけです。プレビューは自動的に更新されるため、さまざまなスタイルを試して好みのものを見つけることができます。

「Inside Shadow」と「Outside Shadow」トグルを使用して、プラグインがボックスの内側、外側、またはその両方に影を表示するかどうかを変更することもできます。

その後、「色」ヘッダーの下の設定を使用して、ボックスと境界線の色を変更できます。

「背景」はドロップシャドウボックスの内部を指し、「境界線」はブロックの外側に表示されることに注意してください。

より柔らかく、カーブしたシャドウボックスを作成したい場合は、「Rounded corners」トグルを有効にできます。最後に、WordPress の他のブロックをカスタマイズするのと同様に、配置と パディング を変更できます。

より多くのボックスシャドウを作成するには、上記と同じ手順に従ってください。

ページの見た目に満足したら、「更新」または「公開」をクリックするだけで、新しいボックスシャドウをすべて公開できます。

方法3. ページビルダーを使用してボックスシャドウを追加する（簡単）

ランディングページ、カスタムホームページ、またはWordPressテーマの任意の場所にボックスシャドウを追加したい場合は、ページビルダープラグインの使用をお勧めします。

SeedProd は、最高の ドラッグ＆ドロップ WordPress ページビルダー です。カスタムランディングページをデザインしたり、カスタム WordPress テーマを作成したりできます。コードを一行も書く必要はありません。

また、高度なドラッグアンドドロップエディターを使用して、任意のブロックにボックスシャドウを追加することもできます。

まず、SeedProdプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、WordPressダッシュボードのSeedProd » Landing Pagesに移動します。

SeedProdには、カテゴリ別にグループ化された300以上のプロフェッショナルにデザインされたテンプレートが付属しています。上部には、美しい近日公開ページを作成したり、メンテナンスモードを有効にしたり、WordPress用のカスタムログインページを作成したりできるカテゴリが表示されます。

SeedProdのすべてのテンプレートはカスタマイズが簡単なので、好きなデザインを使用できます。

使用したいテンプレートを見つけたら、マウスカーソルを合わせ、チェックマークアイコンをクリックするだけです。

「ページ名」フィールドにランディングページの名称を入力できるようになりました。SeedProd は、ページ名を使用して自動的に「ページURL」を作成します。

可能であれば、URL に関連キーワードを含めることは賢明です。これにより、検索エンジンはページの内容を理解しやすくなります。これにより、多くの場合、WordPress SEOが向上します。

ページの自動生成URLを変更するには、「ページURL」フィールドに入力するだけです。

入力した情報に満足したら、「保存してページ編集を開始」をクリックします。これにより、SeedProdのページビルダーインターフェースが読み込まれます。

このシンプルなドラッグアンドドロップビルダーは、右側にページの ライブプレビュー を表示します。左側には、ページに追加できるさまざまなブロックとセクションを示すメニューがあります。

追加したいブロックが見つかったら、テンプレートにドラッグ＆ドロップするだけです。

ブロックをカスタマイズするには、SeedProdエディターでそのブロックをクリックして選択してください。左側のメニューに、ブロックをカスタマイズするために使用できるすべての設定が表示されます。

たとえば、見出しブロックをクリックすると、独自のテキストを入力したり、テキストの色やフォントサイズを変更したりできます。

ページを構築する際、ブロックをドラッグ＆ドロップでレイアウト内を移動できます。詳細な手順については、WordPressでランディングページを作成する方法に関するガイドをご覧ください。

ボックスシャドウを作成するには、SeedProdページエディタでブロックをクリックして選択します。左側のメニューの設定はブロックによって異なる場合がありますが、通常は「高度」タブをクリックする必要があります。

ここで、「スタイル」セクションの下にある「シャドウ」ドロップダウンメニューを探します。このドロップダウンを開いて、ヘアライン、ミディアム、2X ラージなどのシャドウ スタイルを選択するだけです。

プレビューは自動的に更新されるため、さまざまなスタイルを試して、ページデザインに最適なものを見つけることができます。

事前定義されたスタイルのいずれも使用したくない場合は、「カスタム」をクリックします。

これにより、カスタムシャドウの色、ぼかし、広がり、位置を変更できる新しい設定が追加されます。

これで、さらにブロックやボックスシャドウを追加して、ページでの作業を続けることができます。

ページの見た目に満足したら、「保存」ボタンをクリックし、「公開」を選択して公開します。

方法4。 CSS Hero を使用してボックスシャドウを追加する (上級者向け)

コードの扱いに慣れていないけれど、高度なボックスシャドウを作成したい場合は、CSS Heroを試すことができます。このプレミアムプラグインを使用すると、一行のコードを書かずにWordPressテーマのあらゆる部分を微調整できます。

CSS Heroを使用すると、各ブロックにユニークな影を作成できるため、さまざまな影の効果を作成したい場合にも最適です。プラグインの詳細については、CSS Heroのレビューをご覧ください。

まず、CSS Heroプラグインをインストールしてアクティベートする必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

アクティベーション後、画面上部に「製品アクティベーションに進む」ボタンが表示されます。このボタンをクリックしてください。

これにより、CSS Heroのウェブサイトに移動し、アカウントにログインしてライセンスキーを取得できます。画面の指示に従うだけで、数回のクリックでサイトにリダイレクトされます。

次に、WordPress管理バーの「CSS Hero」というテキストをクリックします。

これでCSS Heroエディタが開きます。

デフォルトでは、CSS Hero エディタにはウェブサイトの WYSIWYG プレビューと、ウェブデザインの各要素を編集できる左側のパネルがあります。

ボックスシャドウを追加したいページにいない場合は、「編集」モードから「ナビゲート」モードに切り替えることができます。

これにより、ナビゲーションメニュー、リンク、その他のコンテンツと通常どおり対話できます。

これで、影を追加したいページまたは投稿に移動できます。

そのページに到達したら、すぐに「編集」モードに切り替えてください。

それが完了したら、ボックスシャドウを追加したい段落、画像、ボタン、またはその他のコンテンツをクリックします。

左側のパネルで、「その他」をクリックします。

これで、「影を作成」をクリックできます。

これは、ボックスシャドウを作成するために使用できるすべての設定を表示します。

開始するには、「影の位置」設定を使用して、影がブロックの内側または外側に表示されるかどうかを変更できます。

ここでは、「外側」を選択して、影が画像自体の外側に表示されるようにしました。

この決定を下した後、「向き」ボックスの小さなドットを使用して、影の向きを微調整できます。

ドットを新しい位置にドラッグアンドドロップするだけで、ライブプレビューで移動を確認できます。

影の位置に満足したら、色、ぼかし、広がりを変更できます。

CSS Heroはこれらの変更を即座に表示するため、さまざまな設定を試して最適なものを見つけることができます。

他のブロックにボックスシャドウを追加するには、上記と同じ手順に従ってください。

ページの見た目に満足したら、「保存」をクリックして変更をライブにします。

WordPress サイトにユニークなデザインを追加するその他の方法を学ぶ

上記の方法は、WordPressでボックスシャドウを追加するための優れた基盤を提供します。しかし、さらにユニークでクリエイティブな効果を達成したい場合はどうでしょうか？

次の記事では、ウェブサイトにさまざまなデザイン要素を追加するための役立つガイドを見つけることができます。

• WordPressで画像ホバーエフェクトを追加する方法 – このガイドでは、画像に作成できるさまざまなホバーエフェクトを探り、ウェブサイトを訪問者にとってより魅力的でインタラクティブなものにします。
• WordPressでCSSアニメーションを簡単に追加する方法 – ボックスシャドウとともにアニメーションを使用すると、ダイナミックで視覚的に魅力的なユーザーエクスペリエンスを作成でき、訪問者の注意を引きつけ、エンゲージメントを維持できます。
• WordPressテーマにパララックス効果を追加する方法 – パララックス効果を組み込むことで、奥行きの錯覚を強化し、より没入感のあるウェブサイトを作成できます。
• WordPressでカスタムシェイプディバイダーを作成する方法 – この記事では、コンテンツのセクションを視覚的に分離するためのユニークな形状を作成する方法を説明します。
• WordPress でレスポンシブスライダーを簡単に作成する方法 – このガイドでは、コンテンツを魅力的で省スペースな方法で表示するためのスライダーを作成する方法を説明します。
• WordPressにアニメーション背景を追加する方法 – アニメーション背景を追加すると、ユニークで視覚的に興味深いユーザーエクスペリエンスを作成できます。

このチュートリアルがWordPressでボックスシャドウを追加する方法を学ぶのに役立ったことを願っています。また、WordPressで未使用のCSSを削除する方法やWordPressのCSS配信を最適化する方法についても学びたいかもしれません。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。