ＦＣ２ブログの背景に写真を使いたい

質問

ＦＣ２ブログを使用して
まだ１ヶ月位の初心者です

ただ、ブログは初心者ですが
パソコンとネットの知識は中級と自己判断してます

それでＯＳはビスタで
ブラウザはＦｉｒｅｆｏｘ３.５なんですが
ブログの背景に、現在はテンプレートを使用してます

しかし、ここに自分の写真を入れられる事を知って
変更したいと考えました

ただ、入れるとしても
画像の大きさから考えて
１枚で…は厳しいと思うんで、２～３枚を横に並べて
設定しようと思います

そこで聞きたいんですが
下記ＨＰで変更方法の解説を見ました
『背景の色を変更』
http://blog.fc2.com/custom_manual/#m004

そこには、こういう↓書き方で解説してましたが
--------------------------------------------------------------------------------

body {
background-image : url("画像のパス"); /* 背景画像の設定 */
background-repeat : repeat; /* 背景画像を横縦タイル状に並べる */
background-position : left top; /* 開始位置を画面左上に設定 */
background-attachment : fixed; /* 背景画像の位置を固定 */

-------------------------------------------------------------------------------

これが私のブログです↓

-------------------------------------------------------------------------------

body {
background-color: #3F3F3F;
color: #333333;
font-family : Verdana, "ＭＳ Ｐゴシック", sans-serif;
font-size: x-small;
background-image: url(http://blog-imgs-41.fc2.com/t/m/p/tmpllabo/tmpl013_bg.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: center top;
}

-------------------------------------------------------------------------------------

解説から考えると、私のブログ内の
「background-image: url(http://blog-imgs-41.fc2.com/t/m/p/tmpllabo/tmpl013_bg.jpg);」
内の“http://blog-imgs-41.fc2.com/t/m/p/tmpllabo/tmpl013_bg.jpg”
の部分に写真のＵＲＬを入れれば良いんでしょうか？

それと、以前、私が読んだ本の中には
「写真は予め、タイトル部分の大きさ７８０×２００ピクセルに
合わせてリサイズしよう」
と書いてありました

しかし、添付した写真が私の現背景写真なんですが
枠で囲んだ部分が、そのサイズなんでしょうか？
もし、そうだとしたら
このサイズ、どうやって測るんでしょうか？
ちなみに右クリックでプロパティを見ようとしても
画像では無いからだと思いますが

右クリックの項目にプロパティの項目が出て来ません
もし違うとしたら、どの様に解釈すれば良いんでしょうか？
又、何か気を付ける事は、あるでしょうか？
宜しく御願いします

回答No.3

naokita

No.1・2 naokita。 補足要求・お礼への回答。
質問から脱線していますので最後の回答にさせて頂きます。
---------------------------------
まず、一回初心に戻ってみましょうか。
HTMLで自分の画像が表示されましたね？
HTMLで表示するタグや要素をそのままCSSに書いても表示される訳がありません。
以前の質問に回答した背景色のRGB三原色でのHTMLとCSSの違いと同じ。
http://oshiete1.goo.ne.jp/qa5194535.html
ここのNO.1で「CSSの●●●部分に画像URLを」と、回答しましたが、
HTMLを入れろとは回答していませんので、もう一度、NO.1の回答を確認後スタイルシートのURL部分のみだけを変更して下さい。
ご自分でもNO.1の捕捉に書いていたように、その時点でわかっていたはずです。なのに何故、別の方法（HTMLまで記述する）をするのでしょうか？
※ この辺はHTMLとCSSを勉強して下さい。
---------------------------------
＞＞このボタンを押しても、画像の部分が白く、なってるだけで
上記の通り正しく設定すれば反映すると思いますが・・・
それ以外はFC2の仕様なのでわかりません。
---------------------------------

非常に余計な御世話かもしれませんが、
確かに、確認してからアップした方が確実ですが、
この程度の問題（重要物件以外）は、
机上の理論ばかりで何も出来ない・変わらない・発展しないよりは、
learn from one's mistakes
Don't be afraid of making mistakes.　「失敗してもいいじゃないか」

補足

“質問から脱線していますので最後の回答にさせて頂きます。”

質問内容は最初から変わってないと判断してます
但し、前回の返答からは違ってますが
主旨は同じだと思ってます

“何故、別の方法（HTMLまで記述する）をするのでしょうか？”

この事に関しては、書き忘れましたが
私の勘違いで、記事本文にアップした写真のタグを
スタイルシートには反映出来ないのを
変更する時に思い出した為です

“まず、一回初心に戻って…回答しましたが、”

この事に関しても同様です
変更しようとした時に、以前に教えて頂いた事を
思い出したんです

つまり分かってて…じゃなく
変更する時に気が付いたんです

“この程度の問題…「失敗してもいいじゃないか」”

確かに慣れてる方から見れば
そうかも知れませんが
私自身、以前に似た様な失敗を、した時
復旧に相当な時間が掛かり
しかし、結局元に戻らず諦める事に、なった為
そうなる前に質問した訳です

でも、今回の問題では
結局、画像のＵＲＬを調べる方法も分かりませんし
教えて頂く事も不可能の様ですから結構です

回答No.2

naokita

No.1 naokita 補足要求への回答。
どうやら理論派のようですね。　まずは自分の画像を設置し試せば答えが出る。その作業を一旦やってみれば理解できる事もある。
よって, 補足要求を放置しようと思いましたが
逆に勉強熱心なのかとも思いましたので一応回答します。
------------------------------
詳しく説明すると, テキストの中に画像があると考えるのではなく,
HTML内に全ての単独画像を引っ張り込んで合わせて表示するので
その画像自体も単独で表示可能なのです。
画像をクリック → プロパティですが、背景画像はこれができないので、
その画像URLを表示すれば良いし
http://blog-imgs-41.fc2.com/t/m/p/tmpllabo/tmpl013_bg.jpg
または, Firefoxなら　ツール → ページ情報 → メディア
他のアドオンでも可能だし、ソースを覗けばわかる。
この緑の背景画像の全体像や大きさを見れば、もう判断出来るでしょう。
------------------------------
background-repeat: repeat-x;　だから横にリピートしていると判断。
background-color: #3F3F3F;　と画像の下部の色から判断し溶け込ませていると思った。
------------------------------
テンプレートなんてどれでも関係ありません。
要は自分でHTMLやCSSを好みで多少改良すれば良いわけですから。

因みに背景画像の大きさを例画像の白いリンクメニューに合わせたい場合には、画像の大きさをリサイズして枠の幅にあわせてやる方法と、
枠幅を変更して画像の大きさに合わせてやる方法があるので、どちらでも対応可能。
このテンプレは,おそらく（未検証）ヘッダー部分の高さを height で設定し
画像の切れ目（葉っぱの部分）がちょうど白いリンクメニューの上部に綺麗に合うようにしていると思うので
この高さ（縦・height）の大きさを変更してやれば幅が変更可能になり
どんな画像にでもピッタリ合わせる事もできる。

色なんかのデザイン性も画像に色を融合させるか、
背景色に画像を似かよらせるかは、その人の方針。
と、いうことで頑張ってください。

お礼

スイマセン書き忘れました

実際に反映するか、どうかを見る為に
「スタイルシート編集」の所には
「プレビュー」ボタンが付いてます

しかし、元の画像の状態で
このボタンを押しても、画像の部分が白く、なってるだけで
これでは変更しても反映出来てるかが分からないんですが
表示が分かる方法を御存じ無いですか？
勿論、変更をクリックすれば反映するのは分かってるんですが
失敗した場合の事を考えると
変更ではなくプレビューで確認出来た方が有難いと思いました

補足

回答有難う御座います

ただスイマセン…
チョットそれ以前の問題に、なりました
と言うのが、画像のＵＲＬを変更しようと考えたんですが

「スタイルシート編集」の所で
上記で書いたＵＲＬの所に画像のＵＲＬを入れようと、しました
しかし、この方法を具体的に知らなかった様で
私の実行した方法は、画像のアップロードから
入れたい画像をアップ

そして「記事編集」の本文の中に
試験的に画像を入れ、そのＵＲＬを
「スタイルシート編集」に入れようと、しました

しかし、この方法だとスタイルシートの中に
ＨＴＭＬ形式のタグをスタイルシートに
反映される方法に、なりますから
本来反映出来ないんでは？…と思いました

ただ、私の場合
このスタイルシートの中に
どうやって自分の入れたい画像のＵＲＬを
入れたら良いのかを知りません

要するに、入れたい画像を、どうやってアップ
その後、どうやってＵＲＬを取るかを知らず
ＨＴＭＬ形式のタグＵＲＬを
そのまま入れると勘違いしてた様です

そこで聞きたいんですが
こういう場合は、どうすれば良いんでしょうか？

最後に、元の画像のピクセル数を調べる方法は分かりました
ちなみに７６０ｐｘ×５４０ｐｘでした

回答No.1

naokita

以前に別質問で回答した事があると思います・・・
まず、自分のOSとブラウザは無関係です。他の訪問者が回覧出来れば良いのですから。

この緑の背景画像の大きさは　760px × 540px　全く同じ大きさにしたいのなら
この大きさにご自分の画像をソフトでリサイズしてアップして
その画像URLを●●●のところに上書きするだけです。
background-image: url(http://●●●);
しかしながら、この画像を良く見ると上部の緑を下部に鏡のようにして背景色に溶け込ませボカしているので、
実際の高さは、540pxの半分の約270px前後でピッタリでしょう。
さらに横サイズもリピートですから１枚画像でもサイズは無関係になるのでどんなサイズでも良いのですが、
横に同じ画像がリピートするのだから画像の右側と左側がくっついた時に
変にならないように注意しなければいけないですね。

小さな１枚の画像をソフトで貼り合わせて大きくしても良いですけど。

補足

回答有難う御座います

なるほど…やはり画像を入れる方法は
簡単に言えば、私の書いた
ＵＲＬの所に、そのまま入れれば良い様ですね

ただ寸法の御指摘に関してですが
内容に関しては、一応分かりました
しかし、その寸法…つまり
“540pxの半分の約270px前後でピッタリでしょう”
に関してですが、具体的に、どうやって数字を出しましたか？

これは貴方の予測されてる数字が
間違ってるとかという意味じゃなく
もし合わなかった場合…又は
別のテンプレート等に変更した場合等
実際の寸法が分からないと、自分では何も出来ない事に、なる…
そう考えたんです

ただ…御指摘の
“上部の緑を下部に鏡のよう…溶け込ませ…横に…リピートするの…”
の事ですが

まず、それを、どの様に判断されましたか？
更に、特殊な画像だとして
難しい様なら、他のテンプレートに変更して…
という事も可能なんですが
その場合、どういう選び方を、すれば良いでしょうか？