Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】カテゴリページに記事リストを作る

【Seesaaブログ新デザインシステム】カテゴリページに記事リストを作る

Seesaaブログのカテゴリページに記事リストを作る
■Seesaaブログのカテゴリページ上部に記事リストを作る
■どのようなページ構成にするのかを考える
■独自で作っていたclass「article_kobetu」「subheading」を使用  

Seesaaブログにはカテゴリページがあります。
「カテゴリーページ」なのか「カテゴリ一覧ページ」なのか正式名称は知りませんが、とりあえず私は「カテゴリページ」と呼ぶことにします。



カテゴリページは記事に設定されている「カテゴリ」をクリックすると開くページです。
1ページに記事を何件表示させるのかは、「管理画面>設定」の「ブログの設定」で好きなように設定できますが、ページには設定した件数の記事が短文表示(「続きを読む」リンクが入って文章は途中で省略された表示形態)されます。


もしも表示件数を15件とか多めにしておくと、どういう記事があるのかは、スクロールしないとわかりません。15件目の記事とか、けっこうスクロールしないといけないと思います。
これって無駄な動きだと思うので、カテゴリページの上部に記事のタイトルだけを表示させた「記事リスト」を設定したいと思います。



先に完成イメージを掲載しておきます。
掲載している画像は、classを変更した後の画像です。(意味がわからないでしょうが、この記事を最後まで読むとわかります)


編集後のイメージ
カテゴリページの記事リスト


色んなサイトを参考にしましたが、Seesaaブログの新デザインシステムでは誰もやってくれていなかったので少々困りました。(私が探すことができなかっただけなのかもしれません)
試行錯誤してなんとかカタチになりましたが、本当にこのやり方が正しいのかは知りませんので、以下の記述を信じないでください。(予防線を張っていますw)



ちなみに、この「記事リストを作る」作業は他のページにも利用できます。
私は各ページ上部に「記事リスト」を設置しました。








カテゴリページにどんな順番で何を表示するのか


カテゴリページに記事リストを作る場合、ページの上部に記事リストを置くだけではなく、その下にページ案内ボタンを置かなければいけないと思います。


ページ案内ボタンとは、通常のカテゴリページの下に表示されるページ案内リンク(1ページ目や2ページ目を案内するボタン)のことです。
この案内ボタンを置いておかないと、表示件数を超える記事がある場合に結局ページの一番下までいかないといけないわけで、閲覧者に無駄な動きをさせることになります。



色々と考えてみて、カテゴリページの構成は以下のようにすることにしました。
私の考えの通りにする必要性は全くありませんが、このような構成以外でやる場合はご自分でカスタマイズしてください。私にはわからないです、ハイ。


◆タイトル(カテゴリ「○○○○」の記事リスト【目次】)
◆記事タイトルと日付(曜日)←今から作る記事リスト
◆ページ案内ボタン ←今から作るページ案内ボタン
余白 ←今から作る余白
◆タイトル(カテゴリ「○○○○」の記事一覧)
◆記事タイトルと最初の画像、最初の文章、「続きを読む」←元からあった短文表示の記事
◆ページ案内ボタン



ちなみに、ちまちまと「HTMLのこの部分をこちらにコピペして」「ここの表記を消して」等と説明するのが非常に面倒なので、私がHTMLに記述しているコードを全部書き出します。
すべてコピーしてHTMLに貼り付けると、カテゴリページの上部に記事リストができます。



【注意!】「article_kobetu」と「subheading」


下記で紹介するコードでは、私が独自に作ったclass「article_kobetu」と「subheading」を使用しています。
1つ目の「article_kobetu」は「記事を点線で囲む」というclassで、もう1つの「subheading」は「上部に100pxの余白を入れる」というclassです。


<私が勝手に作ったclass>
.article_kobetu {
margin-bottom: 40px; /* コンテンツとコンテンツの間 */
padding: 10px 10px 15px 10px;
border:1px dotted #4E667D; /* コンテンツを点線で囲む */
}

.subheading {
margin-top: 100px;
}


この2つのclassをCSSに記述していない方は、CSSの空いている部分に記述してください
もしも「線で囲まないし、余白もいらない」という場合は、下記で紹介する「入れ替えるコード」内で該当部分を緑色で表示していますので、その部分を外した状態でご自分のHTMLにコピペしてください。



