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

SIRIUSテキスト影TOP

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

Sponsored Links

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

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

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

SIRIUSの見出しテキストにCSSで影TOP

影(シャドウ)の付け方

あなたが、カスタマイズしたい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の番号とは、違いますが、同じのを探してみてください。

おわりに

※失敗してテンプレートがダメにならないよう、テストサイトなどを作成して試してからカスタマイズしたほうがいいと思います。

HTML・CSSをさわる前に必ずバックアップしておきましょう。

Sponsored Links

よろしければシェアお願いします