ブログに凝るとプロっぽいブログにしたくなりますよね。
今回はブログの見た目を簡単にプロっぽくするコツを解説します。
それでは見た目で「このブログ、プロっぽい」と思わせる
簡単な方法とは何か？
それは
■ポイントにグラデーションを効かせる
ということなのです。
例えば、ちょとしたタイトルや見出し、
メニューなんかにグラデーションが効いてると
簡単にプロっぽさが出てきます。
例えばこんな
ブログの記事のタイトル
のような感じにすると、グッとプロっぽくなるわけです。
これはどうやっているかというと、HTML上は
<h2>ブログの記事のタイトル</h2>
と書いています。
で、これにどう設定しているかというと
<h2>タグの背景をグラデーションに設定しているわけです。
で、<h2>タグの背景画像というのが実は
コレ↓なんです。
で、この画像を<h2>タグの背景に横いっぱいに敷き詰めると
ブログの記事のタイトル
な感じになります。
この画像を<h2>タグの背景に設定するには、CSS上
h2{background: url(ttback.gif) left top repeat;}
と設定するとOKです。
なぜ画像ファイルが縦に長いのかというと、
タイトルが2、３行になっても大丈夫なように長めのモノを利用しています。
あと、よーく見るとわかりますが、
タイトル全体を赤い枠で囲っています。
というのも、グラデーションを利用するとボンヤリした印象になりがちですが
枠で囲むことによってシャープさを出しています。
さらにちょっとしたことですが、背景の色を赤に指定しています。
背景に赤を指定した上で、グラデーションの画像を背景に指定しています。
これによって、もし画像を読み込む際に時間がかかったとしても
それまで背景を単色の赤で塗りつぶして、文字が白くても読める工夫をしています。
アナタもこれで、プロっぽいブログに仕上げてくださいね。
