今回は、WordPressテーマ:賢威7の投稿や個別記事のタイトルに、影を付ける方法をご紹介します。
テキストに影を付ける言うと、ドロップシャドウのような、薄くて黒い影を付けることが多いと思いますが、色の付いた背景に白い影を付けるカスタマイズも、文字がくっきりして、意外と良い感じになります。
サイト全体がかっちりしますし、それに何よりWordPressで有名な ウェブデザインレシピ さんも使っている方法です。
どちらの方法も紹介しているので、よかったら参考にどうぞ!
カスタマイズ前
↓ 記事タイトルのカスタマイズ前(もちろん 影なし)
カスタマイズ後
カスタマイズ 1
↓ 記事タイトルに薄い影を追加(ぼかし10px)
カスタマイズ 2
↓ 記事タイトルに白い影を追加して、文字をくっきりさせる (ぼかし無し)
カスタマイズ 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;}
今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。