賢威7.0

賢威7:メインコンテンツの画像に影を付ける方法

main-contents-image-box-shadow-thumbnail

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回はWordPressテーマ:賢威7のコンテンツ部分に表示される画像に、影を付ける方法を紹介したいと思います。

カスタマイズ前

↓ 影が何も付いていない状態
(紛らわしいですけど、下の画像の周りに付いている影は、うちのサイトで付けている影です)

main-contents-image-box-shadow-before

カスタマイズ後

カスタマイズ 1

↓ 画像の周囲にうっすら影を追加

main-contents-image-box-shadow-after
カスタマイズ 2

↓ トップページの記事一覧にも影を追加

main-contents-image-box-shadow-after-3
カスタマイズ 3

↓ 画像の周囲に白い背景と影を追加

main-contents-image-box-shadow-after-2

[ad]

1. CSSファイルを編集

今回は見た目のカスタマイズなので、CSSを編集していきます。

親テーマ(賢威7本体)の base.css や子テーマの style.css など、お使いのCSSファイルに以下のコードを追加すると、

.single .article-body img,
.page .article-body img {
    box-shadow: 0 0 10px rgba(0,0,0,.2);
}

メインコンテンツ部分の画像の周囲にうっすらとした影が追加されました。

main-contents-image-box-shadow-after

1-1. 個別記事や固定ページ以外のページに影を追加するには

先ほどのコードは個別記事(投稿)と固定ページに影が付くように指定しましたが、もし全てのページで影を付けたいという場合には、下のように指定すれば大丈夫です。
.single.page の指定を消去)

.article-body img {
    box-shadow: 0 0 10px rgba(0,0,0,.2);
}

↓ これでメインコンテンツ以外のページ(画像はトップページの記事一覧)にも影が追加されました。

main-contents-image-box-shadow-after-3

2. 画像の周囲に白い背景を追加

次は画像の周囲に白い余白を追加して、ポラロイド風にしてみます。

先ほどと同じように、以下のCSSコードを追加すると、

.single .article-body img,
.page .article-body img {
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    padding: 10px; 
    background: #fff;
}

画像の周囲に白い余白と影が追加されました。

main-contents-image-box-shadow-after-2

3. 影を調整するには

影は box-shadow のプロパティで追加しているので、この box-shadow を編集すれば、お好みの影を画像に追加することができます。

box-shadowのプロパティを公式風に書いてみると、下の画像のようになります。

main-contents-box-shadow-property

x方向、y方向というのは縦横の影の向きで、rgba(…)というのは、通常のカラーコード(rgb)に不透明度(a)を追加したものです。

なので、例えばx方向の向きを-4pxにして、影の色を薄く(不透明度を10%に変更)してみると、、、

.single .article-body img, 
.page .article-body img {
    box-shadow: -4px 0 10px rgba(0,0,0,.5);
}

影が左に(x方向に-4px)移動して、不透明度が0.5(50%)になりました。

main-contents-image-box-shadow-after-1

先ほどポラロイド風にしたときに使用した padding についても、padding: ○○px の ○○ 部分を編集すればお好みの余白を作ることができます。

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。