CSS  文字に影を付ける(タイトル文字) HTML番外編

CSSで影を付ける

CSSとは?

Cascading Style Sheets(カスケーディング・スタイル・シート)の略で、ウェブページのスタイルを指定するための言語になります。

 

難しいことは今更いいですね。実際に扱ってみましょう。

CSSで、タイトルの文字に影を付ける

CSS文字に影を付ける

私のFC2のブログですが、タイトルの文字が味気ない気がします。

 

そこで、この文字を少し見栄えよくしてみたいと思います。

 

FC2の場合、管理画面から、テンプレートの設定をクリック。

※必ず、複製を作って確認してからにしてください。全部をコピーして、メモに保存して置くのもいいでしょう。

 

 

スタイルシートの編集の「ヘッダーの文字色」をいじってみます。

 

いじるといっても、今回も簡単コピペ。
text-shadow: 3px 3px 0px rgba(0,0,0,.2);

 

赤線で囲った部分の一番後ろに上記を貼り付けます。

CSSで文字に影を付ける2

下図のような感じですね。この状態でプレビューを見てみましょう。

 

 

CSS影を付ける

 

タイトル文字影付き

おお~!たった一行加えただけで、影がついていい感じじゃないですか?

 

好みの問題がありますので、影の部分を少し変えてみましょう。

text-shadow: 3px 3px 0px rgba(0,0,0,.2);

↓ ↓ ↓

text-shadow: 5px 5px 3px rgba(0,0,0,.2);

CSS影の位置

左から、横方向、縦方向、ぼかし具合になります。

 

3⇒5、3⇒5、0⇒3に変更してますので、影が右に移動、下に移動、輪郭がボケる。

CSS影がボケる

分かりますか?

 

分かりづらければ、ご自分で色々いじってみてください。

 

それは不親切ですね。

text-shadow: 5px 5px 0px rgba(0,0,0,.2);

先ほどのぼかした部分を0にして、はっきりさせてみましょう。

CSS影輪郭

影の輪郭がはっきりしてますね。

 

それでは、影の色も変えてみましょう。

text-shadow: 3px 3px 0px rgba(0,0,0,.2);

 

かっこの中の数字を変えます。
先日紹介した、原色大辞典で調べるといいでしょう。

 

色を選択し、白線で囲んだ部分の数字を入れます。

text-shadow: 3px 3px 0px rgba(0,0,0,.2);

↓ ↓ ↓

text-shadow: 3px 3px 0px rgba(225,69,0,.2);

左から、225、69、0ですね。あれ、1つ余りますね。

 

.2これは、0.2なのですが、透明度を表します。数字が低いほど薄くなっていきます。今回はそのままで、

原色大辞典

影に色がついたのが分かりますか?

 

CSS影薄赤

 

text-shadow: 3px 3px 0px rgba(225,69,0,.2);

0.2⇒0.5に変えてみます。

text-shadow: 3px 3px 0px rgba(225,69,0,.5);

すると

CSS影濃い

はっきりしてきましたね。

0.5⇒1.2

CSS影強調

簡単ですね。

text-shadow: 3px 3px 0px rgba(0,0,0,.2);

 

これを貼るだけで、イメージが変わるということが、分かっていただけたでしょうか?

 

是非試してみてください。

 

2 Responses to “CSS  文字に影を付ける(タイトル文字) HTML番外編”

  1. YMS より:

    タイトルにオシャレにすることができるんですね!!
    全然知りませんでした。
    これはいいですね!
    タイトルがオシャレだと読む人にとっては読もうという気になると思います。
    有益な情報、ありがとうございます。
    とても参考になりました。

    • テッシ より:

      YMSさん

      コメントありがとうございます。

      いつもであれば、コメントして頂いた方のサイトに、

      コメントを返すのですが、コメント欄が見つからなかったため、

      ここで失礼します。

      サイト拝見させて頂きました。

      センスのいい爽やかなサイトですね。

      今後ともよろしくお願いします。

      テッシ

コメントを残す

CAPTCHA


サブコンテンツ

管理人について

tesshi180
 
テッシです。
 
現在南の島でのんびりと、
アフィリエイトをしながら暮らしています。
 
今まで色々な人に、迷惑をかけてきたので、アフィリエイトで稼ぎたいと思っている人たちを、応援できればと思っています。
 
詳しいプロフィール
 

無料メルマガ配信中

現在実践中のノウハウと実践手順を示したメルマガを始めました。
 
新しい無料メルマガを体験したい方は下記から
 
現実的な
アフィリエイト講座

 

お問い合わせフォーム

質問や相談はいつでもお気軽にご連絡ください。
 
必ず返信させて頂きます。

 
お問い合わせ
 

このページの先頭へ