賢威7.0

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

main-contents-box-shadow-thumbnail

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

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

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

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

カスタマイズ前

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

text-shadow-before

カスタマイズ後

カスタマイズ 1

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

text-shadow-after-1
カスタマイズ 2

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

text-shadow-after-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);
}

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

text-shadow-after-1

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

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

text-shadow-property

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);
}

文字の右下に白い影(というより線?)が入りました。

text-shadow-after-2

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

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

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