FC2ブログ
                                                 

コツコツ貯めるコツ

Home > Tag > タグ


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




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

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


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


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

ブログサービス 一覧表


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

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


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

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

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


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


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

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

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


 
 

ブログのデザインを考える



ここ最近、ブログのデザインについて、徐々に細かいところまで気になるようになってきました。
ほんの少しでも 画像や広告バナーなどがズレていると気になり始め、直さなくては気が済まなくなり、長時間に渡って悪戦苦闘することもしばしばです。
一般人のブログで、しかも素人なのだから
「ちっちゃいことは気にすんな!」
と言われるかもしれませんが、性分なのか どうにも我慢できなくなるのです。

一応、テーブルタグなどに関する知識も それなりに身につけていますし、解説記事なども書いていて、ありがたいことに検索などによるアクセスも多く、たくさんの方が参考にしてもらっているようですが、まだまだ未知のモノだらけですので、タグに関して、どん欲にマスターして行きたいと、日々考えています。
しかしながら、本業もありますし、時間に制限があますので、思ったようにはかどらないのも事実で、試行錯誤の末、なかなか思うようなデザインに出来ず、結局、時間をムダにした事も数え切れないほどありまして、そんな時はひどく落ち込んだりします。

それでも、いくつかのデザイン的に目標とするサイトがある限り、少しでも近づけるように”コツコツ”努力して行こうと考えています。
その目標であり、参考にしているデザインのサイトは ズバリ ”Yahoo” や ”Google” を初め、”A8” や ”楽天” などのASPのページ、またはポイントサイト等のページやブログランキングのページ・・・
挙げればキリが無いのですが、いわゆる有名どころの公式なホームページでありまして、ほとんど無理だとは思いますが 気持ちだけは同じような高いレベルを目指しています。
見た目の安心感、整理されていてストレスを感じさせない、リンク等も分かりやすい。
結局、普段からよく利用しているサイトは自分にとって使いやすいサイトであり、他にも同じような人がたくさん居ると考えて間違いないはずなのです。

それら一流のサイトを研究する手段のひとつとして、そのサイトのソースを参考にしています。
ブラウザにサイトを表示し、「右クリック」 「ページのソースを表示をクリック」で簡単に見る事ができるのです。
しかし、見ること自体は可能なのですが、数多くのタグが羅列されていて どの様に構築されているかなど、及ばずながらその全てを理解することは出来ません。
ですが、こんな浅い知識ながらも、所々 参考になる個所があったりするのです。

ただ単に自分のブログのソースがどの様になっているのかを見ても面白いですし、他のブログやサイトなどとの比較で新しい発見があるかもしれませんので、まだ見たことないと言う方は、ぜひ試してみて、これからのブログ作りに活用して下さい。



スポンサード リンク
登録した会員様に
< 500円 >
プレゼント!!
マイクロアドBTパートナーでおこづかいゲット!

会員数、広告主数
ともに最大規模を誇る
< A8.net >

有名ブランドや
優良ECサイトがたくさん
< バリューコマース >

スポンサーサイト



 
 

ブログのHTMLタグ 文法チェック



ブログを作り始めてから現在まで、専門的な知識の全く無い所から「何とか形になってきたかなぁ」 などと自己満足に陥り始めていましたが、ふとタグの閉じ忘れなどのミスをチェックできるツールやサイトが無いか探してみたところ、
Another HTML-lint gateway
を見つけこのブログをチェックしてみたところ、「342個のエラーがありました。このHTMLは -80点です」との文章があり、その下のエラー項目のあまりに多い事にビックリしてしまいました。
主なエラー項目は 「<br />が多数連続している」 「タグは小文字で書かなければなりません」 「<img> には alt 属性が必要です」 「メタ文字 `&` は `&amp;` と書か無ければなりません」 「<a> の target の属性値に空の値を指定することはできません」 などなど・・
もちろん、タグの閉じ忘れもいくつかあり、すぐに修正しましたが、その他の項目があまりに多く、しかもアフィリエイトコードの部分が多数含まれていて、どうしたものかと悩みましたが、アフィリエイトコードには手を付けず、とりあえず無難なところから、指摘どおりに直してみました。
かなりの時間がかかりましたが、一通り修正して再度チェックしたところ、50点まで点数を上げることができ、そのおかげかどうか判断できませんが、ここ最近、検索からのアクセスが増えてきています。
「公式なページってどうなんだろう?」と気になり、試しにYahooのトップページをチェックしてみたら、「222個のエラーがありました。このHTMLは -35点です。タグが 28種類 604組使われています。文字コードは UTF-8 のようです」との結果が出ました。
てなワケで、参考にするかどうかは個人の判断ということで・・

・今回は日本語なのでこちらにしました。
Another HTML-lint gateway
・英語なのですが
W3C Markup Validation Service

