現役システムエンジニアが教えるネットdeサクサク稼ぐ副業術

　　　

お待たせしました。記事インデックスの作成方法です。

前回の記事で、テーブル（表）を使って作成するってヒントを書きました。

しかし、HTMLを少し勉強しないとなかなか進められない様ですね。

ということで、ご参考までに私のブログで使った記事インデックスのHTMLをご紹介します。


テーブル（表）とは、HTMLで<table>というタグを使って作成します。
記事一覧にする場合、「罫線なし」、「背景色の指定なし」で作成します。

それでは、私のブログの記事一覧のように、2カラム方式（左右インデックス）の記事一覧の作成方法です。

人気ブログランキング

FC2ブログランキング

くつろぐランキング

■左インデックスの作成

<table width="233" border="0" cellspacing="0" cellpadding="10" align="left">
<tr>
<td width="213"><font size="1"><b>◆カテゴリ名</b><br>
├<a href="記事URL1">記事名１</a><br>
├<a href="記事URL2">記事名２</a><br>
├<a href="記事URL3">記事名３</a><br>
└<a href="記事URL4">記事名４</a><br>
</td>
</tr>
</table>

こんな感じで１つのカテゴリのかたまりができます。
コレを複数並べていけば、左メニューの完成です。

↓こんな感じです。
<table width="233" border="0" cellspacing="0" cellpadding="10" align="left">
<tr>
<td width="213"><font size="1"><b>◆カテゴリ名</b><br>
├<a href="記事URL1">記事名１</a><br>
├<a href="記事URL2">記事名２</a><br>
├<a href="記事URL3">記事名３</a><br>
└<a href="記事URL4">記事名４</a><br>
</td>
</tr>
<tr>
<td width="213"><font size="1"><b>◆カテゴリ名</b><br>
├<a href="記事URL5">記事名５</a><br>
├<a href="記事URL6">記事名６</a><br>
├<a href="記事URL7">記事名７</a><br>
└<a href="記事URL8">記事名８</a><br>
</td>
</tr>

　　　好きなだけ入れましょう

</table>


■右インデックスの作成

<table width="233" border="0" cellspacing="0" cellpadding="10" >
<tr>
<td width="213"><font size="1"><b>◆カテゴリ名</b><br>
├<a href="記事URL9">記事名９</a><br>
├<a href="記事URL10">記事名１０</a><br>
├<a href="記事URL11">記事名１１</a><br>
└<a href="記事URL12">記事名１２</a><br>
</td>
</tr>
</table>

こんな感じで１つのカテゴリのかたまりができます。
コレを複数並べていけば、右メニューの完成です。

↓こんな感じです。
<table width="233" border="0" cellspacing="0" cellpadding="10" >
<tr>
<td width="213"><font size="1"><b>◆カテゴリ名</b><br>
├<a href="記事URL9">記事名９</a><br>
├<a href="記事URL10">記事名１０</a><br>
├<a href="記事URL11">記事名１１</a><br>
└<a href="記事URL12">記事名１２</a><br>
</td>
</tr>
<tr>
<td width="213"><font size="1"><b>◆カテゴリ名</b><br>
├<a href="記事URL13">記事名１３</a><br>
├<a href="記事URL14">記事名１４</a><br>
├<a href="記事URL15">記事名１５</a><br>
└<a href="記事URL16">記事名１６</a><br>
</td>
</tr>

　　　好きなだけ入れましょう

</table>


これを、あなたのブログのトップ記事に貼り付ければ完成です。
どうですか？すごく簡単でしょ？

ちなみに、
●テーブルの幅：td width="数字"
●フォントサイズ：font size="数字"（1が1番小さい）

は、あなたのブログに合わせてご自由に変更してください。


また、分かりやすい無料レポートがありますので、
そちらをご参考にして頂ければ必ずできると思います。


私のスカイプ友達：さらさんのサイト
イラストレーターが語る初心者の為の本当に稼げるアフィリエイト講座

に行ってみると、トップメニューに記事インデックス作成無料ダウンロード
の案内が出ますので、
そちらを見てもらえるといいかもしれません。

めちゃめちゃ分かりやすい無料レポートです。


どうしても分からない方は、フォローしますのでコメントください。
それでは、ご閲覧頂き有難う御座いました。

↓あなたの1票が励みになります！！