今回の記事では、WordPressテーマ：賢威7の個別記事と固定ページのメインコンテンツ部分に、うっすらとした影を付ける方法を紹介していきます。
記事の部分をさり気なく強調できるので、特に白い背景を使用しているサイトにオススメなカスタマイズです。

カスタマイズ前

↓ 賢威7スタンダード版では、1pxでグレーの境界線が入ってます

カスタマイズ後

カスタマイズ 1

↓ メインコンテンツの境界線を非表示にして、周囲に影を追加

カスタマイズ 2

↓ 影を左に移動し、より薄くなるよう調整

カスタマイズ 3

↓ 内側に青い影を追加

1. CSSファイルを編集

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

賢威7本体（親テーマ）の base.css ファイルや、子テーマのCSSファイルなど、お使いのCSSファイルに以下のコードを追加します。

.single .main-conts .section-wrap,
.page .main-conts .section-wrap {
    border: none;
    box-shadow: -4px 0 10px rgba(0,0,0,.1);
}

これで個別記事と固定ページのメインコンテンツ部分の境界線が消えて、影がうっすら入るようになりました。

2. 影を調整するには

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

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

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

.single .main-conts .section-wrap,
.page .main-conts .section-wrap {
    border: none;
    box-shadow: -4px 0 10px rgba(0,0,0,.1);
}

影が左に（x方向に-4px）移動して、不透明度が0.1(10%)になりました

※　縦(y）方向についても、これと同じように向きを変えることができます。

3. 影を内側に付けてみる

ここまでのコードでは影を外側に付けていましたが、内側に影をつけることもできます。
これは inset というキーワードを追加すれば良いので、影を内側に付けてみると、

.single .main-conts .section-wrap,
.page .main-conts .section-wrap {
    border: none;
    box-shadow: 0 0 10px rgba(0,55,255,0.6) inset;
}

不透明度が60%の影が内側に追加されました。
（実際に使うかどうかは別として、box-shadowでこんなスタイリングも出来る、ということで。。ちなみに立体的に見えるモーダル風のSNSボタンも box-shadow のプロパティを使っています）

box-shadow については、下のサイトで詳しく解説してくれています。

http://www.htmq.com/css3/box-shadow.shtml

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