FC2ブログ
                                                 

コツコツ貯めるコツ

Home > Tag > テーブルタグ


 
▼ブログアフィリエイト スタートガイド 




”無料”で出来るブログアフィリエイトだから [リスクゼロ]

一言でアフィリエイトと言っても メールや掲示板を利用したり、さまざまな方法がありますが ここでは、自分のページの広告により 収入を得るアフィリエイトの手順を 簡単に紹介します。すでにブログ等を、運営している方であれば、自分のブログを有効活用しましょう。
あくまで、”無料”にこだわったブログアフィリエイトの手順を紹介していますので、安心して始めてください。


ブログアフィリエイト スタートガイド (基本手順)


STEP [1]  ブログを作成する

ブログサービス 一覧表


STEP [2]  ASPに登録し広告を貼る

A S P 一 覧 表ASP関連記事
携帯 ASP 一覧表携帯ASP関連記事


STEP [3]  ブログのアクセスアップ    ★アクセスアップ関連記事

トラフィックエクスチェンジ 一覧表
ブログランキング  一覧表

STEP [4]  SEO対策(検索エンジン最適化)をする   ★ SEO関連記事


STEP [5]  おそらく、最初から成果は上がって来ないと思いますが、地道に、粘り強く、”コツコツ”やることが何より大事です。


 Google Fan   ポッドチェッカー //

※ 不明な点があれば、メールフォームよりお願いします。  出来る限りサポートいたします。
  ◇ 相互リンク 募集中です ◇

 
 
タグツールコーナー
■ブログ作成に 使えるタグツール■
各種タグを使えば、誰でも簡単に 思い通りのデザインでブログが作れます。


 
 

テーブルタグで画像、広告を横に並べる



このブログでも実践していますが、主に記事ページで画像や広告を横に並べるために、”ホームページ”の基本的なデザインを作るタグであり、”表”を作る際に使われるタグの”テーブルタグ”を利用して、広告などを横に並べています。
特に当ブログは横に幅を取っているデザインなので、とても重宝していて、さらに、”テーブルタグ”のいろいろな応用法を使うことで広告の表示位置などもカスタマイズでき、自由自在にページを作れるようになりました。
記述法の基本形をマスターしてしまえば、応用は簡単なので、”テーブルタグ”を使い、洗練されたブログ作りに役立ててください。

▼枠線無しのテーブルタグで画像、広告を横に並べる基本形
<table><tr><td>「広告A」</td><td>「広告B」</td><td>「広告C」</td></tr></table>
と書くと

「広告A」「広告B」「広告C」
と表示されます。<table>に"border"が無いので枠線が表示されません。
ちなみに"border"を入れると
「広告A」「広告B」「広告C」
と枠が表示されます。
<td>~</td>の間にアフィリエイトコードや画像URLを貼り付け、<td>~</td>を増やせば画像や広告が横に増えていきます。

▼応用法の一部を紹介します。
gazou-koukoku-yoko.png
上の記述で

「広告A」「広告B」「広告C」
「広告D」「広告E」「広告F」
と表示されます。
その他、いろんなアレンジの方法もあると思いますので、下記を参考にして試してみてください。


>>> テーブルタグ 1テーブルタグ 2テーブルタグ 3

スポンサード リンク
ロリポップ!は月額105円~
容量1GB/8GB/10GB!
豊富な機能で
85万人以上が利用している
レンタルサーバー

アニメを中心とした
アキバ系ブログポータルサイト
「アニメしませんか?ブログ」
新規ブロガーさん大募集!
フレッツ光の料金が
月額556円~で業界最安値級!
メール・ホームページの
無料オプションも充実
しかも、毎月の支払のたびに
100ポイント(100円相当)還元!

FC2ノウハウ
スポンサーサイト



 
 

テーブルタグ PART 1



テーブルタグ [ PART 2 ] [ PART 3 ]
いろいろなテーブルタグ記述法の一覧です。
テキストエリアをコピーするか、ページを開きながら記述するなどして利用して下さい。

基本的なテーブルタグ

これがテーブルタグです


基本のテーブルタグです。
文字はtdの後に書きます。

枠の表示

これがテーブルタグです


tableborderを足して、枠が表示されました。

立体的な枠にする

これがテーブルタグです


borderborder=5と書くと、より枠が立体的になります。
数字の大きさで枠の太さ(立体感)を指定できます。

枠の太さの指定

これがテーブルタグです


tablecellspacing=5を足しました。数字の大きさで枠の幅を指定できます。


これがテーブルタグです

cellspacing=0にすると枠の幅が無くなります

枠と文字との間隔の指定

これがテーブルタグです


tablecellpadding=5を足すと、枠と文字との間隔がが広くなります。
数字の大きさで指定できます。


これがテーブルタグです

cellpadding=0にすると枠に密着します。

背景色の指定

これがテーブルタグです


tablebgcolor="#ffcccc"を書きました。tableに色コードを書くと全体がその色になります。

文字が表示されている場所(セル)の背景色の指定

