10 July

サイトのタイトルに影を付ける

サイトのタイトルに影をつけたいと思います。

まず「外観」>「テーマの編集」と進み、その中から「style.css」を選びます。

“site-title”を探します。

(”Ctrl + F”で検索窓が出るので、”site-title“と入力すると簡単に見つかります。)

#site-title{
  margin-top:16px;
  margin-bottom:10px;
 font-size: 30px;
  line-height: 100%;
}

#site-title a{
  text-decoration:none;
  color:#222;
  font-size: 40px;
  font-weight:bold;
}

影を付けたい場合、これにtext-shadowプロパティをテキストに適用することで影をつけます。

#site-title{
  margin-top:16px;
  margin-bottom:10px;
  font-size: 30px;
  line-height: 100%;
  /** 以下の行を追加 */
  text-shadow: 3px 3px 5px #000000;
}

#site-title a{
  text-decoration:none;
  color:#222;
  font-size:30px;
  font-weight:bold;
}

text-shadowを追加したら数値をいじって自分好みに変更してください。

text-shadow: 横方向 縦方向 ぼかし 影の色;

設定する値を複数指定したい場合は下記のように ” , ” 区切りで指定します。

text-shadow: 5px 5px 1px #999999, -5px -5px 1px #999999;

これを応用すれば縁取りを付けることも出来ます。

.test {
    color: #FFF;
    font-size: 50px;
    font-weight: bold;
    text-shadow: 2px 2px 1px #00F,
    -2px 2px 1px #00F,
    2px -2px 1px #00F,
    -2px -2px 1px #00F;
}