HOME > スポンサー広告 > FC2ブログのカスタマイズ <記事の一覧表示>HOME > [雑記]ブログのお知らせ・日記 > FC2ブログのカスタマイズ <記事の一覧表示>

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 | --:--:-- | コメント(-) | ▲TOP

以前使っていたJUGEMでは、HTMLをカスタマイズすることによって、カテゴリをクリックすると記事タイトルの一覧を表示することができました。
FC2でも同じことができないかなと思っていたらすでに実践しているブログが。春木屋さんの記事「機能としてのタイトルジャンプ」を参考にカスタマイズしてみました。


この記事一覧はサイドバーにも設置できますが、私は記事の上の部分に置いてみました。
以下に書くカスタマイズは共有テンプレート「getnet01」を使ったものなので、使用しているテンプレートによって多少変わるところもあるかもしれません。詳しくは「春木屋」さんの記事をお読みください。
また、FC2テンプレート掲示板でこの件に関してお世話になったdanielさんのサイト「PCafe」でも、リスト化についての記事があります。
お二方ともカスタマイズに関する記事をたくさん書かれているので、FC2ブログユーザーなら参考にしてみてはいかがでしょうか。


念のために書いておきますが、カスタマイズする時は今使用しているテンプレートには手をつけないで、新しくテンプレートをダウンロードして今の使用テンプレートをコピーしてからのほうが無難です。


「getnet01」ではHTMLに以下の箇所があります。

<div id="main">
<!-- 記事部分 ▼▼▼-->
<!--topentry-->
<div class="entryBodyset">
<div class="entry_date"><%topentry_year>-
<%topentry_month>-<%topentry_day>
<%topentry_youbi></div>

この箇所に赤い文字で書かれた部分を追加します。<!--topentry-->は新たに書き加えてあるのでこれだけ削除してから赤い箇所を貼り付けます。

<div id="main">
<!-- 記事部分 ▼▼▼-->
<!--not_permanent_area-->
<h3>このページの記事一覧</h3>
<!-- リンク側のブロック変数でタイトルと<%topentry_no>を取得 -->
<!--topentry--><!-- ひとつめ -->
<ol><li><a href="#entry<%topentry_no>">
<%topentry_title></a></li></ol>
<!--/topentry-->
<!--/not_permanent_area-->
<!--prevpage--><a href="<%prevpage_url>">
< 前のページの記事一覧</a><!--/prevpage--> 
| <a href="<%url>">ホーム</a> |
<!--nextpage--><a href="<%nextpage_url>">
 次のページの記事一覧 ></a><!--/nextpage-->
<!--topentry--><!-- ふたつめ -->
<div class="entryBodyset">
<div class="entry_date">
<%topentry_year>-<%topentry_month>-
<%topentry_day> <%topentry_youbi></div>
<div id="entry<%topentry_no>">
<h3><a href="<%topentry_link>"
title="<%topentry_title>">
<%topentry_title></a></h3>
</div>

<div class="entry_body">
<%topentry_body><br clear="all"><BR><!--more_link-->
<a href="<%topentry_link>#more">
“<%topentry_title>”の続きを読む>></a>
<!--/more_link-->

また、ページを下のほうにスクロールしてもすぐに一覧が見られるように、記事の下の Comments(0) | Trackback(0) の横に一覧へのアンカーを付けます。
先ほど追加した<!-- 記事部分 ▼▼▼-->の下のほうに赤字で書かれたタグを入れます。

<!--allow_comment-->
<a href="<%topentry_link>#comment""Comments
(<%topentry_comment_num>)
</a><!--/allow_comment-->
<!--deny_comment-->Comments(-)
<!--/deny_comment-->
          |
<!--allow_tb-->
<a href="<%topentry_link>#trackback">Trackback
(<%topentry_tb_num>)
</a><!--/allow_tb-->
<!--deny_tb--> Trackback(-)
<!--/deny_tb-->
          |
<a href="#top" title="一番上へ">▲TOP</a>

</div>
</div>

最後はCSSで見栄えを良くします。元の「getnet01」にはない<h3>でマークアップしているので、CSSにも記述する必要があります。

/* ------- ■記事カラム部分 ------- */
#main {
font-family: "Osaka", "Verdana", "MS ゴシック", sans-serif;
float: left;
OVERFLOW: hidden;
width:530px;
margin: 0px 0px 0px 10px;
line-height: 160%;
text-align:left;
}
 
#main ol {
list-style-type: square;
padding: 0px 0px 0px 20px;
margin: 0px 0px 0px 20px;
}

JUGEMと違ってJavaScriptを使っていないのであまり重くなく、ブラウザでJavaScriptを切っていてもちゃんと表示されるところがいいですね。
ただしこの一覧リストは表示させているページの記事タイトルをそのまま並べるというもの。FC2ではトップページとカテゴリページは最高10件までしか記事を表示できないので10件以前の古い記事は見ることができません。月別アーカイブの記事はちゃんと全表示されるのですが。
そんなわけで「次(前)のページの記事一覧」も入れて古い記事にもアクセスしやすいようにしました。

(いつの間にか最高25件に増えていますね。FC2は仕様が知らない間に変わっていることが多いのです)


追記:
FC2ブログで使用できるブロック変数が新たに追加されたので、<!--not_permanent_area--><!--/not_permanent_area-->をソースに付け足しました。今までは個別記事を単独に表示している時でも記事タイトルがぽつんと意味なく表示されてしまっていましたが、このブロック変数によってそれも無事解決です。

[雑記]ブログのお知らせ・日記 | 21:19:56 | コメント(0) | ▲TOP
■ コメントの投稿
(チェックすると管理人個人への隠しメッセージになります)

          
■ トラックバック
http://donguri.blog2.fc2.com/tb.php/97-d21d67b3

作品別カテゴリ

読みたいジャンルの記事だけ表示されます。

ブログ内検索

複数の語句を半角スペースで区切るとand検索になります。英単語は半角で入力してください。

コメント

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。