上記ソースの各箇所の意味を教えて下さい。
また、
デジカメの画像や壁紙などは
どの箇所に挿入すればよいかも、
お願い致します。
id="loginform" : DIVタグのIDをloginformにする。CSSやJavaScriptからこのタグを操作するのに使えます。
style="..." : DIVタグにスタイルシートを付ける。
background: url("...") no-repeat; : DIVタグの背景画像を/images/templates/login.gifに設定し,そのままでは,背景画像の大きさよりもDIVで作られたブロックの方が大きかった場合に,背景画像が並べて表示(repeat)されるので,それをno-repeat(並べず,1つだけ表示)に指定する。
height: 600px; : DIVの高さを600pxに指定。
padding: 100px 0 0 20px; : パディングは,あるブロックの境界と,その中に入れる文字や画像との距離のことです(marginとは異なります)。以下のサイトを参照してください。top left bottom rightのパディングを順に100px, なし,なし,20pxに指定しています。
http://msugai.fc2web.com/web/CSS/padding.html
> デジカメの画像や壁紙などはどの箇所に挿入
ですが,このタグひとつではなにをどうすればよいかわかりかねるので,もう少し詳しく状況を説明していただかないといけません。
まず div というのはコンテナなどと呼ばれるレイアウト用の箱みたいなものだと思ってください。
id="loginform" というのは、CSSで #loginform として指定された内容がここに適用されるという意味の場合が多いですが、その他にも意味がある場合があります。参考↓
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/glo...
style= からあとはCSSによる見栄えの指定です。
background: url(/images/templates/login.gif)は、/images/templates/login.gifという画像が背景になるということ。別の壁紙を指定したければここを書き換えます。
no-repeat; は、背景画像を並べて表示しないで1つだけ表示するということです。
height: 600px; はdivで作ったコンテナの高さが600ピクセルということ。
padding: 100px 0 0 20px; というのは、divで作ったコンテナの中の余白が、上100ピクセル、右0、下0、左20ピクセルということです。
デジカメの画像などは、どこに入れるかによって変わります。普通は質問文に書かれたものとは別に、またはそれで作られたコンテナの中に(つまり<div id=~~~~>から</div>の間に)imgタグを使って
<img src="写真のファイル名">
などとします。
大変丁寧に有難うございました。
paddingは、余白を意味するんですね。
てっきり、縦×横かと…。
どうりで、長さが合わないな、と。
http://q.hatena.ne.jp/1157800784
このタグだけ見ても総合的な判断にならないため、あらかじめその点はご了承ください。本来タグはどの位置に、どのような意味を持って配置されているかが重要であり、いきなりdivだけを抜き出されても説明が不十分になる可能性があります。
<div id="loginform" style="background: url(/images/templates/login.gif) no-repeat; height: 600px; padding: 100px 0 0 20px;">
div
ブロック要素のタグで、ここに含まれた文章・画像はこのブロック要素の影響を受けます。平たく言えば、無色透明の箱のようなものと考えてください。
id="xxxxx"
このdiv要素のid名(属性)です。CSSやJavascriptでタグを指定するときに使います。
style="xxxxx"
スタイルシートを設定します。スタイルシートとは、見栄えのことで、平たく言ってデザインことであると捕らえてください(正確には見栄えの指定)。
background:url(/images/templates/login.gif) no-repeat;
指定したURLの画像をタグの背景に読み込みます。no-repeatとは、画像を背景で繰り返すか繰り返さないか、という意味で、この指定の場合は繰り返しません(繰り返す指定だと、タイル上に画像が張りめぐらされる)。
height: 600px;
タグの高さを記入します。この場合600px(ピクセル)です。
padding: 100px 0 0 20px;
タグの境界線から本文までの隙間を指定します。
この場合、top(上)が100px、right(右)が0px、bottom(下)が0px、left(左)が20pxです。
もし、画像をdiv内部に含めたいのであれば以下のようになります。
<div id="loginform" style="background: url(/images/templates/login.gif) no-repeat; height: 600px; padding: 100px 0 0 20px;"><img src="画像urlを指定" /></div>
もし、画像をこのタグの背景に指定したいのであれば、以下のようになります。
<div id="loginform" style="background: url(画像urlを指定) no-repeat; height: 600px; padding: 100px 0 0 20px;">ーーーー</div>
こうした場合は、url( )内は、このままでいいんですか??
↓こんな感じでログイン画面をカスタマイズしたいのですが…。
リンク先を拝見いたしました。
テンプレートで使用する画像ファイルは【画像アップロード】画面で簡単に管理する事ができます。使用する画像ファイルが用意できたらアップロードしご利用ください。
と書いてありましたので、画像アップロード画面に入り、画像をアップロードしてください。私はアカウントを所持していませんので、ログインすることは出来ませんが、もしアップロードする画面にフォルダ構造を示す記述があるならば、ご自分がアップロードしたフォルダをメモしておいてください。もし、そのような記述がない場合は、例文のパス(/images/templates/login.gif)に指定した画像が自動保存されると考えてもよいと思います(詳しくはお問い合わせください)。
なお、パスとは何かといえば、例えば以下のような構造のフォルダがあったとします。そして、イメージ(画像)を格納するフォルダをimageフォルダとします。
┃
┃
この場合、imageにアクセスするには
background:url(root/hatena/image/ファイル名.gif);となります。大方分かるとは思いますが、root内の、hatena内の、imageフォルダ内にある画像にアクセスする、という意味です。
先ほどアップロードしたフォルダをメモしてくださいと言いましたが、このように格納先までのフォルダ構造ごとメモしなければ意味がありません。そこだけお気をつけてください。
わざわざ図解で説明頂き、
大変ありがとうございました。
おかげさまで
見事挿入できました!
丁寧にありがとうございます。
デジカメの画像も、
やり方どうりすれば
普通にできました♪