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

SIRIUSテキスト影TOP

 

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

 

Sponsored Links

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

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

 

このサンプルサイトは、

h1,h2,h3,h4までテキストに影をつけています。

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

 

 

影(シャドウ)の付け方

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

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

 

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

 

 

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

 

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

 

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

 

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

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

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

 

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

 

 

Sponsored Links

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

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

 

 

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

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

 

 

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

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

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

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

 

 

おわりに

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

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

Sponsored Links

こちらの記事もよく読まれています

SNSでもご購読できます。

コメントを残す

*

CAPTCHA