2006年05月16日

実践編@ タイトル文字を弄る

ブログのタイトル部分はそのブログの「顔」です。
弄りたくなることも多いと思います。


さて、おさらいですが。
タイトルが入っている場所はHTML上では「ヘッダー」と呼ばれる部分ですね。
スタイルシートでは「banner」という場所になります。
そして、タイトル文字のスタイルには「h1」が指定されていることが多いようです。


bannerとh1と2つあるの!?と思われるかもしれませんが・・・入れてある箱の指定が「banner」で、文字そのものの指定が「h1」だという感じです。
どちらの方に書かなければいけないかというのは・・・基準が私もイマイチわからない部分があります。
基本的には、小さな範囲で指定されたものが優先で、特に指定がなければ、その1ランク上の範囲で指定されたもの・・・それでも指定がなければ、さらに1ランク上の範囲で指定されたもの・・・という使われ方をします。
何も指定がなかった場合は、それぞれの項目についてHTMLには「デフォルト」がどんなものかが決まっていて、それが使われることになっています。


自分が弄る場合には、自分が「ここだ」と思う場所に指定を入れてみて、ダメだったら1ランク上の範囲に変えてみる・・・などすれば、大抵どうにかなりますw


さて、タイトルで実際に弄りたくなるのは。
・タイトル文字の大きさを変えたい
・フォント(書体)を変えたい
・色を変えたい
・タイトル文字の位置が気に入らない
・タイトルの背景に背景をつけたい
こんなところでしょうか。


では、実際のやり方を説明していきますね。


私のブログの「h1」はこのようになっています。

h1 {
margin:0px;
padding-top:25px;
font-weight:bolder;
font-size:20px;
}

文字の大きさを変えたい場合は「font-size:20px;」の数値を変える。
「font-weight:bolder;」で太字の指定がされてありますから、それを外したい時は「bolder」を「normal」に変える。


色やフォントについては、「h1」では指定されていませんね。
ということは、もっと上のレベルで指定されているものが使われることになっているわけです。
タイトルだけ、指定を変えたい場合は、ここの指定を変えないといけません。


フォントを変えたいなら「font-family:xxxxx;」
文字色を変えたいなら「color:XXXXXXX;」をそれぞれ追加してください。
(xxxxxxは好きなものに変えてくださいねw)


文字の位置については、ここでは「padding-top:25px;」、つまり「上を25px空けるよ」という指定だけで、他は0になっています。
上をもっと詰めたいならその数字を小さくする、左をもっと空けたいなら「padding-left:xxpx;」を追加する。
このようにして少しずつ調整すれば、自分の思う位置に持ってこられます。


最後の、背景をつけたい場合ですが。
これは「h1」ではなく、その上の「banner」に指定する必要があります。


「#banner」の部分へ「background-image:url(http://xxxxxxxxxx.gif);」を追加。
画像の位置の指定については、前の記事で説明したと思うので、ここでは省略です。


さて、それはいいとして。
タイトルそのものを文字ではなく、画像で表示したい・・・そういうこともあると思います。
フォトショップなどの画像ソフトでロゴを作成したり、ですね。


それについては、少し説明が必要なので次回に。
今日は少し短めでしたね、すみません。



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
この記事はいかがでしたか?少しずつですが、頑張っています。
応援お願いします!

e_02.gif     banner_03.gif
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。