■HTML編集してカテゴリページに記事一覧を表示！

スポンサードリンク

■HTML編集してカテゴリページに記事一覧を表示！

今回は、質問で多かったカテゴリページに記事一覧を表示する方法を紹介したいと思います。

これは、記事コンテンツ(カテゴリページ)のHTML編集をする必要があります。

今回のHTML編集だけなら問題はないのですが、今後の事を考えて、記事コンテンツのHTML編集をする前にやることがあります。今は、記事コンテンツは一つしかないと思います。そして、表示するページが全ページになっていると思います。

カテゴリページのHTML編集をするためには、記事コンテンツを追加する必要があります。

そして、3つ記事コンテンツを追加して、表示するページをトップページ、カテゴリページ、過去ログページ、記事ページの４つに分けてください。

HTML編集する際は、メモ帳などにバックアップを取ってからにしてくださいね。後でおかしくなった場合に困ります。

記事コンテンツのHTML編集の手順、方法は、こちらを参考にしてください。

記事コンテンツでHTML編集するのは、もちろんカテゴリページですよ。

カテゴリページのHTML編集は、以下のようにします。

まず、以下の文字列を探してみてください。最初の方にあると思います。

<% if:page_name eq 'category' -%>
<% /if -%>

見つかりましたか？見つからない人は、検索機能を使ってみてください。

そして、見つかったら以下のように書き換えてください。

<% if:page_name eq 'category' -%>
<% loop:list_article -%>
<a href="<% article.page_url %>" target="_blank"><% article.subject %></a>
<% /loop -%>
<% /if -%>

これで、カテゴリページに記事一覧が表示されます。しかし、このままでは、デザインがかなり寂しいです。

これに後は、デザインを整えるためにdiv、hタグを追加していきます。好きなようにHTML編集してもいいのですが、HTML初心者の方は、以下に示すHTMLをこのまま使って頂いても構いません。

<% if:page_name eq 'category' -%>
<div class="clisttopic">記事一覧＠<% category.name%></div>
<div class="clist">
<% loop:list_article -%>
<h2 class="clisttitle"><a href="<% article.page_url %>" target="_blank"><% article.subject %></a></h2>
<% /loop -%>
</div>
<% /if -%>

HTML編集を簡単に説明しておきます。

<% if:page_name eq 'category' -%>

もしカテゴリページだったら<% /if -%>で囲まれているHTMLを表示する。

<div class="clisttopic">記事一覧＠<% category.name%></div>

これは、カテゴリの表題をつけるためです。どのカテゴリかすぐに分かるようにしています。<% category.name%><がカテゴリ名が入るところです。カテゴリによって変化します。

<% loop:list_article -%>

<% /loop -%>で囲まれている記事情報を表示する。

<a href="<% article.page_url %>" target="_blank"><% article.subject %></a>

<% article.page_url %>は、記事URL、<% article.subject %>は、記事のタイトルを表示します。

編集が終わったら、プレビューで確認してください。今は、CSS編集ができていないので、デザインが崩れていると思いますが、気にしなくても大丈夫です。記事一覧が表示されているかどうかだけ確認してください。

次にCSS編集をしてデザインを整えます。

CSS編集の手順、方法は、こちらを参考にして下さい。

私のスタイルシートは、以下のようにしていますが、色、文字の大きさ、padding、marginなどは、自分のブログに合うようにプレビューを見ながら調整してください。

/* カテゴリページに記事一覧を表示するため */

.clisttopic {
color:#ffffff;
font-size:14px;
padding:5px;
margin-top:10px;
font-weight:bold;
width:100%;
background:#0c06a6;
border:1px solid #666;
text-align:center;
}

.clist {
margin: 0px;
padding-left:10px;
padding-top:5px;
padding-right:15px;
border: 1px solid #666;
}

.clisttitle {
font-size: 14px;
font-weight:bold;
color:#0000ff;
padding-left:5px;
padding-top:2px;
padding-right:10px;
padding-bottom:2px;
margin:0px;
}

/* カテゴリページに記事一覧を表示するため */

この記事を参考にして色々と試行錯誤して頑張ってみてください！

頑張っても分からなければ、質問してください。その時は、自分のブログへのリンクを忘れずに！

ランキングへの応援もよろしくお願いします！

Seesaaブログ にはもう登録した？

■HTML編集してカテゴリページに記事一覧を表示！

ブログは読むだけでも楽しいですが、自分で作るともっと楽しくなること間違いなし。登録はこちらから簡単にできます→→ Seesaaブログ

スポンサードリンク

最後まで、読んで頂いてありがとうございます。お気に入りに追加してくれたら嬉しいです。
→→

RSSをRSSリーダーに登録しても便利だと思います。