スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【<table>~</table>】HTMLソースを上手に使いこなそう!その①(基礎知識編)

アフィリエイトで稼ぎたいなら、広告の貼り方はとても重要な作業ですね。

貼る位置も大事ですが、今回は、【<table></table>】HTMLソースを使って、より効果的な広告の貼り付けができるようなアレンジのやり方をご紹介したいと思います。

※前回【<table></table>】HTMLソース(画像とテキストと商品説明:文字の回り込み)を使ったアレンジをやってみました。

ご覧になりたい方は、
こちら!から➡http://afirieitorecord.blog83.fc2.com/blog-entry-7.html をご参考にしてみて下さい。

★まずは【<table></table>】HTMLソースによる表(2行・2列・上段が見出し枠)から、基礎知識を学ぼうと思います。

※ホームページビルダーを使用する場合は、手順①表のマークをクリック、②出てきたダイアログの行数と列数を希望の数に変更します。(ここでは、行数と列数を各「2」にします。手順③「最初のセルを見出しにする」にチェック付ける、手順④「OK」をクリックします。すると、小さな1cmほどの枠が出てきます。このHTMLソースを見てみましょう!


<table border="1">
<tbody>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>


と、色分けをしたタグで構成されているのが分かりますね。この解釈は、

<table></table>  <table>は、</table>とセットで使います。<table>はテーブルタグの始まりを意味し、後の</table>は終わりを意味します。
 <tbody></tbody>

ちなみに、
・ヘッダ部分
<thead></thead>
・フッタ部分
<tfoot></tfoot>
 <tbody>タグは、</tbody>とセットで使い、始まりと終わりを意味します。
<table></table>タグの構成を、ヘッダ部分・ボディ部分・フッタ部分に分けることができますが、そのボディ部分を表しています。
 <th></th>   <th>タグは、</th>とセットで使い、始まりと終わりを意味します。
「th」とは、「table header」の略で、表の見出しやタイトルとなるヘッダセルを作成するタグのことです。
 セルの内容がデータに対する見出しの場合はこの<th>要素を使用します。
 また、ヘッダセルのテキストは、一般的なブラウザでは太字になりセンタリングされます。
 <tr></tr>   <tr>タグは、</tr>とセットで使い、始まりと終わりを意味します。
「tr」とは「table row」の略で表の行部分(横方向)を指定するタグです。
 <tr>~</tr>で表の横部分を指定し、その中に<th>~</th>や<td>~</td>で表題や縦軸を指定してセルを定義します。
 <td></td>   <td>タグは、</td>とセットで使います。
「td」とは「table data」の略で、セルの内容がデータの場合は、この<td>要素を使用します。 表を作成する際には<tr>~</tr>で表の横部分を指定し、その中に<th>~</th>や<td>~</td>で表題や縦軸を指定してセルを定義します。


   と、このようになります。

もっと、簡単にすると、
<table border="1">ー表のはじまりー
<tbody>―内容のはじまりー
<tr>縦列の1行目についてー
<th></th>見出しセル(2行連続あるので、横並びにセル2つの意味)ー
<th></th>
</tr>
<tr>縦列の2行目についてー
<td></td>内容を記す欄ー、(2行連続あるので、横並びにセル2つの意味)ー
<td></td>
</tr>
</tbody>
</table> ー表の終わりー

と、こんな感じです。タグの「/(スラッシュ)」があるのは、かっこを使う時の(  )閉じかっこみたいなものですね。
上記のHTMLソースがどのように見えるのか、サンプルが次のようになります。

見出しセル① 見出しセル②
内容① 内容②


※ここに、線の種類や太さ・文字の大きさや種類や色や位置・背景色・セルの数・セルの横幅や縦幅などに手を加えることによって、様々な表に変化させていきます。

※前置きが長くなってしまったのですが、【<table></table>】HTMLソースの構成がお分かり頂けましたでしょうか?

では、次に、以上のような基礎知識を使って、広告をどんな風にアレンジできるのか、いくつかパターンをやってみたいと思います。

【<table></table>】HTMLソースを上手に使いこなそう!その②(広告ソースの並べ方編)





☆☆FC2 ブログランキングに参加しています。
この記事が役に立った!と思う方は、
上記のバナーをクリックして応援して下さいね!ヾ(o´∀`o)ノ☆☆


関連記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。