コピペでOK！SIRIUSの見出しテキストにCSSで影をつけてみよう

今回は、SIRIUSのタイトル文字や、見出しの文字にＣＳＳ（スタイルシート）で影をつける、ちょっとしたカスタマイズをしてみよう。

見出し・タイトルテキストに影を付ける方法

タイトルや見出しテキストに影を付けてみたら、どんな感じになるか以下のサンプルサイトの画像を見てください。

このサンプルサイトは、h1,h2,h3,h4までテキストに影をつけています。

影（シャドウ）の付け方

あなたが、カスタマイズしたいSIRIUSのサイトを開きます。

そして、開いたサイトの編集CSSを開きます。

まず、h1～h4のタイトルに影を付けたい場合は、
CSSの上から32番目あたりに、以下の記述があります。

h1, h2, h3, h4, .title ,.menutitle{
 font-family: 'HGP創英角ｺﾞｼｯｸUB', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W6', sans-serif;
  font-weight:normal;
}

そこに、text-shadow: 5px 5px 5px #999999;を追加記述します。

h1, h2, h3, h4, .title ,.menutitle{
  font-family: 'HGP創英角ｺﾞｼｯｸUB', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W6', sans-serif;
  font-weight:normal;
　text-shadow: 5px 5px 5px #999999;
}

追加記述したら、保存してプレビューで見てみましょう。

どうですか？できましたか？

ちなみに影の向きや色も指定して変更することができます。

text-shadow: 5px 5px 5px #999999;の数字は、

text-shadow: 横方向px 縦方向px ぼかしpx ＃影の色;ですので、お好みに変更してください。

もちろん、個別のタイトルに影を付けることだって可能ですよ。

サイトタイトルに影を付ける場合

CSSの上から177番目ののところに記述すればOKです。

#top h2 {
  font-size: 30px;
  position: relative;
  top: 35px;
  padding-right: 10px;
  padding-left: 10px;
  line-height: 110%;
  text-shadow: 5px 5px 5px #999999;
}

記事タイトルh3に影を付ける場合

CSSの上から454番目のところに追加記述すればOKです。

#main  h2,#main h3 {
  font-size: 18px;
  line-height: 26px;
  background-repeat: no-repeat;
  background-position: left top;
  background-image: url(img/h3.jpg);
  margin-bottom: 5px;
  margin-top: 5px;
  text-indent:20px;
  padding-top: 6px;
  padding-bottom: 6px;
  color: #333333;
  text-shadow: 5px 5px 5px #999999;
}

サイドバーの見出しタイトルh4に影を付ける場合

CSSの上から925番目あたりのところに追加記述すればOKです。

#menu h4 ,#rmenu h4 ,.menutitle {
  padding-left: 15px;
  line-height: 28px;
  background-image: url(img/menu_h4.jpg);
  height: 30px;
  font-size:14px;
  color: #FFFFFF;
  padding-top: 6px;
  text-shadow: 5px 5px 5px #999999;
}

今回は、ビジネステンプレートでタイトルに装飾してみました。

他のテンプレートは、今回のCSSの番号とは、違いますが、同じのを探してみてください。