こんにちは。
前回cssのテーマではタイトル画像（ヘッダ背景）を好きな位置に配置する という記事をかきましたが
画像を動かしたからタイトル文字もバランスのいいところへ配置したい
と思う人もいるかもしれません。
とうことで
今回はタイトル文字と概要の文字を好きな位置に配置するcssの記述です。
[デザインの変更]→[スキンCSSの編集]
でcssを見るとこういう記述があると思いますが赤字の部分の数値を変更します。
変更してください、さっくりと。
/* ---------- header : ブログタイトル部分 ----- */
#header{
height:200px;
background-color:#E0E0E0;
}
#header h1,
#header h2{
padding:0;
margin:0;
}
#header h1{
padding-top:15px;
margin-left:10px;
text-decoration:none;
}
#header h2{
margin-left:10px;
}
数値が大きくなればなるほど移動します。
h1がタイトルでh2が概要です。
marginとpaddingは共に余白を作るというものですが余白を作る部分が異なります。
marginは指定された要素の周りに空白を作りますが
paddingは指定された要素そのものに余白ができて要素領域が広がります。
例えば
スキンのスタンダード（グレイ）の場合デフォルトではこうです。
（クリックで原寸大に拡大）
こうです！って・・・・わかりやすいように文字に対してはバックに色をつけてます。
（h1には#999999をh2には#ffffffを）
h1に記述されてるpadding-top:15px;がh1領域を上に15px広げています。
h1に記述されてるmargin-left:10px;がh1領域から左に10pxの余白を作っています。
h2に記述されてるmargin-left:10px;がh2領域から左に10pxの余白を作っています。
この要領でタイトル文字と概要文字の位置を変えてみたいと思います。
もう少し文字を下げてみます。h1のpadding-topを130pxに変更。
ぐーんと下に下がりました。
あれ？空白作るならmargin-top:130px;でもよかったんじゃないの？
と思った人がいるかもしれませんが（いるかな？）
margin-topではIE では130px下がって表示されますがNN では表示されません。
ぴったし上にくっついたままです(′ω｀)ノ
次に
テキスト（タイトル文字と概要）を右寄せにしたいと思います。
/* ---------- header : ブログタイトル部分 ----- */
#header{
height:200px;
background-color:#E0E0E0;
}
#header h1,
#header h2{
padding:0;
margin:0;
}
#header h1{
padding-top:130px;
margin-left:10px;
text-decoration:none;
text-align:right;
}
#header h2{
margin-left:10px;
text-align:right;
}
h1,h2領域内でテキスト（タイトルと概要）を左に寄せるために
text-align:right;をh1とh2に入れました。
なんかh2（概要）がダラダラと長くないですか？
短く改行したい人はこのh2の領域を小さくします。
そのためにはmarginで左に余白を取ります。
h2にmargin-left:500px;を入れます。
/* ---------- header : ブログタイトル部分 ----- */
#header{
height:200px;
background-color:#E0E0E0;
}
#header h1,
#header h2{
padding:0;
margin:0;
}
#header h1{
padding-top:130px;
margin-left:10px;
text-decoration:none;
text-align:right;
}
#header h2{
margin-left:10px;
margin-left:500px;
text-align:right;
}
左側に500pxの余白ができてダラダラっと長かった概要は改行されました＾＾
でも、なんだか右に寄りすぎな気がします。
右に余白を入れてみます。
h1とh2にmargin-right:10px;を入れます。
あ、この際ふたつ共いっきに変えることもできます。
それはh1とh2両方指定してるんですよというこの場所に入れます。
/* ---------- header : ブログタイトル部分 ----- */
#header{
height:200px;
background-color:#E0E0E0;
}
#header h1,
#header h2{
padding:0;
margin-right:10px;
}
#header h1{
padding-top:130px;
margin-left:10px;
text-decoration:none;
text-align:right;
}
#header h2{
margin-left:10px;
margin-left:500px;
text-align:right;
}
このように,で仕切って一度に全部の指定ができます。
だからh1とh2両方にあるものはココに入れちゃってもいいのです。
さて、完成品はこちらです。
画像は200px×130pxの小さな画像を左上固定のリピート無しです。
背景白で作っちゃったからわかりずらい・・・私ってバカヽ(;´Д｀)ノ
ところでみなさん！
h1とh2というものは検索をされる時にとても重要です。
h1で囲んだ部分は「とっても大事ですよ～」と認識され
h2で囲んだ部分は「次ぐらいに大事ですよ～」と認識されます。
だから特に必要ないとは思わずにちゃんとサイトの趣旨を書くと
yahooやgoogleで検索にひっかかりやすくなります。
同じく各記事のタイトル
例えば今日のこの記事のタイトルは
タイトル文字と概要を好きな位置に配置する
ですが記事ごとのタイトルはh3というタグで囲まれてます。
だからみなさん、各記事のタイトルは大事なんですよ～
「困ったよ～」とか「ヽ(;´Д｀)ノ」のような内容がよくわからないタイトルでは
検索にもひっかかりにくくなります・・・。
ここまで書いて大事なこと忘れてました・・・
タイトル画像がどうとかタイトル文字の位置がどうとかの前に
タイトルの文字の色や大きさ変えるのが先だったんじゃないですかね？？？(-"-;)
次回 はタイトル文字の色を変える
をやります・・・あーん。ごめんなさい。
ヽ(;´Д｀)ノ