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

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

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

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

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


ブログ講座 カテゴリーページをサッと見れるように変えてみる。
例:沖縄ちゅら海写真



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

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

という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://zzzzzz.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>のソース入れ替える事で、
僕のようなアーカイブの見せ方が可能です。

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

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

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

を利用しています。

先日紹介したやつですねー(^^)

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

なのでまず今のアーカイブの表示の仕方以外で
気になる方は利用してみてください~~(^^)

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








同じカテゴリー(ブログカスタマイズについて)の記事

この記事へのコメント
 最近 My Mac が使えないのでたまに家人達のWinを借りる以外はケータイからこのブログを見ていて、なかなか自分のブログも細かいところまではいじれないのですが、これは便利そう。
そのうち試してみます。
謝謝だーしゃ老師!
Posted by yugafu at 2008年05月22日 12:20
■yugafuさんへ

そしちらのMACは不機嫌なんですかーー、
携帯からだとちょっと意味が分かりにくいかもしれないですねーー。

えーーと、この設定は主にてぃーだとか地域ブログの方々向けの
設定とかなので、yugafuさんのところでできるかなぁ。
Posted by だーしゃ at 2008年05月22日 17:21
昨日は早速コメントまでいただきありがとうございました^^;

『だーしゃ』さんのタグを若干、整形・修正して概要タグを加えてみました~
今晩18:00ごろカスタマイズ記事UP&タグ公開します。。。
Posted by 『わっち』 at 2008年05月29日 14:37
■わっちさんへ

わーー、記事の概要まで入れられるようにしたんですね!!
是非ドンドン改造してくださいー(^^)
あくまで下地と考えてもらえればいいのでーー。

いじってるとたのしいですよねーー!
Posted by だーしゃ at 2008年05月29日 18:43
だーしゃさんのCSS講座楽しみにしています^^

早速やってみたのですが表示されるのが同じものばかりになってしまいました・・・。
先に進めなかったのでそのままにしてあります。
お時間のあるときでかまいません!お助けを~~~!!!
Posted by まめっちまめっち at 2008年06月06日 11:30
度々お邪魔してます^^;

少し時間を置いたら、きちんと表示されるようになりました。
ありがとうございました^^
Posted by まめっちまめっち at 2008年06月06日 14:14
■まめっちさんへ

すいません、確認が遅くなっちゃいましたです。

こちらのものは、やっぱり基本のテンプレートがちがったりすると、
ちょっとずれたりするんですよね。

だからきをつけてくださいーー
Posted by だーしゃだーしゃ at 2008年06月06日 18:22
PYOさんのところからとんできたのですが、
大変お勉強になりました。。
(*^^)v
感謝です。。。
難しい内容も多いので
通信講座をこれからもやっていきますね。。。
また、お勉強にきます。。
でも、頭はすでに→ (@_@;) な状態です。
Posted by LightLight at 2009年02月01日 00:13
■ Lightさんへ
コメントありがとうございます。
そして見ていただいてありがとうございますー、
色々と参照していただければうれしいですよーー。

ゆっくり利用していただければ良いと思いますので、
使ってみてくださいねー。
ゆっくりですよーーー
Posted by だーしゃ at 2009年02月01日 20:26
始めてコメントさせて頂きます。
初めてのブログで、どうしたら分かりやすく、見やすい物ができるか
悩んでいた時に、だーしゃ様のブログを拝見させて頂き、早速いくつか
取り入れさせて頂きました。(いまさらですが・・・)
大変わかりやすく、素人でも簡単にできました。感謝感激です。

こちら静岡にも空港ができ、沖縄がずいぶんと近い所になりました。
ぜひ一度訪れてみたいと思っております!

今後もいろいろと勉強にさせて頂きたいと思いますので
どうぞよろしくお願いいたします。
Posted by BKS at 2009年08月02日 12:40
■ BKSさんへ
コメントありがとうございます。
そして参考になってもらったら嬉しいです。(^^)
いろいろと自分なりに改善していい形に持っていけると思いますので、
さわってみてくださいね。

そして静岡から沖縄もちかくなったので、
これから是非往来が多くなり、交流が多くなればとおもいますっ。

どうぞよろしくお願いいたします。
Posted by だーしゃだーしゃ at 2009年08月02日 20:37
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。