サイトのタイトルに影(テキストシャドウ)を追加する方法

という悩みを解決します。

サイトのタイトルに影をつけるには、テキストシャドウにヘッダーを指定する必要があります。

といっても難しいことはありません。30秒で終わります。

それでは、ヘッダーに表示するサイトタイトルに「影」を追加する方法について解説していきます。

※サイトタイトルを大きくする方法もあります！

参考：サイトタイトルのサイズを大きくする方法｜CSSコードを追加する

サイトのタイトルに影を追加する方法

サイトタイトルの影の追加は、テーマ管理の全体設定で行います。

具体的には、テキストシャドウを反映させる「適応ID及びクラス」を指定すればOKです。

「適応ID及びクラス」は、

1. サイトタイトルのみ
2. キャッチフレーズを含むサイトタイトル

この2パターンがあるので、どちらかお好みの方を使ってください。

サイトタイトルのみ

header .sitename a

キャッチフレーズを含むサイトタイトル

#header-l

ここではわかりやすいように #header-l を使って解説していきますね。

サイトタイトルに影を追加する手順

流れとしては、

• コードをコピーしておく
• AFFINGER管理の全体設定を開く
• テキストシャドウにコードを貼り付ける

これだけです。

詳しく解説していきます。

追加するコードをコピーする

まずは以下のコードをコピーしてください。

#header-l

サイトタイトルのみでいい場合は header .sitename a をコピーしてください。

サイト全体の設定を開く

WordPressのダッシュボードを開き、「AFFINGER管理」をクリック。

テーマ管理メニューの「全体設定」をクリックすると、サイト全体の設定が開きます。

コピーしておいたコードを貼り付ける

「サイト全体の設定」を下にスクロールすると「テキストシャドウ」という項目があるので、さきほどコピーしておいたコード #header-l を貼り付けて保存します（「Save」をクリック）。

これでサイトタイトルにテキストシャドウが反映されました。

黒だと影がちょっとわかりにくいですね…^^;

テキストカラーを白にすると、こんな感じで影が反映されています。

ちなみに薄いピンクだとこんな感じです。

以上がサイトのタイトルに影(テキストシャドウ)を追加する方法でした。