ヘッダと配置の整備

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


アフィリエイトで稼ぐのは厳しい ⇒ 速習HTML ⇒ ヘッダと配置の整備


ヘッダに色を付け、コンテンツ全体配置を左寄せにします。

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


紹介ページの概要を作成 ← | → 見出しをデザイン


● ヘッダを設定して色を付けます

h1見出しと概要文までをヘッダとし、この領域に色を付けます。

ヘッダ部分をブロック要素にして、この中にh1見出しと概要文が入る様にします。

@ スタイルシートに新たにIDセレクタを追加します。名前はheaderにします。

#header {background-color: #66aa66; 背景色を濃い緑
      padding: 5px 20px;}    上下、左右の余白

・さらにヘッダ中の概要文だけに適用するスタイルを追加します。

#header p
    {color: #222222;   文字色をほぼ黒
    margin-top: 5px;}   上部余白


A htmlで、ヘッダとなる部分を<div>タグで囲みます。属性にはheaderを指定します。


 <div id="containertop">

 <div id="header">
 <h1>野辺山高原社</h1>
 <p>牛乳はもちろん、八ヶ岳の自然もお届けする牛乳の工房です</p>
 </div>
・ ・



● ここまでの内容説明

@新たにidセレクタを追加し、htmlも<div>を追加しました。2セットの<div>が入れ子になりました。

h1と概要文に適用されるプロパティが重複する場合には、最も近い<div id="header>のものが適用されます。

A #header p
<div id="header>が適用されるブロック内のpタグだけに適用されます。
前のページで出てきたリストタグのスタイル li a での方法と同じです。

サンプルを表示して見ます。

  個別ページ




● コンテンツを左寄せにします

スタイルシートのcontainertopを変更して左寄せ設定にしてしまうと、折角中央に揃えたトップ画面も
コンテンツが左に寄ってしまいます。

この不都合を回避する為に、新たにidセレクタを追加します。

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

内容はcontainertopから、text-align:center; を外したものになります。
containertopを全てコピーし、名前を変更して、text-align:center;を削除します。

名前はcontainerとします。

#container      
    {border: solid 2px #bbffaa;      
    padding: 20px;      
    background-color: #ffffff;      
    width: 600px;      
    margin-left: auto;      
    margin-right: auto;      
    text-align:center; }    この一文を消します


A htmlを修正します。
containertop を containerに修正します。


 <div id="containertop">
 ↓ 修正する
 <div id="container"> 

 <div id="header">
 <h1>野辺山高原社</h1>
 <p>牛乳はもちろん、八ヶ岳の自然もお届けする牛乳の工房です</p>
 </div>


表示して見ます。下の様になって左に寄りました。

  個別ページ1




関連記事


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