重要なお知らせ

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

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

gooのアドバンスでカスタムブルーを利用しています。タイトル部に画像を挿入しようと下記をCSSに書き込むと background-image: url(背景画像のURL); background-repeat: no-repeat; /* 繰り返し無し */ background-position: right; /* 右寄せ */ } 記事の中に画像が挿入されていまいます。しまいます。なぜですか?]

A 回答 (7件)

> カスタムブルーで何度やってもうまくいきません。


> タイトルを中央に配置したいんですが・・・。
> CSSで編集するんでしょうか?どなたかおしえてください

/* ブログのタイトル部上 */
.headerLight {
********************
********************
********************
}

上記の中に次の一行を加えます。

text-align: center;
    • good
    • 0

> ブログタイトルのすぐ右に配置したい時はどこを変更するんですか?



えっ !?・・・ ( ^^;
となると、今までの説明はすべてご破算です。それを実現するためにはCSSデータではなくHTMLの方を編集する必要があります。

「カスタムブルー」のタイトル部は、次のようにテーブルを上下2つのセルに分割して、上にブログタイトル、下にブログの説明文を記入しています。
------------------------------------------------------------
<table border="0" cellspacing="6" cellpadding="0">
<tr>
<td align="left"><a href="【ブログのURL】" class="bTitleLink"><span class="bTitle">【ブログのタイトル】</span></a></td>
</tr>
<tr>
<td align="left"><span class="bDesc">【ブログの説明文】</span></td>
</tr>
</table>
------------------------------------------------------------
ですから、タイトルの右側に画像を入れる場合は、下記のようにテーブルを左右に分割して、右側のセルに画像タグを書くといいでしょう。
↓↓↓
------------------------------------------------------------
<table border="0" cellspacing="6" cellpadding="0">
<tr>
<td align="left" nowrap><a href="【ブログのURL】" class="bTitleLink"><span class="bTitle">【ブログのタイトル】</span></a></td>
<td rowspan="2"><img src="【トップ画像のURL】"></td>
</tr>
<tr>
<td align="left"><span class="bDesc">【ブログの説明文】</span></td>
</tr>
</table>
------------------------------------------------------------

なお、上記はあくまで一例です。「ブログタイトル」・「ブログの説明文」・「トップ画像」をどのような位置関係で表示するかによって、HTMLタグまたはスタイルシートの記述の仕方は様々に変わります。
    • good
    • 0
この回答へのお礼

とてもわかりやすく教えていただいてありがとうございました。

お礼日時:2008/02/03 19:43

/* ブログのタイトル部上 */


.headerLight {
background-image: url(背景画像URL);
background-repeat: no-repeat ;
background-position: right;
background-color: #376599;
}

……でどうですか?

この回答への補足

右にはできました。ありがとうございます。
ブログタイトルのすぐ右に配置したい時はどこを変更するんですか?
今のままleftにするとタイトルとかぶってしまいます。

補足日時:2008/02/02 00:01
    • good
    • 0

誤解があるようですので、ちょっと補足します。



/* ブログのタイトル部上 */
.headerLight {
height: 300px;
background: url(背景画像のURL) no-repeat top left;
background-color: #376599;
}

先の回答で上記のような例を書きましたが、「 height: 300px; 」の部分は実際に表示する画像の高さをピクセル数で指定してください。
高さが200ピクセルの画像ならば、「 height: 200px; 」です。
    • good
    • 0

> 画像が中心部分になってしまいます。

右側におきたいのですが、‥

答えを書くのは簡単なのですが、個々のスタイル設定の意味をぜひ覚えていただきたいので、先ずは下記をご覧になってください。
仕組みさえ解ってしまえば簡単です♪ ( ^^

TAG-index 「背景画像の表示位置を設定する」
http://www.tagindex.com/stylesheet/box/backgroun …

* もし読んでも解決しなかったら、またお尋ねください。

この回答への補足

申し訳ございません。ブログタイトル左側に画像を挿入しようおもっていますが、うまくいきません。左には挿入できましたが、タイトルとかぶってしまいます。
タイトルの文字をセンター配置する方法と画像をタイトルの左に配置する方法を教えていただけますか?
下記の通りすると、タイトルとかぶってしまいます。

/* ブログのタイトル部上 */
.headerLight {
height: 150px;
background: url(​​http://blogimg.goo.ne.jp/user_image/5b/0e/8876e7 …​ no-repeat top left bottom;
background-color: #376599

補足日時:2008/02/01 22:01
    • good
    • 0

タイトル部の背景に画像を表示するためには、CSSデータの47行目辺りにある次の個所でスタイルを設定します。


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

* なお、下記のように背景画像のファイル名、繰り返し、位置を一括設定することも可能です。

【例】
/* ブログのタイトル部上 */
.headerLight {
height: 300px;
background: url(背景画像のURL) no-repeat top left;
background-color: #376599;
}

この回答への補足

ありがとうございます。画像が中心部分になってしまいます。
右側におきたいのですが、よろしくおねがいします

補足日時:2008/02/01 17:15
    • good
    • 0

その指示は、.headerLightにしてますか?


http://blog.goo.ne.jp/info/blog_css_kozo.html
    • good
    • 0

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