こんにちは。
このブログでのcssに関する記事は
今日からcss始めました！
ぐらいの人にもわかるようにやさしーく書いてるつもりの私です。
わかりにくいでしょうか？
あ、もっと高度なデザインに懲りたい人はきっとこのブログのcssは意味ありません＾＾
（そのうちやるかもしれませんが）
前回
タイトル画像（ヘッダ背景）をリピートさせない という記事を書きました。
その結果
リピートさせない場合何もしなければ左側に画像が寄ってしまいます。
こんな感じです。
今回は
横幅760px以下のタイトル画像を好きな位置に固定したい！
という人のための記事です。
（横幅760pxで画像作っちゃうのが一番楽だと思う・・・という気持ちは置いといて・・・）
まずは簡単に
右に寄せたい真ん中に寄せたい
という場合のcssの記述です。
[デザインの変更]→[スキンCSSの編集]
・右寄せ
#header{
background-position: right;
}
・真ん中寄せ
#header{
background-position: center;
}
この点線内を全てcssの一番下にでも放り込むか赤字部分を#header{ }もしくはdiv#header{ }に記述してください。
[プレビュー]で確認したら希望どうりに画像が右や真ん中に移動しているハズです。
#header（ヘッダ部分）のbackground（背景）のposition（場所）はright（右）またはcenter（真ん中）
という指定をしたということです＾＾
次は
px（ピクセル）での指定です。
左から何pxの位置に配置
ということができます。
・左から300px
#header{
background-position: 300px;
}
数値が高ければ高いほどどんどん右に寄っていきます。
#header（ヘッダ部分）のbackground（背景）のposition（場所）は300px（左から300px）という指定をしたということです＾＾
次にパーセンテージでの指定もできます。
・左から50% （background-position: centerと同じ位置です）
#header{
background-position: 50%;
}
・左から100% （background-position: rightと同じ位置です）
#header{
background-position: 100%;
}
こちらも
#header（ヘッダ部分）のbackground（背景）のposition（場所）は50%（左から50%）または100%（左から100%）
という指定をしたということです＾＾
もちろん20%でも40%でもなんでもよいです。
あ、backgroundを背景と説明しましたが
この記事のタイトルにあるとおり
みなさんがタイトル画像と呼んでいるものは
実は、そこに画像がある・・・というのではなくヘッダ部分の背景なのです。
だから
タイトル画像（ヘッダ背景）の上で右クリックしても
"名前を付けて画像を保存(S)"
というものはありません。
そのかわりに
"名前を付けて背景を保存(S)"
があります。
あ、公式ブログは別です＾＾；
ところで
cssをずっと見てると
#header{ }
という記述をたくさん見かけるかと思います。
これは[スキンのカスタマイズ]でタイトル画像を挿入した際
アメブロさんが自動的にcssを記述した結果
画像の有無の記述、画像のリピートに対する記述、画像の縦幅に対する記述・・・などなど
がそれぞれ別々で記述された結果なのですが
実はこれらはひとつにまとめても一切問題ありません。
というより、まとめたほうが見やすいです＾＾；
なので
上記のような点線に囲まれた部分を丸ごと入れても問題ないんですが
すでにある
#header{ } の中にbackground-position: right;やbackground-position: center;を
放り込んだほうが後々良いかもしれません。
ちなみに
現在の私のcssの#headerに対する記述は
/* ---------- header : ブログタイトル部分 ----- */
#header{
height:400px; ※縦幅に対する記述
background-color:#ffffff; ※背景色に対する記述
background-image: url(http://ameblo.jp/user_images/f4/27/10037260155.jpg ); ※画像に対する記述
background-repeat:repeat-x; ※画像のリピートに対する記述
}
こうなっています。
あ、#headerがdiv#header{ } になっている人もいると思いますが
同じなのであまり気にしないで大丈夫です。
次回はタイトル文字と概要の文字を好きな位置に配置する
です＾＾