設定

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

アフィ君

サイトのタイトルに影をつけて文字を立体的にできないかなぁ?

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

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

といっても難しいことはありません。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」をクリック)。

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

サイトタイトルに影を反映

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

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

サイトタイトル白色で影付き

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

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

あわせて読みたい!

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

という悩みを解決します。 結論から言うと、普通の設定ではなくCSSコードを追加する必要があります。 「CSSをいじるのは怖いなぁ…」 という方でも大丈夫。 アフィンガーにはCSSを追加できる項目がある ...

-設定
-,