それと、私は以前の記事<■【Seesaaブログ新デザインシステム】カテゴリページ・タグ一覧ページのタイトルを記事タイトルと同じ位置に置く・「heading」を編集する>で、HTMLに記述されている「<div class="l-content">」と「<div role="main" class="main l-left">」の位置を変更しました。


カテゴリページとかタグ一覧ページとか、そういうページのタイトルも、トップページや個別記事ページと同じように「記事のタイトル」という意味で、同じ位置(高さ)に置きたかったので、このような処理をしています。
もしも上記のタグを移動させていない場合は、どのような表示になるのか知りません。
私は自分がやったカスタマイズでしか検証していませんので、上手く表示できるのかはわかりませんが、まあ、どうにかなるんじゃないでしょうか。(テキトーだなオイw)



カテゴリページに記事リストを作る


HTMLを編集します。
管理画面の「HTML編集」画面を開き、「<% if:page_name eq 'category' -%>」で検索すると2ヶ所がヒットしますが、そのうちの1つ目を編集します。
デフォルトのテンプレートだと24行目です。
このタグ部分の3行分を、以下のコードと丸ごと入れ替えてください
入れ替えるコードは長文です。気にせずに入れ替えてください。



コードを入れ替えると、ページ上部に表示される記事リストのタイトルは『カテゴリ「○○○○」の記事リスト【目次】』という表記になります。
ページ下部の本来の記事リスト(元から設定されていた記事リスト)のタイトルは『カテゴリ「○○○○」の記事一覧』です。


<元コード>
記事リストのコードを追加する場所


<入れ替えるコード>
<!-- ********** カテゴリ一覧ページ(上部記事リスト表示) 開始 *********** -->
<% if:page_name eq 'category' -%>
<p class="heading">カテゴリ「<% category.name -%>」の記事リスト【目次】</p>
<div class="article_kobetu">
<% loop:list_article -%>
<article class="article">
◆ <a href="<% article.page_url %>"><% article.subject %></a> <% article.createstamp | date_format("%Y/%m/%d(%a)") -%>
</article>
<% /loop -%>
</div>
<!-- カテゴリ一覧ページ(記事リスト下のページ案内12345) 開始 -->
<% if:pager -%>
<% if:pager.need_pager -%>
<ul class="pager">
<% if:pager.previous_page -%>
<li class="pager__item prev"><a href="<% category.page_url(pager.previous_page) -%>">&lt;</a></li>
<% else -%>
<li class="pager__item prev"><span>&lt;</span></li>
<% /if -%>

<% loop:list_pager -%>
<% if:pager.show_previous_group(pager_number,5) -%><li class="pager__item"><span>..</span></li><% /if -%>
<% if:pager.show_page(pager_number,5) -%>
<li class="pager__item<% unless:current_page ne pager_number -%> is-active<% /unless -%>">
<% if:current_page ne pager_number -%><a href="<% category.page_url(pager_number)-%>"><% /if -%>
<% unless:current_page ne pager_number -%><span><% /unless -%><% pager_number -%><% unless:current_page ne pager_number -%></span><% /unless -%>
<% if:current_page ne pager_number -%></a><% /if -%>
</li>
<% /if -%>
<% if:pager.show_next_group(pager_number,5) -%><li class="pager__item"><span>..</span></li><% /if -%>
<% /loop -%>

<% if:pager.next_page -%>
<li class="pager__item prev"><a href="<% category.page_url(pager.next_page) -%>">&gt;</a></li>
<% else -%>
<li class="pager__item prev"><span>&gt;</span></li>
<% /if -%>
</ul>
<% /if -%>
<% /if -%>
<!-- /カテゴリ一覧ページ(記事リスト下のページ案内12345) 終わり -->
<div class="subheading">
<p class="heading">カテゴリ「<% category.name -%>」の記事一覧</p>
</div>
<% /if -%>
<!-- ********** /カテゴリ一覧ページ(上部記事リスト表示) 終わり *********** -->


●コピペした後は、おそらくタグが左端に寄った状態で表示されると思いますので、キーボードの「タブキー(Tabキー)」でタグを1つずつ移動させ、体裁よく並べてください。
タグが全部左端に寄っていても気にしない方はそのままでいいと思います。

