ブログ講座　カテゴリーページをサッと見れるように変えてみる。

ブログの表現の仕方ってもうすでにたくさんありますよね。
その中で今日は一つの提案を僕からしてみたいと思います。

どういう事かというと、まぁ単純なのですが、
僕が今ブログのカテゴリーページで行っている表示方法を、
みなさんにも出来るように、やり方を教えるってことですよー。

通常のブログのカテゴリーページというのは、
記事がつらつらと並ぶような感じなんですが、

僕のブログのカテゴリーページを見てみてください。



例：沖縄ちゅら海写真


今現在僕のブログで利用している形は、上記のようにその記事の

・日付
・キャプチャのサムネイル
・題名
・時間、コメント、トラバ

という4つの要素で見ていただいてる形にしています。

なぜかと言うと、あくまでカテゴリーページと言うのは、

「　記事への移動ページとして使ったほうが、
　ブログとしてすっきりして分かりやすい。　」

そう思ったからなんですね。

そしてやり方なのですが、
ちょっとややこしいです。

ですが、是非みなさんが出来るように公開しましょうねー。

以下やり方です。



まず基本なのですが、ブログ構造上のカテゴリーページの[　content　]という部分を改造します。
全てのテンプレートでは確認してませんので、


利用する際はアーカイブソースのバックアップを取る等注意してください。

<div id="content">

<div class="blog">

<IfDateChanged><h3 class="date">カテゴリー記事の一覧<!--<%EntryDate%>--></h3><a name="<%EntryDateTag%>"></a></IfDateChanged>

<div class="blogbody">

<a name="<%EntryId%>"></a>

<h1 class="title"><a href="<%EntryCategoryUrl%>"><%CategoryName%></a></IfEntryCategory></h1>
<div class="menu">[<a class="amenu" href="sitemap.html">記事一覧</a>][<a class="amenu" href="album.html">画像一覧</a>]
<IfPrevPage>[<a class="amenu" href="<%PrevPage%>">前のページ</a>]</IfPrevPage><IfNextPage>[<a class="amenu" href="<%NextPage%>">次のページ</a>]</IfNextPage></div>
<br>

<EntrysLoop>

<table>

<tr>
<td>
<%EntryDate%> <br>

<a href=".<%EntryPermalink%>"><img title="<%BlogTitle%>" src="http://capture.heartrails.com/160x160/cool?http://ｚｚｚｚｚｚ.ti-da.net/<%EntryPermalink%>" alt=".<%EntryPermalink%>" width="160" height="160" /></a>

</td>
<td>

<h3><a href="<%EntryPermalink%>">←　■　<%EntryTitle%></a></h3>
<br>
<a class="aposted" href="<%EntryPermalink%>"><%EntryTime%></a>
<IfEntryAllowComment>│<a class="aposted" href="<%EntryPermalink%>#comments">コメント(<%EntryCommentCount%>)</a></IfEntryAllowComment>
<IfEntryAllowPing>│<a class="aposted" href="<%EntryPermalink%>#trackback">トラバ(<%EntryPingCount%>)</a></IfEntryAllowPing>

<td>

<br>
</tr>
</table>

</EntrysLoop>
</div>

<div class="menu">[<a class="amenu" href="sitemap.html">記事一覧</a>][<a class="amenu" href="album.html">画像一覧</a>]
<IfPrevPage>[<a class="amenu" href="<%PrevPage%>">前のページ</a>]</IfPrevPage><IfNextPage>[<a class="amenu" href="<%NextPage%>">次のページ</a>]</IfNextPage></div>
<div class="pagetop"><a class="aposted" href="#top">このページの上へ▲</a></div>
</div>
</div>

<div id="content">～～</div>のソース入れ替える事で、
僕のようなアーカイブの見せ方が可能です。

そして一つ注意なのですが、途中で自分のブログＵＲＬを入れる部分があります。
赤文字で表記しているので、そこに自分のブログＵＲＬを入れてください。
そうしないとキャプチャがでてこないですよーー（＾＾）

ちなみにこの見せ方については、

HeartRails Capture | サイトのサムネイル、PDF の生成サービス
http://capture.heartrails.com/

を利用しています。

先日紹介したやつですねー（＾＾）

ブログパーツ紹介！　サムネイルを作る！
http://daxiazzz.ti-da.net/e2093437.html

なのでまず今のアーカイブの表示の仕方以外で
気になる方は利用してみてください～～（＾＾）

もちろん普通の表示の仕方も悪くないですよ、
表現の仕方の一つとして是非おぼえておいてくださいねー。