- ベストアンサー
【ホームページ】中心に寄せたページの枠外に色を付ける
ホームページのひとつのページの横幅が全画面ではなく、画面の7割程度の幅で作られ、中央揃えされていて、例えば背景が白。 それ以外の空いた左右の場所はオレンジ、などといったページを見るのですが、このそれぞれに異なった背景の色（画像）を設定する方法がわかりません。中央揃えの方法はわかります。ホームページビルダーVer.8で作成します。 異なった背景が設定できるということは、表などで分かれているのでしょうか？ページの見出しから最後まで表に入れて試してみましたが、ページ上部・下部は外枠の色になってしまします。 専門用語知識不足ですが、どなたか質問の意味がお分かりになられる方がいらっしゃいましたら、どうかよろしくお願い致します。
- fumu78
- お礼率75% (24/32)
- その他（インターネット・Webサービス）
- 回答数4
- ありがとう数7
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＞文字の色を変えたり、全ページに共通する変更は、スタイルのcssフファイルを作成すれば一発で変更できますね。 ●全てのページの先頭に <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="color.css" type="text/css"> を入れておく。 CSSファイルで各タグ（body、h1、img、pなど）の設定をする。 これで、全頁が統一のとれたデザインになりますし、後で設定を変えるときもCSSファイルだけを変更するだけです。 また、ヘッダーやフッターなどの特定の場所を統一したデザインにするには、HTMLファイルで <div id="aaa"> ここは特定の場所、名前はaaa </div>としておいて、 CSSファイルの中で #aaa {文字の大きさ、文字の色など｝を設定します。 ●h1 ・・・cssファイルの中では＜＞で囲まない。 { background-color:RGB(00,10,50); 背景の色の指定：暗い青。 color: RGB(200,180,200); 文字の色の指定：白に近い灰色。 text-align:center; text（文字）のalign（整列）：センター border-top:5px solid RGB(250,150,150); border（境界）のtop（上）：5pxの太さ、solid（実線）、線の色。 ★RGB(250,150,150);はピンクに近い色。 border-bottom:5px solid RGB(250,150,150);} border（境界）のbottom（底）の線の指定；・・・ ●色の指定は＃○○○○○○でもRGB(○○,○○,○○)のどちらでも、かまいません。 色の指定の仕方は参考URL１へ。 ●CSSファイルの中で指定できる字の色、大きさ、左右の配置などは、 参考URL２へ ｈ２．aaa｛aaaという名前がついたｈ１の設定｝とすれば、 この設定は ＜ｈ２ id＝”aaa”＞ ＜/ｈ２＞には適応されますが、 ＜ｈ２＞ ＜/ｈ２＞には適応されません。
その他の回答 (3)
- 三郷北 M君（@mkun55555）
- ベストアンサー率47% (43/90)
★序論 SEO対策にとって、「フレーム」は厳禁です。 ヤフーやグーグルの公式HPに書いてあります。 そこで、CSSファイルを利用するのです。 CSSファイルの利用はWEB標準になっています。 よって、CSSファイルに対応していないホームページビルダーを使ってはダメです。 <meta http-equiv="Content-Style-Type" content="text/css">は必要ですが、重要ではありません。 重要なのは<link rel="stylesheet" href="color.css" type="text/css">の部分で、これで"color.css" という名前のCSSファイルの利用を宣言しています。 ★本論 ▲HTMLファイル -----HTMLファイルの内容始まり（ファイル名は自由） <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="color.css" type="text/css"> <title>ここに、検索で使われそうなキーワードを入れるのがSEO対策に最重要</title> </head> <body> <div id="pagebody"> <h1>検索で使われそうなキーワードを入れる</h1> ここは「pagebody」というidで,"color.css"で、<br> left:15%; background:#ffffff; width:70%;と定義されているので<br> 左に画面１５％のあき、本体の幅は７０％、よって、右に１５％のあきができる。<br> 結果として、中央揃えになる。 background:#ffffff;で背景（background）は白になる。<br> <h2>両側の色が#4F63FD（青）になる理由</h2> "pagebody"の両側の範囲は、＜body＞で、<br> ＜body＞は"color.css"で、背景（background）が#4F63FDと指定されているからである。 </div> </body> </html> -----HTMLファイルの内容終わり ▲color.css -----color.cssの内容始まり（ファイル名はcolor.css） body {background:#4F63FD;} #pagebody{position:relative; left:15%; background:#ffffff; width:70%;} /* ここからは蛇足（コメント） ---------------------------------------------------- */ h1 { background-color:RGB(00,10,50);color: RGB(200,180,200);text-align:center; border-top:5px solid RGB(250,150,150);border-bottom:5px solid RGB(250,150,150);} h2 { background-color:RGB(00,10,50); color:RGB(220,210,220);text-align:center; border-top:2px solid RGB(250,150,150);border-bottom:3px solid RGB(250,150,150);} -----color.cssの内容終わり ★結論 -----HTMLファイルの内容と-----color.cssの内容をコピペして、保存。 HTMLファイルをIEなどで表示してみて、あなたの思うような結果にならなかった場合は、また、ここへ、ご連絡ください。
補足
大変丁寧なご説明をありがとうございます。感謝感謝。 今まで、お手本にしたいホームページのソースを見ても、 背景色の指定等がないのに、どうして色分けされてるんだろう？ と、？？？でした。 cssファイルのおかげで、細かな設定が出来ているんですね。納得。 ということは、文字の色を変えたり、全ページに共通する 変更は、スタイルのcssファイルを作成すれば一発で変更できますね。 教えていただいた通り、コピペ・保存にて編集してみました！ ただ、見出しの背景が黒になり上下にピンクのラインが付く のですが、これはcssファイルの h1 { background-color:RGB(00,10,50);color: ・・・・ のカラーやボーダーという後あたりを変えればいいのでしょうか？ しつこいですが、とても頼りにしていますので、どうぞよろしくお願いします。
- 三郷北 M君（@mkun55555）
- ベストアンサー率47% (43/90)
質問の意味が良くわかりませんが。 SEO対策の為には、CSSファイルを使うのが、最良の方法です。 -----HTMLファイルの中で、color.cssというCSSファイルを指定します <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="color.css" type="text/css"> </head> <body> <div class="aa"> <div class="a">111<br> aaa<br> 背景白、左右は赤。 </div> </div> <div class="bb"> <div class="b">222<br> bbb<br> 背景灰色、左右は青。 </div> </div> </body> </html> -----color.cssの中身は body {background:#ff9900;} .aa {background:#ff0000;} .a {position:relative; left:15%; background:#ffffff; width:70%;} .bb {background:#0000ff;} .b {position:relative; left:15%; background:#aaaaaa; width:70%;} ----- 「CSSファイルを利用したホームページの作成」 を検索してみてください。
補足
各名称などがわからないので理解しにくいかと思います。 すみません。 第1に、1ページ全体が画面7・8割ほどの 横幅で背景色は白・中央揃え。余りの左右の空白は例えば 〈#4F63FD〉の色にしたいのです。 おまけでSEO対策できれば言う事なしです。 現在の自分のHTMLファイル中に <meta http-equiv="Content-Style-Type" content="text/css"> は、ありましたが、それ以下をコピペすれば良いのでしょうか？ 教えていただいた参考URL、見てみましたが・・・ どうも分かりませんでした... よろしくお願いします。
あいにくホームページビルダーがないので自信はないのですが、 「フレーム」でできるのではないでしょうか？ フレームの枠線やスクロールパーを表示しないようにして、 フレームの一つ一つに異なった背景を設定できるのではないかと思います。 ホームページビルダーのヘルプでフレームという単語を調べてみてください。 がんばってくださいね。
お礼
ありがとうございます。 ビルダーを調べたり、色々試し、なんとかできそうです。 頑張りますっ。
補足
すみません、いい忘れていましたが、 条件として、フレームを使用したくないのです。。 以前のＨＰはフレーム組みをしていたために、SEO対策上 好ましくない状況になりまして。検索から入ったときに 1つのフレームしか表示されないなど・・・ 方法はありますでしょうか？
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ありがとうございます。 この回答で、さらに理解が深まりました。 参考URLもとても良いですね。 初心者向けのご説明、大変助かりました。 本当にありがとうございます。