その後いろんなサイトでタグチェックに関しての意見を見てみましたが、肯定派、否定派、どちらもいて、結局、明確な答えも見つからないので、100点を目指して頑張るよりは、最低限のミスを防止するためにのみ、利用させてもらいます。

[More...]

 
 

ブログ作成に役立つ タグツールを設置しました



ホームページを作成するためにはモチロン、ブログを作成する場合でも、あらゆるタグの利用は欠かせません。
単に"文章を書くだけ"のブログであれば、必要無いのかもしれませんが、特にアフィリエイトブログを作成するには、記事投稿の時や、サイドバーなどのデザイン構成など、あらゆる場面で いろいろなタグの利用が必要になります。( 文章のみでのアフィリエイトの方法もあるのかもしれませんが・・ )

タグに対しての知識が豊富な人であれば、サクサクと書きあげる事ができるのかもしれませんが、いつも専門的なサイトを参考にして、そこでコピーなどしながら、ブログを作成している方が多いと思います。

実のところ自分自身がそうなので、いつも何かしらのサイトを利用してブログを作っていますが、このブログ自体がブログアフィリエイト初心者のために書いてある以上、ブログを作成するために必要なモノをそろえておきたい と考え、特に利用する頻度が多いタグに関するツールを設置しました。

より良い物を作ろうとして、さすがに少し苦労しましたが、一通り 使えるモノを作る事が出来たと思います。
今後、更に詳しいタグに関するツールを追加していければと考えていますが、そのやる気を起こさせるためにも ドンドン利用して頂ければうれしいです。



■ブログ作成に 使えるタグツール■

[More...]

 
 

画像 テキスト リンクタグ作成機



画像 テキスト のリンクタグを簡単に作成できます。
画像URL、テキスト文字のどちらか作成したい方を入力し チェックを入れます。
リンク先のURLを入力し、リンクページの開き方を選択します。
作成ボタンをクリックすると、HTMLソースが表示されますので、コピーして、自分のサイトなどで利用して下さい。

■画像リンクタグ作成 
画像URL入力
 ▲リンク付きの画像の表示をするHTMLタグを作成したい場合には、チェックを入れて画像のURLを入力してください。
  画像URLの取得は 「画像を右クリック」 「プロパティをクリック」 「アドレス(URL) をコピー」で出来ます。

■テキスト(文字)リンクタグ作成
リンク付きの文字
 ▲文字にリンクをつけたHTMLタグを作成したい場合には、こちらにチェックを入れて、文字を入力してください。

■リンク先URL入力

 ▲ここにリンク先のURLを入れてください。

■リンクページの開き方

通常:同じウィンドウでそのリンクを開きます。
新規ウィンドウ:新しいウィンドウでそのリンクを開きます。

 ▼作成ボタン▼


■HTMLソース

■プレビュー

[More...]

 
 

テーブルタグ 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...]

 
 

テーブルタグ PART 3



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

枠の横幅の指定

ここに文字


tablewidth=200を書き、横の全体の長さを指定できます。
width=50%%で長さの指定もできます。

枠の縦幅の指定

ここに文字


tableheight=100を書き、縦の全体の長さを指定できます。
height=50%%で長さの指定もできます。

文字の横の位置の指定

ここに文字


tdalign=centerを書きました。
align=centerで表示したい位置を指定します。centerは中央に表示です。
align=rightで右に表示。align=leftで左に表示されます。


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


td1つづつに位置を指定しなくてもtrに書くことで、まとめて位置を指定できます。

文字の縦の位置の指定

ここに文字


tdvalign=bottomを書きました。 bottomは下に表示 topは上に表示

応用法 一覧
table ここに書くと、全体に反映。
tr 縦の1段を作る。色などを指定すると横1列全てに反映。
td 横の1段を作る。このタグの後に文字を書く。
width=数字 横のセルなどの長さを指定。
height=数字 縦のセルなどの長さを指定。
align= 横の配置場所を指定。centerで真中、rightで右、leftで左。
valign= 縦の配置場所を指定。topが上、bottomが下。
colspan=数字 横にセルを数字の数だけ結合。td内に書く。
rowspan=数字 縦にセルを数字の数だけ結合。td内に書く。
border 枠を立体的にする。border=5と数字を増やせる。
cellspacing=数字 枠の太さを調整できる。0にすると枠の間が無くなる。
cellpadding=数字 枠と文字との間の隙間を調整できる。0にすると密着。
bgcolor="#色" テーブルに色を着ける。
bordercolor="#色" 枠線に色を着ける。2重線に。
bordercolorlight="#色" borderの立体的な枠の明るい部分の色。
bordercolordark="#色" borderの立体的な枠の暗い部分の色。

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

[More...]