見出しをデザイン

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


アフィリエイトで稼ぐのは厳しい ⇒ 速習HTML ⇒ 見出しをデザイン


見出しをデザインします。

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


ヘッダと配置の整備 ← | → 紹介ページの記事を入力


見出しを次の様にデザインします。

・見出し毎に大きさを調整

・h1見出し(大見出し)は白抜きにする。
・h2見出し(中見出し)は先頭にマークを付加する。
・h3見出し(小見出し)は先頭にマークを付加して全体に色下線をつける。

全てはスタイルシートで設定します。

● h1見出し(大見出し)

設定済みのh1セレクタの色部分を修正する

h1   { font-size: 1.5em;
      font-family: Verdana, Helvetica, sans-serif;
      color: #000000;
             ↓ 修正する
      color: #ffffff;  色を白に変更する。
      margin-bottom: 0; }


● h2見出し(中見出し)

以下を追加します。

h2   { font-size: 1em;    サイズを1倍
      border-left: solid 16px #66aa66;    左境界を横サイズ16で色を緑
      padding-left: 5px;    左余白設定
      margin-bottom:0;    下コンテンツとの余白0
      margin-top: 30px; }    上コンテンツとの余白30


 マークは、左境界の幅を16pxの太い緑線にすることで実現しています。
 下のh3見出しの様に画像を使用しても構いません。


● h3見出し(小見出し)

以下を追加します。

h3   { font-size: 0.875em;    サイズを0.875倍
      border-bottom: solid 2px #66aa66;    下境界を2pxの緑線に設定
      padding-bottom: 3px;    下境界との余白を3
      background: url(mark.gif) no-repeat;    背景画像ファイル名を指定
      padding-left: 20px;}    左境界との余白を20にする


h3見出しではを画像ファイルで準備して使用します。

background: url(ファイル名) で指定します。

また、繰り返し表示を禁止する為、 no-repeatを指定します。




表示して見ます。見出しがデザインされました。

  個別ページ




関連記事


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