紹介ページ画像の廻り込み

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


アフィリエイトで稼ぐのは厳しい ⇒ 速習HTML ⇒ 画像を廻り込ます


紹介ページ画像を廻り込ませます。

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


紹介ページに画像を組込む ← | → イベントページの概要を作成


要素の廻り込の、float属性を適用して、画像を左右に廻り込ませます。

小見出し1の記事画像 : pic1.gif 画像を右側に廻り込ます。
小見出し2の記事画像 : pic2.gif 画像を左側に廻り込ます。
小見出し3の記事画像 : pic3.gif 画像を右側に廻り込ます。


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

.img-right    クラスセレクタ
     { float: right;    右への廻りこみ指定
       margin-left: 15px;    左コンテンツ境界との余白
       margin-bottom: 15px; }    下コンテンツ境界との余白
  
.img-left    クラスセレクタ
     { float: left;    左への廻りこみ指定
       margin-right: 15px;    右コンテンツ境界との余白
       margin-bottom: 15px; }    下コンテンツ境界との余白


● htmlのimgタグ内にクラス指定を追加します。

 ここより上のhtmlソースは割愛。


 <h3>高原の中にある工房</h3>

 <p><img class="img-right" src="pic1.gif" alt="画像1"/>
 牛乳の工房は、自然豊かな丘の林の中にあります。</p>
 <p>林の入口から細い小道を通り、八ヶ岳に向かって進んでください。しばらくすると、
 【 途中略 】

 <h3>高原の四季も楽しむことが出来ます</h3>

 <p><img class="img-left" src="pic2.gif" alt="画像2"/>
 牛乳の工房では、八ヶ岳の四季折々の自然を体感することができます。<br/>
 <br/>
 【 途中略 】

 <h3>工房のまわりにある散策名所</h3>

 <p><img class="img-right" src="pic3.gif" alt="画像3"/>
 工房のまわりにはいろいろな名所があります。絶景赤岳、飯盛山、プラネタリウムを
   備えた資料館、高原レタス畑、電波望遠鏡を備えた天文台、日本一高い場所にある駅…。1日では
 【 途中略 】

 ここより下のhtmlソースは割愛。



・float属性

要素の廻りこみには、スタイルシートでfloat属性を使います。廻り込み方向は属性値で指定。

 float:right; 要素を右に廻りこませる
 float:left ; 要素を左に廻りこませる

この属性は画像だけで無く、様々な要素に適用できます。
例えば、このサイトではメニューの左カラムを<div>で囲んだブロック要素にして、要素全体をfloat属性で左に廻り込ませています。

・クラスセレクタ

スタイルの先頭にの付いているものを、クラスセレクタと言います。
#の場合にはidセレクタと言います。

どちらも、htmlで名前を引用して適用させます。引用したタグだけに適用されます。

クラスセレクタ、idセレクタの使い分けはハッキリとは決まってはいません。どちらでも構いません。

クラス属性は・・class="クラスセレクタ名"、id属性は・・id="idセレクタ名"で使用します。

例えば、スタイルシートで #img-right・・として、htmlで <img id="img-right"・・・としても、
今回のサンプルと全く同じ結果となります。




サンプルを表示した結果です。画像が廻り込み、ページが完成しました。

画像を廻り込ませて使うと画像の高さと文字コンテンツの高さ調整が必要になります。

左画像の時、文字高さが画像より高くなると、はみ出た文字が画像の下に廻りこみます。

また、文字高さが低いと、その下の記事が廻り込んできます。
その為、画像サイズを変更したり、改行を入れて文字コンテンツの高さを調整したり・・と中々厄介です。

  個別ページ




関連記事


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