gooブログの画像を背景に文字を・・・

解決済

質問者：misia3
質問日時：2007/01/25 15:11
回答数：5件

イラストなど画像を背景に文字を入れたいのですが、画像が二段に繰り返し入ってしまい見苦しくなっちゃいました。ぼかした花の写真をバックにUPしたのですが、一つだけ入れて文字は制限なく上に書き入れる方法ありますか？これはUPしたタグです。コメントが長すぎたのか画像が同じもの2段に入ってしまいました。
<center><table background="画像URL"width="680"height="470"><tr><td align="center"><font style=" color:blue;size:20px;"><strong><center>
●ここにコメントを入れました●</strong></font></center></td></tr></table></CENTER>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： 345itati
回答日時：2007/01/25 23:04

#1です、修正して馬鹿丁寧にいきます。

<div style="background-image: url(画像URL); background-repeat:no-repeat; backgroundattachment: fixed; background-position: top left; width: 680px; height: 470px; margin-left: auto; margin-right: auto; text-align: center; color: #0000ff; font-size: 20px; font-weight: bold;">テキストテキストテキストテキスト</div>

これだけ長いと、classかid属性をつけて、<head></head>部分に入れるかテンプレのCSS中に記述した方がいいですよ。

//エラーコンソールに全くエラーは無いし、W3Cのチェッカーでも問題無いって出るのに、Firefoxでも#1のソースは駄目でしたね・・・。

この回答への補足

すいません、画像はしっかり動かしてすきな所に置くことができたのですが、コメントの文字を画像のように、真ん中や左・右、そして教えていただいたHPの所のようにピクセルや％で任意の場所に書き込むのは、フォントのところにどんなタグを入れたらよいでしょうか？また教えていただいてもよろしいでしょうか？<m(__)m>

補足日時：2007/01/26 11:02

通報する

- 0
- 件

通報する

この回答へのお礼

