goo ブログ タイトル 画像

質問

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

回答No.7

noname#57571 · ベストアンサー

> カスタムブルーで何度やってもうまくいきません。
> タイトルを中央に配置したいんですが・・・。
> CSSで編集するんでしょうか？どなたかおしえてください

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

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

text-align: center;

回答No.6

noname#57571

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

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

「カスタムブルー」のタイトル部は、次のようにテーブルを上下２つのセルに分割して、上にブログタイトル、下にブログの説明文を記入しています。
------------------------------------------------------------
<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タグまたはスタイルシートの記述の仕方は様々に変わります。

お礼

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

回答No.5

haluhi

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

……でどうですか？

補足

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

回答No.4

noname#57571

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

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

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

回答No.3

noname#57571

＞ 画像が中心部分になってしまいます。右側におきたいのですが、‥

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

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

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

補足

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

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

回答No.2

noname#57571

タイトル部の背景に画像を表示するためには、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;
}

補足

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

回答No.1

Muller3

その指示は、.headerLightにしてますか？
http://blog.goo.ne.jp/info/blog_css_kozo.html