せっかくCSSがいじれるようになったのだから 自分だけのBLOGデザインにしたい。でもCSSなんかわかんねー。ただ BLOGヘッダーの部分だけでも変えたいよ!という人のために 少し解説してみたいと思います。
基本的にCSSを保存しなければ へんてこにはならないので 書き換えてはプレビューで確認し それを繰り返せばいいでしょう。
まず CSSの編集画面をだしてみましょう
暗号みたいな文字が・・・ここでへこたれず さらっと見てみましょう。
* ----------------------- common ----------------------- *
ほにゃらら ほにゃらら があって次に
* ----------------------- header ----------------------- *
ってーのが来ると思うんですが そこがタイトルの入るBLOGの頭の部分の大きさの設定をしています。上から
#header{ ヘッダーのサイズ
#header h1 { タイトルの位置
#header h2 { BLOGの概要の位置(設定画面で入力できるもの)
上から●ピクセル 左から●ピクセルと設定が書かれてるのがわかるかな?
この辺の数値を変えてプレビュー を繰り返せばどこの部分を制御しているかわかると思う。
* ---------------- footArea --------------- *
*------------ font-information ------------- *
ここでは BLOGの文字のスタイルを設定する場所。
私のBLOGタイトルが長すぎるのでフォントを小さくしてみた
* ---------- background-color-control ----------- *
さて ここは背景カラー(または背景画像)等の設定
多分みんなが触りたいのはここかも?
#subFrame {
background-image:
url(BLOGヘッダーに表示したい画像のURL)
アメブロの画像フォルダーに画像をアップロードし そのURLを指示してあげるだけ、しかし 画像のファイル名の後ろの(_s)があると 小さい表示の画像になっちゃうので必ず(_s)の部分を削除しておいてね。
あとは 一番最後の部分かな・・
サイドバーの上下の位置調整
#sub_a{
#sub_b{
ここで上からどのくらい隙間を空けて配置するかを私は変更しました。現在私のBLOGの右サイドバー(一番上が広告エリア)はtop: 0px;という設定なので 隙間なく上にくっつけた感じになってます。
あまり難しいことは私もしりませんが ここに書いたこと等の質問はコメントで受けます。この機会に私も勉強しようかな。
◆ケイさんがめちゃくちゃわかりやすいCSSの説明をしています
◆ぐーすか&ぶーすかさんも細やかなCSSの説明
感動した!皆さんもチェックね。
◆complexologistさんの でかいフォントが重なるバグはCSSで回避できる
◆complexologistさんの コメントのフォントの大きさを戻そう!
私も早速ためしてみました。あーすっきりしました。
◆のぶさんの CSSの基礎(仕組み)についての説明
やり方より 基本的なことを知りたい人はこちらへ
基本的にCSSを保存しなければ へんてこにはならないので 書き換えてはプレビューで確認し それを繰り返せばいいでしょう。
まず CSSの編集画面をだしてみましょう
暗号みたいな文字が・・・ここでへこたれず さらっと見てみましょう。
* ----------------------- common ----------------------- *
ほにゃらら ほにゃらら があって次に
* ----------------------- header ----------------------- *
ってーのが来ると思うんですが そこがタイトルの入るBLOGの頭の部分の大きさの設定をしています。上から
#header{ ヘッダーのサイズ
#header h1 { タイトルの位置
#header h2 { BLOGの概要の位置(設定画面で入力できるもの)
上から●ピクセル 左から●ピクセルと設定が書かれてるのがわかるかな?
この辺の数値を変えてプレビュー を繰り返せばどこの部分を制御しているかわかると思う。
* ---------------- footArea --------------- *
*------------ font-information ------------- *
ここでは BLOGの文字のスタイルを設定する場所。
私のBLOGタイトルが長すぎるのでフォントを小さくしてみた
* ---------- background-color-control ----------- *
さて ここは背景カラー(または背景画像)等の設定
多分みんなが触りたいのはここかも?
#subFrame {
background-image:
url(BLOGヘッダーに表示したい画像のURL)
アメブロの画像フォルダーに画像をアップロードし そのURLを指示してあげるだけ、しかし 画像のファイル名の後ろの(_s)があると 小さい表示の画像になっちゃうので必ず(_s)の部分を削除しておいてね。
あとは 一番最後の部分かな・・
サイドバーの上下の位置調整
#sub_a{
#sub_b{
ここで上からどのくらい隙間を空けて配置するかを私は変更しました。現在私のBLOGの右サイドバー(一番上が広告エリア)はtop: 0px;という設定なので 隙間なく上にくっつけた感じになってます。
あまり難しいことは私もしりませんが ここに書いたこと等の質問はコメントで受けます。この機会に私も勉強しようかな。
◆ケイさんがめちゃくちゃわかりやすいCSSの説明をしています
◆ぐーすか&ぶーすかさんも細やかなCSSの説明
感動した!皆さんもチェックね。
◆complexologistさんの でかいフォントが重なるバグはCSSで回避できる
◆complexologistさんの コメントのフォントの大きさを戻そう!
私も早速ためしてみました。あーすっきりしました。
◆のぶさんの CSSの基礎(仕組み)についての説明
やり方より 基本的なことを知りたい人はこちらへ