早速、UPしてみたらちゃんと画像一つだけ背景に出ました(^^♪
どうも、ご丁寧にありがとうございました。
こんなふうに画像URLとコメントだけを入れるだけにしていただいたので、ソースがチンプンカンは私でも簡単でした。本当にご丁寧なアドバイスありがとうございました

通報する

お礼日時：2007/01/26 09:09

No.5

回答者： 345itati
回答日時：2007/01/27 14:01

gooブログって、何故か有効なタグに<p>が無いのが問題なのかな^^;

<p>を<div>にして、上部余白をpaddingで設定しましょ。。。(やっぱmarginだとまずいみたいです)
<div style="//中略//"><div style="padding-left: 10px; padding-top: 200px; width: 600px; text-align: left;">テキストテキスト</div></div>

上部余白の間隔はpadding-top:の後ろに来るピクセルサイズで調節して下さい。

- 0
- 件

通報する

この回答へのお礼

345itatiさま、本当に長々と有難うございました<m(__)m>
今ＵＰしてみましたらタグが消えたりすることなくＯＫでした(^^♪
数字を変えてＵＰしてみました！
質問する度に「またか～・・・」と多分思われてるだろうなぁ～と思いながらもあつかましく質問させていただいてよかったです(^。^;;
お助けいただきまして有難うございます<m(__)m>
私もいつかこんな風に誰かの力になれるように勉強したいと思います。

通報する

お礼日時：2007/01/27 14:30

No.4

回答者： 345itati
回答日時：2007/01/27 11:52

><div style="background-image: url(画像); background-repeat:no-repeat;background-position: top right; width: 680px; height: 470px; p style="margin-top: 200px; width: 680px; text-align: left;"color: #0000ff; font-size: 16px;font-weight: bold;">

これは記述ミスです^^;基本は
<div><p>テキストテキスト</p></div>
<div>要素の中に<p>要素を入れ子にするとはこういう記述になります。
これにスタイルシートを適用するので

<div style="background-image: url(画像URL); background-repeat:no-repeat; background-attachment: fixed; background-position: top left; width: 680px; height: 470px; margin-left: auto; margin-right: auto; color: #0000ff; font-size: 20px; font-weight: bold;"><p style="margin-top: 200px; margin-left: 10px; padding: 2px; width: 600px; text-align: left;">テキストテキスト</p></div>

ブログでは意図的にレイアウトを変えたい場合、スタイルシートの知識は必須ですので、これを機に基礎的な事から学ばれる事をお勧めします。。。

この回答への補足

本当にたびたびすいません！<m(__)m>
早速いただいたソースでＵＰしたのですが、topとleftの位置の指定ができないみたいです( p_q)
ＵＰすると
<div style="background-image: url(画像); background-repeat:no-repeat; background-attachment: fixed; background-position: top left; width: 680px; height: 470px; margin-left: auto; margin-right: auto; color: #0000ff; font-size: 16px; font-weight: bold;"><p>コメント
になってしまいます！
改善するのはどうしたらいいのでしょうか？<m(__)m>
なんか、また基礎を～ってお叱りを受けるのはわかっているんですけど・・・(∂。∂。;;

補足日時：2007/01/27 12:44

通報する

- 0
- 件

通報する

No.3

回答者： 345itati
回答日時：2007/01/26 18:47

>コメントの文字を画像のように、真ん中や左・右、そして教えていただいたHPの所のようにピクセルや％で任意の場所に書き込むのは、フォントのところにどんなタグを入れたらよいでしょうか？

<div>要素内に段落<p>を入れ子にして、これの位置を変えてみて下さい。
テキストの左揃え、中央揃え、右揃えは
text-align: left;
のように、左揃えはleft;、中央揃えはcenter;、右揃えはright;で指定します。(今のソースではcenter;で中央揃えになっている)

<div style="//中略//"><p style="margin-top: 200px; width: 680px; text-align: right;">上部に200ピクセルの余白を取って、テキスト開始位置が下がります。行は右揃え</p></div>

→http://www.tagindex.com/stylesheet/box/margin2.h …
→http://www.tagindex.com/stylesheet/text_font/tex …

一度スタイルシートをきちんと学ばれる事をお勧めします。。。本来は回答者に作業を全て求めるのはマナー違反ですので。。。

この回答への補足

お叱りは承知でまたお聞きします<m(__)m>
昨日教えていただいたタグの意味はよくわかるのですが、どこにどう入れて組み立てたらいいのかがわからなくて・・・(ノ_δ。)
<p style="margin-top: 200px; width: 680px; text-align: right;">
を左に寄せたかったので゛left"に変えて
<div style="background-image: url(画像); background-repeat:no-repeat;background-position: top right; width: 680px; height: 470px; p style="margin-top: 200px; width: 680px; text-align: left;"color: #0000ff; font-size: 16px;font-weight: bold;">
●コメント●
</p></div>
と、入れてみたのですが、文字は左端に寄ったものの、フォントサイズや色が反映されませんでした。入れ方が間違っているんだと思うのですが・・・
呆れ果ててしまうことは承知です！上から少し空けてコメントを書き始めて左も見栄え的に少しスペースを空けて左揃えにしたいのですが。。。
作業までお世話になるというのはマナー違反だとわかっています。あつかましいとわかっていますが、どうぞお助けいただけないでしょうか？
書き初めを上から少し空けて左も少しスペースを空けた左揃えのソースをどうか宜しくお願いします<m(__)m>

補足日時：2007/01/27 10:53

通報する

- 0
- 件

通報する

No.1

回答者： 345itati
回答日時：2007/01/25 16:49

<div style="background: url(画像URL) no-repeat fixed top left; width: 680px; height: 470px; margin-left: auto; margin-right: auto; text-align: center; color: #0000ff; font-size: 20px; font-weight: bold;">●ここにコメントを入れました●</div>

でも似たような表示になると思うけど？(背景は左上部に固定して、繰り返し表示させていません)
CSSで背景を指定
background-image: url(画像URL);
背景を繰り返したくない場合は、
background-repeat: no-repeat;
位置を固定する場合は
background-attachment: fixed;
背景画像の位置を指定するには
background-position: top left;
指定はこちらを参考
→http://www.tagindex.com/stylesheet/page/backgrou …
まとめて
background: url(画像URL) no-repeat fixed top left;
でも指定出来ます。

- 0
- 件

通報する

この回答へのお礼

アドバイスありがとうございます。早速、
<div style="background: url(画像URL) no-repeat fixed top left; width: 680px; height: 470px; margin-left: auto; margin-right: auto; text-align: center; color: #0000ff; font-size: 20px; font-weight: bold;">●ここにコメントを入れました●</div>
に差し替えてUPしてみたのですが画像が出ないんです(ノ_δ。)
コメントを入れたことによる改行とかが問題でしょうか？それと画像URLのところの（）はつけたままでいいのですよね？ちなみに外してみたのですがやはり画像は表示されませんでした。あとはタグを詰めたりとかの問題でしょうか？初心者ですいません<m(__)m>
アドバイス、またよろしくお願いします。

通報する

お礼日時：2007/01/25 21:07

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