配置の調整

このサイトについて サイトマップ


アフィリエイトで稼ぐのは厳しい ⇒ 速習HTML ⇒ 配置を調整する


コンテンツの配置を調整して中央配置にし、境界に色を付けます。

  この文字をクリックするとサンプルダウンロード出来ます。


画像を組み込む ← | → 背景に模様を付ける


全体の横位置を中央に揃え、境界を設定して境界に色をつけます。

今までで出来上がったページは全体に横長で左寄りになっています。また、全体が真っ白です。なので

  ・巾を設定する。600px にします。
  ・横位置を中央配置にします。
  ・境界と境界色を色をつけます。

htmlソースに新たにタグを追加し、そのタグからスタイルシートのスタイルを引用します。


● 巾設定、中央寄せ、色付き境界設定

@ スタイルシートに以下を追加します。

#containertop    セレクタの先頭に#を付けます。
    {border: solid 2px #bbffaa;    境界の巾と色を指定
    padding: 20px;    コンテンツと境界の余白を設定
    background-color: #ffffff;    この領域の背景を白
    width: 600px;    この領域の巾を600pxとする
    margin-left: auto;      
    margin-right: auto;      
    text-align:center;}    この領域内を中央寄せに設定


htmlソース側で、コンテンツ全体をcontainertopを言う名前の領域の中に納めてしまいます。
・この領域の境界を描き、領域内を中央表示します。
・領域の幅を600にして、領域内の背景は色にしておきます。


A htmlソースに行を追加します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>>野辺山高原の四季おりおりをお伝えします</title>
 </head>

 <body>

 <div id="containertop"> ← 行を追加

 <h1><img src="title.gif" alt="野辺山高原の四季"/></h1>

<p>野辺山高原の四季をお伝えする観光案内です。</p>

 <ul>
 <li><a fref="index.html">トップ</a></li>
 <li><a fref="about.html">牛乳の工房について</a></li>
 <li><a fref="event.html">イベントの案内</a></li>
 <li><a href="mailto:yatugatake@web.mail">メール</a></li>
 <li><a href="http://blog.xxx.xxx/">ブログ</a></li>
 </ul>

<p><img src="top.gif" alt="八ヶ岳" /></p>

<p>野辺山高原社は、八ヶ岳の自然を生かしたイベントや季節の商品をお届けしている会社です。高原にある「牛乳の工房」では、乳製品を楽しんだり、八ヶ岳の自然を楽しむこと出来ます。野辺山にお越しの際は、ぜひお立ち寄りください。 </p>

 </div> ← 行を追加

 </body>
</html>





● 各項目の説明。

@ ブロック要素

htmlは左から右、上から下へとコンテンツが段組みされます。
この為、レイアウト設定が大変難しくなります。


この解決方法として、コンテンツ同士を1纏めにして、1纏めにした単位で配置を変えたり、色を変えたりします。

1纏めにしたコンテンツをブロック要素と言います。

方法の1つが、1纏めにしたいコンテンツを<div></div>タグで囲む方法です。

このタグは大変便利で、大抵のサイトでは、何重にも入れ子で使っています。
このままだと、表示しても何も変化は起こりません。
通常はこのタグにプロパティを指定して配置や色を変えて行きます。


A IDセレクタ

スタイルシートのセレクタで先頭にの付いたものを、ID(アイディー)セレクタと呼びます。

このセレクタに属性として色や位置などを記述して、HTMLのタグからIDセレクタを呼び出して使用します。

IDセレクタを呼び出したタグだけに属性として設定した色や位置などが適用されます。

(例)
#midori { font-color: #00ff00 } : スタイルシート

htmlで<p id="midori" >この色は緑です。<p> とすれば この色は緑です。 と表示されます。

例題では、<div id="containertop">としてにidセレクタを適用させています。

B 境界

borderで境界の形式 幅 色を指定します。プロパティ値を半角ブランクで区切って複数指定できます。

・形式 solid:実線 dotted:点線 dashed:破線 double:二重線 等
・幅  ピクセルpx や センチメートルcm 等
・色  色名や色コードで指定します 赤なら#ff0000 等

 幅を0にすると指定形式や色を指定しても表示されません。


C 配置


text-alignで行揃えを行います

・text-align:left  左揃え
・text-align:center 中央揃え
・text-align:right  右揃え




サンプルを表示したイメージです。ほぼ完成です。
次ページで真っ白な背景に少し手を入れて完成させます。

  完成前画像




関連記事


もしも「今からアフィリエイトをやろう、稼ぐ。」 と考えているのでしたら、悪い事言いません。
本格アフィリエイトを断念して趣味+αにするか、本格的に勉強をするかのどちらかにした方が良いです。
アフィリエイトに必要なもの、事。それほど多くは有りません。
インターネットに接続されたパソコン、ASPに登録申請、ドメイン取得、レンタルサーバ、ブログ登録&投稿、サイト作成&サーバアップ、検索エンジンインデックス、地道なSEO。
ASPにアフィリエイト登録して初めてアフィリエイトが可能になります。
各ASPともアフィリエイト登録申請時にサイトかブログを提示して審査を受ける必要があります。
アフィリエイトサイトの同一ページに異なるASPの広告を並列同時掲載することもできます。
何とかサイトを作成してレンタルサーバにアップしても、そのままだと大海の孤島で誰も存在を知りません。
すぐ検索エンジンに登録して下さい。キャッシュとかインデックスとか言ってます。
携帯やスマートフォンなど、その時の最先端向きアフィリ教材もありますが、スタリも早くなります。
時代やツールが変っても、商材選定〜サイト構築などの取組み方や思考は変りません。
その辺りを詳しく解説しているものを選定しました。