賢威7：投稿/固定ページのタイトル（文字）に影を付ける方法

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

今回は、WordPressテーマ：賢威7の投稿や個別記事のタイトルに、影を付ける方法をご紹介します。

テキストに影を付ける言うと、ドロップシャドウのような、薄くて黒い影を付けることが多いと思いますが、色の付いた背景に白い影を付けるカスタマイズも、文字がくっきりして、意外と良い感じになります。
サイト全体がかっちりしますし、それに何よりWordPressで有名なウェブデザインレシピさんも使っている方法です。

どちらの方法も紹介しているので、よかったら参考にどうぞ！

1 カスタマイズ前
2 カスタマイズ後
- - - 2.0.0.1 カスタマイズ 1
    - 2.0.0.2 カスタマイズ 2
3 カスタマイズ 1. 文字に薄い影を追加
- 3.1 1-1. 影を調整するには
4 カスタマイズ 2. 影を使って文字をくっきりさせる

カスタマイズ前

↓ 記事タイトルのカスタマイズ前（もちろん影なし）

カスタマイズ後

カスタマイズ 1

↓ 記事タイトルに薄い影を追加（ぼかし10px）

カスタマイズ 2

↓ 記事タイトルに白い影を追加して、文字をくっきりさせる (ぼかし無し)

[ad]

カスタマイズ 1. 文字に薄い影を追加

まずは記事のタイトルに薄い影を追加していきます。

今回は見た目のカスタマイズなので、親テーマ（賢威7本体）の base.css や子テーマの style.css など、お使いのCSSファイルに以下のコードを追加します。

.single .section-title,
.page .section-title {
    text-shadow: 1px 1px 3px rgba(0,0,0,.3);
}

↓　うっすらとした影が追加されました。

1-1. 影を調整するには

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

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

x方向に影を1px移動
y方向に影を1px移動
ぼかしを3px
影の色を黒：rgba(0,0,0,)にして、不透明度30%に設定

と書くこともできます。

なので、text-shadow: ... 部分を編集すれば、お好みに合わせて影を調整することができます。

カスタマイズ 2. 影を使って文字をくっきりさせる

今度は影を使って、文字をくっきりさせてみたいと思います。

カスタマイズ 1. では、黒い影を3pxぼかしたので、文字がくっきりするのとは逆のパターンになりましたが、今度はぼかしを0pxにして、白い影を縦横1pxずらした位置に追加します。
（ぼかしが無いので、影というより、文字をもう一つ作るイメージの方が良いかもしれません）

以下のコードをCSSファイルに追加すると、、、

.single .section-title,
.page .section-title {
    text-shadow: 1px 1px 0px rgb(255,255,255);
}

文字の右下に白い影（というより線？）が入りました。

ちなみにここでは背景に画像を使っていますが、これは下のような指定で作ることができます。
（○○.jpg の部分は、メディアライブラリにアップロードした画像URLを入れて下さい）

.single .main-conts .section-wrap,
.page .main-conts .section-wrap {
    background: url('○○.jpg') 50% repeat;
}

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