SIRIUSの見出しテキストにCSSで影をつけてみよう - 初心者でもできる画像の編集+加工

ブログURL変更のお知らせ

いつも「初心者でもできる画像の編集+加工」をご覧いただきありがとうございます。

このたび、ブログURLを変更しましたのでお知らせいたします。新しいURLは以下のとおりです。

新URL:http://gazocustomize.xyz/

旧URLにアクセスしても新しいURLに転送されるようになっています。

今後も「初心者でもできる画像の編集+加工」をどうぞよろしくお願いします。

GIMP編集
無料画像編集ソフトGIMP2.8で画像の編集+加工の記事一覧はこちら

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

こんにちは、TAKAです。

今回は、SIRIUSのタイトル文字や、見出しの文字に

CSS(スタイルシート)で影をつける、ちょっとした

カスタマイズをしてみよう。

で、どんなのかというと・・・


1-1.jpg



こんな感じです。

このサンプルサイトは、

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

1-2.jpg


影(シャドウ)の付け方



あなたが、カスタマイズしたい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{
text-shadow: 5px 5px 5px #999999;
font-family: 'HGP創英角ゴシックUB', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W6', sans-serif;
font-weight:normal;
}


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

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

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

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

text-shadow: 横方向px 縦方向px ぼかしpx #影の色;ですので、

お好みに変更してください。


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

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



CSSの上から177番目の

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

のところに記述すればOKです。


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



CSSの上から454番目の


}

#main h2,#main h3 {
text-shadow: 5px 5px 5px #999999;
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;
}

のところに記述すればOKです。

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



CSSの上から925番目あたりの


}

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

のところに記述すればOKです。

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

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

※失敗してテンプレートがダメにならないよう、

テストサイトなどを作成して試してからカスタマイズしたほうがいいと思います。
この記事を読んだ人はこんな記事も読んでます




Comment
非公開コメント

Track Back

http://gazocustomize.blog.fc2.com/tb.php/37-bbbc1130

スプレッドで比較

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。