【<table>~<table>】HTMLソースとテキスト広告を上手に使って報酬アップを目指せ!

 テキストだけの広告も工夫をすることで、目立つ場所やクリック率の高い位置に上手に配置することができます。

例えば、「yahoo Japan」のTOPページような大手サイトを思い出してみて下さい。中央の目立つ場所に、今日のニュースタイトルが複数行配置されています。そのような場所に、できるだけ、サイトに溶け込むテキスト広告を目指してみてはいかがでしょう?


【大手の他サイトの見本】


このように配置する場合、見えるテーブルタグの中に見えないテーブルタグを入れると、より細かい指定をしやすくなります。

それでは、1つ目のパターンを見てみましょう!
★幅480×高さ300の枠の中に4行分ほどのお買い得情報記事のタイトルを入れたパターン①
(テーブルタグ可視の内側に、テーブルタグ不可視のもが入っています。不可視のものは、4行あり、うち1行分だけセル分割の横割りをしています。)

サンプル例(テキスト広告メインで一部に小さな画像広告をいれてみました。)

☆☆ 今がお買い得!新着キャンペーン情報 Pick Up!☆☆
 ・ビッグローブ光キャンペーン!
新規お申し込みで25,000円キャッシュバック中!
さらに今なら初期工事費大幅割引実施中でお得です。
 
 ・【So-net光 キャッシュバックキャンペーン】新規の方は、当社キャッシュバックキャンペーンで現金還元! 今がチャンス!
 ・【Google Home Mini】 が必ずもらえるキャンペーン実施中!
 ・iPhoneケース専門店 - 今日使える500円分ポイント進呈!
人気ブランドや手帳型等/会員登録でポイントプレゼント、更に5000円の購入で送料無料
【SMART PEOPLE】


いかがでしょうか?サイド欄と自然にマッチするように、あなたのサイトのテーマに合わせた背景色や文字のデザイン・広告テーマなども自由に入れ替えてみて下さい。できるだけ、サイトの一部として、自然に同化するようにアレンジして下さい。 テキスト広告にも関わらず、あまり出しゃばることない存在感のまま、自然と目立つようになります。(TOPページ中央の配置の場合) 枠組みのソースは以下になります。


サンプルのHTMLソース
<table border="1" cellspacing="0">
<tbody>
<tr>
<td " valign="top" height="23" style="background-color : #f0f0ff;border : 1px solid initial;" align="center">タイトル</td>
</tr>
<tr>
<td width="480" height="300" style="border : 1px solid;" valign="top">
<table border="0">
<tbody>

<tr>
<td height="64" style="font-size : small;border-bottom-width : 1px;border-bottom-style : dotted;" width="303">・ テキスト広告</td>
<td height="64" style="font-size : small;border-bottom-width : 1px;border-bottom-style : dotted;" width="167" align="center">小さな広告バナー</td>
</tr>
<tr>
<td height="55" style="font-size : small;border-bottom-width : 1px;border-bottom-style : dotted;" colspan="2">・テキスト広告</td>
</tr>
<tr>
<td height="47" style="font-size : small;border-bottom-width : 1px;border-bottom-style : dotted;" colspan="2">・テキスト広告</td>
</tr>
<tr>
<td height="96" style="font-size : small;border-bottom-width : 1px;border-bottom-style : dotted;" colspan="2">・テキスト広告</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>



★幅480×高さ300の枠の中に5行分ほどのお買い得情報記事と画像バナーを同時に入れるパターン②

サンプル例:今度は、半分にテキスト・半分に写真または画像広告を入れられるように枠を分割してみました。 (手順・・・可視できるテーブルタグの内側に不可視のテーブルタグ5行1列を挿入。それを列を1つ分増やし画像を入れたい側を「セル結合」します。その中にさらに、不可視のテーブルタグを2行1列で挿入します。その1行目が画像挿入用でセンターの真ん中に配置できるようにして、2行目の欄は、写真説明を左寄りで挿入できるようになっています。)


新着エンタメ情報!☆話題の名作映画・ドラマがすぐ観れる!☆
 ・【Hulu】今なら2週間無料トライアル実施中
 31日間無料キャンペーン中!【FODプレミアム】
 ・日本最大級のビデオオンデマンド<U-NEXT>今なら無料トライアル実施中!
 ・映画・海外ドラマが見放題【スターチャンネル インターネットTV】
 ・【初回31日間無料/dTV】月額500円(税抜)で映画・ドラマ・アニメ・音楽ライブなど12万作品が見放題!
 ・【niconico】月額540円でプレミアム会員登録!

いかがでしょうか?パターン①とはまた違った印象がありますね! パターン②のHTMLソースは、以下のようになります。
 サンプルのHTMLソース