これがテーブルタグです


tdbgcolor="#ffeecc"を書きました。tdに色コードを書くとその部分だけの色の指定ができます。

上の2つの背景色指定を同時に表示する

これがテーブルタグです


tabletdにそれぞれ色を指定しました。
tdに書いた色がtableの色より手前に表示され、tableに書いた色が枠の色となります。

枠を消して色だけを表示

これがテーブルタグです


borderを消すと、枠が消えて色だけが残りました。
後ろの色が枠のように見えます。

tableに書かれた色を細い枠線に使う

これがテーブルタグです


tablecellspacing=1を書きました。後ろの色の太さが1になり細い枠線になります。
tableに書いた色(bgcolor="#ff0000")が枠の色となります。


これがテーブルタグです


tablecellpadding=5を書いて、間隔を広げました。
tableの色をbgcolor="#000000"にして枠線の色が黒になりました。

枠を2重線にする

これがテーブルタグです


tableborderbordercolor="#ff0000"を書きました。
bordercolor="#ff0000"が2重線の色です。


これがテーブルタグです


tablebgcolor="#ffcccc"を足して、2重線の間の色を指定できます。


これがテーブルタグです


borderborder=3を書きました。2重線の外側だけの太さを指定できます。
cellspacing=数字で2重線の間隔を指定できます。

カラフルで立体的なテーブルの表示

これがテーブルタグです


tableborder=5bordercolorlight="#ffaaaa"
bordercolordark="#ee7777"を書きました。border=5は枠の太さ
bordercolorlight="#ffaaaa"は立体的な枠の明るい部分の色
bordercolordark="#ee7777"は立体的な枠の暗い部分の色です。


これがテーブルタグです


tablebgcolor="#ffddcc"を書きました。
tdbgcolor="#ffffee"を書きました。


これがテーブルタグです


tablebgcolor="#ffddcc"を消し tablecellspacing=0を書きました。
cellspacing=0なので枠の幅がなくなりました。

テーブルタグ [ PART 2 ] [ PART 3 ]

[More...]

 
 

テーブルタグ PART 2



テーブルタグ [ PART 1 ] [ PART 3 ]

横に文字を書く場所(セル)を増やす

ここに文字 ここに文字


横に文字を書く場所を増やしました。 文字は<td>の次に書きます。
<td>の次に文字を書き</td>で閉じます。
横に増やすには<td>を増やします。 <td>の数に応じて横にセルが増えます。


ここに文字 ここに文字 ここに文字 ここに文字



縦に文字を書く場所(セル)を増やす

ここに文字
ここに文字


縦に文字を書く場所を増やしました。 <td>の前に<tr>を書きます。
<tr>増やしてを<td>書くと縦の段が増えます。


ここに文字
ここに文字
ここに文字
ここに文字



縦と横に文字を書く場所(セル)を増やす

ここに文字 ここに文字 ここに文字
ここに文字 ここに文字 ここに文字


上の2つを組み合わせます。
<tr>で縦に <td>で横に文字を書く場所を増やします。
</td> </tr>で必ずタグを閉じて下さい。

文字を書く場所(セル)に色を付ける

ここに文字 ここに文字 ここに文字
ここに文字 ここに文字 ここに文字


<td>に色コードで、そこのセルの色を指定できます。
<tr>に色コードで、横1列全ての色が指定できます。
</td> </tr>で必ずタグを閉じてください。

テーブルと文字を書く場所(セル)に色を着ける

ここに文字 ここに文字 ここに文字
ここに文字 ここに文字 ここに文字


<table>に色コードで全体の色を指定します。
<tr> <td>に色の指定が無いと<table>に書いた色が表示されます。


ここに文字 ここに文字 ここに文字
ここに文字 ここに文字 ここに文字


borderを消した表示例です。


ここに文字 ここに文字 ここに文字
ここに文字 ここに文字 ここに文字


cellspacing=0を書きました。0にすることで枠を消しました。


ここに文字 ここに文字 ここに文字
ここに文字 ここに文字 ここに文字


tableに書いてある色を消すと枠が透明になります。
cellspacing=5で数字を書くことで、透明になった枠の幅を指定できます。

縦にセルを結合する

ここに文字 ここに文字 ここに文字
ここに文字 ここに文字 ここに文字


rowspan=2を最初のtdに書くと、セルの部分が下のセルと1つになりました。
rowspan=22で縦の部分2つを結合させる事ができます。
数字に応じて、セルを結合できます。
右上の白い部分は結合でズレが発生しました。
1段目にtdを追加すると埋まります。

横にセルを結合する

ここに文字 ここに文字 ここに文字
ここに文字 ここに文字 ここに文字


colspan=2を最初のtdに書くと、セルの部分が右のセルと1つに結合しました。
colspan=22で横の部分2つを結合する事が出来ます。
数字に応じて、セルを結合できます。
右下の白い部分は結合でズレが発生しました。
2段目にtdを追加すると埋まります。

テーブルタグ [ PART 1 ] [ PART 3 ]

[More...]