最強?無料Seesaaブログで簡単にホームページ作成!

目次
■初めての方は、「まずはじめに」の後に、トップページをご覧下さい。お勧め記事を集めました!
  その後は、ご自分の好きなところを読まれて大丈夫です。
トップまずはじめにブログ入門編Seesaa活用方法基本的な使い方SeesaaカスタマイズQ&Aお問い合せ
ランキングCSSHTMLアフィリエイトおすすめ本便利フリーソフトブログ紹介資産運用精神論足跡
TopSeesaaカスタマイズ>HTML編集してカテゴリページに記事一覧を表示!

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

スポンサードリンク

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

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

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

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

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

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ブログ にはもう登録した?




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

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

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

■人気記事ベスト5
トラックバック、コメントをする時の注意
コメントする時、ブログを持っている方はできるだけホームページアドレスを書いて頂きたいです。みんながどんな風にブログを使っているか知りたいです。宜しくお願いします。
特に、質問される方は、名前に自分のブログのリンク貼ってください。
リンクがない場合は、基本的に返事をしないつもりです。私一人で運営しておりますので、ご理解の程よろしくお願いします。

当サイトでは「トラックバック」歓迎します。ただし、相互リンクをして頂きたいと思います。
相互リンクがなく記事と関連があると判断した場合は、こちらからもトラックバックさせて頂くつもりです。お互いにとって有意義なものにしていきましょう!


トラックバックについて、まだよく分かってない方は、こちらで説明していますので参考にされてください。

特に
■記事と全く関連がないと判断される物
■「宣伝」「誘導」「誹謗中傷」を目的とした物
■リンク切れの場合
と判断したものにつきましては、「削除」させて頂こうと思いますのであらかじめご了承下さい。
同様に「コメント」も削除させて頂きます。
コメントへの返事の確認には、便利なブログコメントチェッカーを利用してください。
この記事へのコメント
はじめまして。
何日もやっているんですがうまくいかず、こちらにたどり着きました。

記事の上か下にナビゲーションというのか 
<<前の記事の題名|Main|次の記事の題名>> 
こういうのがありますよね。

その題名を同カテゴリ内での題名に変更したいのですが教えていただけないでしょうか?
Posted by カリフォルニアん at 2006年04月12日 18:07
先日は こちらの質問に、迅速な回答をしていただき、ありがとうございました!

早く成功報告をしようとしたのですが、未だうまくいっていないのです・・・。
アレコレ試してみたのですが。。。

> <% if:page_name eq 'category' -%>
>
の下に書換をしたのですが、何度やっても一覧表示が出来ないのです。

成功報告が出来ずに申し訳ありません。。
他の方法等があったら 再び教えていただけませんでしょうか?
何度も申し訳ありません。
Posted by ゆら☆ at 2006年09月25日 14:46
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス: [必須入力]

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※半角英数字のみのコメントは投稿できません。
この記事へのトラックバック

このページのトップへ▲
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。