重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

【GOLF me!】初月無料お試し

gooブログのカスタムテンプレート「カスタムブルー」を使っています。

cssでブログTOP画像をいじっているのですが、
背景画像を挿入した際に、元々組み込まれている自身のブログタイトル、
およびブログの説明文が挿入した画像の隠れて欲しくない部分と
重なってしまいます。
左右への移動は 「paddinng-left」にて出来たのですが
上下への移動が出来ず(paddinng-top or bottomでは動かず)困っています。
(ブログタイトル&説明文をもう少し上の位置にずらしたいのですが。。)

位置の設定の仕方が間違ってる、もしくは何か別の方法があるのでしょうか?
----------------------------------------------------------------
/* ブログのタイトル部上 */
.headerLight {
background-image: url(挿入画像のurl);
background-repeat: no-repeat;
background-position: center;
background-color: #D8BFD8;
height: 300px;
}

/* ブログタイトル部等の区切り線 */
.rule {
background-color: #7B68EE;
border-color: #ffffff;
border-style: dotted;
border-width: 3px;
}

/* ブログのタイトル部下 */
.headerDark {
background-image: url();
background-repeat: ;
background-position: ;
background-color: #D8BFD8;
}

/* ブログのタイトル */
.bTitle {
color: FFF0F5;
font-size: 22px;
font-weight: bold;
font-family: 'Century Gothic',VERDANA,ARIAL,SANS-SERIF,Helvetica,'MS P ゴシック',Osaka;
padding-left: 70px;
   
}

/* ブログタイトルのリンク(<a href="#" class="etTitleLink">で使用) */
.bTitleLink {
text-decoration: none;
}

/* ブログの概要 */
.bDesc {
color: #ffffff;
font-size: 12px;
font-weight: bold;
padding-left: 100px;
}
---------------------------------------------------------------
※CSS初心者です。
 よろしくお願いいたします。

A 回答 (2件)

padding: 上 右 下 左;


または
margin: 上 右 下 左;
(すべて半角かつ、カンマは入れない)
paddingは、ある枠内でスペースをとるときに、
marginは、枠外にスペースをとるときに使用します。
position属性で一を動かすというのも手ですね。

http://www.w3schools.com/Css/pr_class_position.asp
    • good
    • 0
この回答へのお礼

さっそくのご回答を頂いたのに返事が遅れて申しわけありません

paddingプロパティを使って

 paddinng: ○px ○px ○px ○px;
 
 空けたいスペースの値を色々変えてみましたが、
 なぜか左右は移動するのに、上下は指定のスペース通りに動いてくれません(汗)
 position属性は使った事がなかったので、教えて頂いたサイトおよび
 他サイトを見つつやってみましたが、上手くいきませんでした
 もう少しいろいろ試してみたいと思います。

お礼日時:2009/10/31 21:47

#1です。


誤変換の訂正および追記です。

 訂正
position属性で「位置」を動かすというのも手ですね。

 追記
位置や空白の数値設定はマイナスの数字や小数も設定できます。
これによって解決が可能かもしれません。

この回答への補足

出来ました!

paddingを挿入する場所が間違っていたようです
/* ブログのタイトル */
.bTitle {
color: FFF0F5;
font-size: 22px;
font-weight: bold;
font-family: 'Century Gothic',VERDANA,ARIAL,SANS-SERIF,Helvetica,'MS P ゴシック',Osaka;

ではなく、
/* ブログのタイトル部上 */
.headerLight {
background-image: url(挿入画像のurl);
background-repeat: no-repeat;
background-position: center;
background-color: #D8BFD8;
height: 300px;
}
↑こちらにpaddingを設定することで解決しました(^^ゞ
やはり初心者、これからもっと勉強いたします。

ご回答に感謝しています。

補足日時:2009/10/31 22:16
    • good
    • 0
この回答へのお礼

訂正・追記ありがとうございます<(_ _)>

追記のマイナスの設定が出来るとは知りませんでした。
もう少しCSSを勉強しないといろいろいじるのは難しいですね

教えて頂いた事を参考にもう少し頑張ってみます。

お礼日時:2009/10/31 21:50

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!