<table border="1" cellspacing="0">
<tbody>
<tr>
<td width="480" valign="top" height="23" style="background-color : #f0f0ff;border : 1px solid initial;" align="center">広告タイトル</td>
</tr>
<tr>
<td width="480" height="300" style="border : 1px solid;" valign="middle" align="center">
<table border="0">
<tbody>
<tr>
<td width="230" style="font-size : small;border-bottom-width : 1px;border-bottom-style : dotted; valign=" top" height="45" align="left">・テキスト広告</td>
<td style="font-size" : small;border-bottom-width : 1px;border-bottom-style : dotted; " width="239" rowspan="5" align="center">
<table border="0">
<tbody>
<tr>
<td width="235" align="center" height="213">画像広告<br>
まはた<br>
写真など</td>
</tr>
<tr>
<td width="235" align="left" height="68">テキスト広告</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="font-size : small;border-bottom-width : 1px;border-bottom-style : dotted;" width="230" height="50" align="left">・テキスト広告</td>
</tr>
<tr>
<td style="font-size : small;border-bottom-width : 1px;border-bottom-style : dotted;" width="230" height="59" align="left">・テキスト広告</td>
</tr>
<tr>
<td style="font-size : small;border-bottom-width : 1px;border-bottom-style : dotted;" width="230" height="58" align="left">・テキスト広告</td>
</tr>
<tr>
<td style="font-size : small;border-bottom-width : 1px;border-bottom-style : dotted;" width="230" height="39" align="left">・テキスト広告</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
テーブルタグは、上手に使用していくことで、テキスト広告や画像広告を自然に、しかも目立つように貼り付けるコツがあることをお分かり頂けましたか?


☆今回は、HTMLサンプルソースの中で、

・border : 1px solid;(直線)
・border-bottom-style : dotted;(点線)が使用されました。

そのほかの線を使ったカスタマイズの参考に【border-style】線の種類について、一覧を載せておきます。
コピペして、ホームページビルダー などで、変化をご確認下さい。

テーブルタグの線の種類  見え方 HTMLソース
  border="0" (線を表示しません。)

【例】
<table border= "0">
 
 border="0"
  <table border= "0">
<tbody>
<tr>
<td>border="0"</td>
</tr>
</tbody>
</table>
none (線を表示しません。)

【例】
<table style="border : 1px none;">
 none
  <table style="border : 1px none;">
<tbody>
<tr>
<td>none</td>
</tr>
</tbody>
</table>
hidden(線を表示しません。)

【例】
<table style="border : 1px hidden;">
 
 hidden
  <table style="border : 1px hidden;">
<tbody>
<tr>
<td>hidden</td>
</tr>
</tbody>
</table>
dotted(連続した丸い点(ドット)を表示します)

【例】
<table style="border : 1px dotted;">
 
 dotted
  <table style="border : 1px dotted;">
<tbody>
<tr>
<td>dotted</td>
</tr>
</tbody>
</table>
dashed(連続した短い線を表示します。)

【例】
<table style="border : 1px dashed;">
 
 dashed
  <table style="border : 1px dashed;">
<tbody>
<tr>
<td>dashed</td>
</tr>
</tbody>
</table>
 solid(直線です。)

【例】
<table style="border : 1px solid;">
 solid
  <table style="border : 1px solid;">
<tbody>
<tr>
<td>solid</td>
</tr>
</tbody>
</table>
 double(二重線です。)

【例】
<table style="border : 8px double;">
 
 double
  <table style="border : 8px double;">
<tbody>
<tr>
<td>double</td>
</tr>
</tbody>
</table>
 groove(へこんだように見える線を表示します)

【例】
<table style="border : 8px groove;">
 
 groove
  <table style="border : 8px groove;">
<tbody>
<tr>
<td>groove</td>
</tr>
</tbody>
</table>
 ridge(浮き出るような線を表示します)

【例】
<table style="border : 8px ridge;">
 
 ridge
  <table style="border : 8px ridge;">
<tbody>
<tr>
<td>ridge</td>
</tr>
</tbody>
</table>
 inset(内側がへこんだように見える線を表示します)

【例】
<table style="border : 8px inset;">
 
 inset
  <table style="border : 8px inset;">
<tbody>
<tr>
<td>inset</td>
</tr>
</tbody>
</table>
 outset(内側が浮いたように見える線を表示します)

【例】
<table style="border : 8px outset;">
 
 outset
  <table style="border : 8px outset;">
<tbody>
<tr>
<td>outset</td>
</tr>
</tbody>
</table>
※注意1:  double、groove、ridge、inset、outsetについては、「border : 8px」になっています。
※注意2: お使いのブラウザーによって、効果の見え方が若干異なります。ブラウザーを変えての変化もお確かめください。


※また、カスタマイズについて、ほかのテーブルタグのHTMLソースの見方を覚えたい方は、ブログ内の以下のページをご参照下さい。

 ①【<table>~<table>】基礎編(枠・縦列・横列について)

 ②【<table>~<table>】続基礎編(表の中の背景色・文字の位置・余白・セル幅などのレイアウトの調整方法)

 ③表のセルの中で、画像とテキストを上手に文字の回り込みをする方法





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