この WordPress ブログ記事に挿入された画像には影効果（シェーディング効果）が適用されています。 この記事では WordPress ポストボディに追加された画像に影効果を適用する方法を見てみましょう。
WordPress 画像に影効果（シェーディング効果）を適用する
デフォルトでは、ボックスシェーディング効果は次のCSSを使用できます。
.shadow-effect {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
}-webkit-と-moz-プレフィックスは、Google ChromeとSafari、Mozilla Firefoxなどのブラウザとの互換性のために追加されました。
ボックスシャドウCSSジェネレータ（Box Shadow CSS Generator）サイトを使用して、目的のシェーディング効果のCSSコードを生成できます。
- https://cssgenerator.org/box-shadow-css-generator.html (オンラインCSSボックスシャドウエフェクトジェネレータ)
上記のCSSコード WordPress 画像に応用できます。 たとえば、次のCSSコードでテストできます。
.single .entry-content img {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
}上記のコードがうまく機能しない場合は、次のCSSでもテストしてください。
.single .wp-block-image img {
// 스타일
}カスタムCSSコードは WordPress 管理者ページ » ルックス » カスタマイズ » 追加 CSSに追加できます。 あるいは、テーマ（チャイルドテーマ）内のスタイルシートファイルに追加することもできます。
使用する WordPress テーマによって、実際のCSSセレクタは異なる場合があります。 このブログに適用された GeneratePress テーマの場合、上記のコードでもうまく機能します。
特定の画像にのみ異なるスタイルを適用する
特定のイメージにのみボックスシャドウエフェクトを適用したい場合は、イメージブロックにCSSクラスを指定し、CSSコードでシャドウエフェクトを指定できます。
画像ブロックを選択し、ブロック設定パネルの下部にある 追加のCSSクラス フィールドにCSSクラスを指定します（例：wp-image-shadow）。
その後、 WordPress 管理者ページ » ルックス » カスタマイズ » 追加 CSSに希望のスタイルのCSSコードを追加します。 例:
.wp-image-shadow img {
// 원하는 스타일
}段落ブロックなど、他のブロックにも同じ方法でスタイルを設定できます。 たとえば、カラーテキストボックス（カラーテキストボックス）を作成したい場合は、次の記事で説明する方法を参照して、必要なスタイルのテキストボックスを作成できます。
基本的なCSSそれはそれほど難しくないので、少し時間をかけて基本的なCSSを学ぶことは多くの助けになります。
付録：Chat GPTを使用してCSSスタイルを作成する
チャットGPTを活用してCSSコードを生成できます。 ただし、チャットGPTで提示するコードが不足している点があります。
たとえば、「CSSでボックスシャドウスタイルを作成してください」と要求すると、次のようにシンプルなCSSコードが生成されます。
.box {
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
}上記のコードに「vendor-specific prefixes（-webkit- and -moz-）を追加してください」と要求しなければ、より洗練されたコードを生成してくれます。 実際にこのように要求するので-webkit-や-moz-のようなベンダー接頭辞(vendor-specific prefixes)を含むいくつかのスタイルを提示してくださいね。
1.内部シャドウスタイル：
.box {
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
}2.外的な影のスタイル:
.box {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}3.マルチシャドウスタイル：
.box {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.5);
}
基本的なCSSの理解があれば、ChatGPTをより効果的に活用できます。
チャットGPTを使用すると、JavaScriptやPHPなどの言語でコーディングサンプルをリクエストできます。 同様に、これらの言語について知っているほど活用できるようです。
チャットGPTは無料（GPT-3.5）で利用可能ですが、よりクオリティの高いサービスが必要な場合は、GPT-4がサポートされている有料版を利用できます。 私は有料版を利用していますが、ChatGPT Plusサブスクリプションサービスは月20ドルですが、最近22ドルが請求されました。 おそらく 付加価値税が追加されたようです。
コメントを残す