●記事リストを線で囲まないし、短文表示の記事リストのタイトルに上余白はいらないという場合は、緑色で表示している部分を外してください。



コード編集後のHTMLと実際のページ


編集後のカテゴリページの記事リストのコード

編集後のカテゴリページの記事リスト部分



【調整】記事リストの行間変更(classの変更)


上記のようにコードを全部コピペすると、記事リストを表示させることができます。
実際に作ってみると、ちょっと行間が狭いような気がしてきました。
今は3件しか表示させていないのであまり気にならないかもしれませんが、表示件数を多くすると、記事タイトル間がくっつきすぎているような気がします。


行間の調整のためには、上記コードで使った「<div class="article_kobetu">」を変更すればいいのですが、「article_kobetu」はここだけではなく他の箇所でも使用しているclassなので、「article_kobetu」そのものを変更することはできません。
なので、新しくclass「article_kobetu2」を作って対処したいと思います。
記事リスト内の行間が気になる方は、下記のように編集してみてください。



もしも「article_kobetu」を使用していなくて記事リストの行間が気になる場合も、同じように編集すればいいと思います。下記で紹介している「<div class="article_kobetu2">」と終了タグ「</div>」を追加すればいいです。(コードの記述位置は、上記「入れ替えるコード」の緑色で記述している位置です)



HTMLでclassを変更する


HTMLで上記コードの「<div class="article_kobetu">」を「<div class="article_kobetu2">」に変更します。(見出しを抜いて3行目にあります)
「article_kobetu」の後ろに「2」を入れればいいだけです。


カテゴリページに記事リストを作る場合のHTMコード



CSSに新しく作ったclassを追加する


CSSに下記の記述を追加します。CSSの空いている部分にコピペしてください。


<追加するコード>
.article_kobetu2 {
margin-bottom: 40px;
padding: 10px 10px 15px 10px;
border: 1px dotted #4E667D;
line-height: 2.3em;
}

.article_kobetu2 a{
font-size:105%;
}


●「.article_kobetu2」では行間を持たせるために「line-height: 2.3em;」を追加しました。
●「.article_kobetu2 a」を作り、リンク部分(つまり記事タイトル部分)のフォントを少し大きくしました。



コード編集後のカテゴリページ


カテゴリページの記事リストの完成形




次の記事の紹介

この記事ではカテゴリページの上部に記事リストを作りました。
記事リストは他のページにも表示させることができます。
次の記事では「ブログ内検索結果ページ」に記事リストを作りたいと思います。


【Seesaaブログ新デザインシステム】ブログ内検索結果ページに記事リストを作る
前回の記事でカテゴリページにタイトルだけの記事リストを作ったので、ブログ内検索結果ページ(検索結果ページ)でも同じように記事リストを作りたいと思います。なぜカテゴリページの次にブログ内検索結果ページの‥‥




関連記事の紹介

この記事を書いた後で、記事リストのスタイルを少しだけ変更しました。


上記で記事リストの行間を少し広くしたんですが、通常はいいんですけど記事タイトルの文字数が多い場合は広くした行間のまま折り返されてしまうんですよ。
私としては、記事タイトルと記事タイトルの間(行間)は広めにして、記事タイトルの途中で折り返される時はもう少し狭い間隔で折り返してほしいわけです。そのためには、この記事で書いているような、デフォルトのHTML記述をそのまま利用したコード記述では無理なわけですね。リストタグ「li」を利用した記述に変更して、リストスタイルとして行間を設定した方がいいのです。
ついでに、この記事では記事タイトルの先頭に「◆」マークを付けていますが、リストタグを使えば、簡単に自分が準備したリストマーク(画像)を使えます。


変更した記事はこの記事でのカスタマイズが前提になっていますので、まずはこの記事の通りに編集してもらいたいと思います。その上で、上記のような変更をするならば、こちらの記事をお読みください。


【Seesaaブログ新デザインシステム】カテゴリページの記事リスト先頭にマークを付ける
私は、Seesaaブログでは「カテゴリページ」「ブログ内検索結果ページ」「タグ一覧ページ」「過去ログページ(アーカイブページ)」の各ページ上部に記事リストを置くように設定しています。機能に関しては何の問題も‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。