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

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

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

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

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

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

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

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

それを踏まえて、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カラーコードのようなリソースを使用してさまざまな色を探索できます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

より柔らかく、丸みを帯びた影のボックスを作成したい場合は、「角丸」トグルを有効にできます。最後に、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を試してみてください。このプレミアムプラグインを使用すると、1行のコードを書かなくても、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でも私たちを見つけることができます。