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

【Seesaaブログ新デザインシステム】タグ一覧ページに記事リストを作る(2)

Seesaaブログのタグ一覧ページに記事リストを作る
■Seesaaブログのタグ一覧ページ上部に記事リストを作る(2)
■編集が複雑になるのでHTMLに見出しを付ける
■HTMLにコードを追加  

今回の「タグ一覧ページ」の記事リスト作成は、内容を書いていたらあまりにも長くなったので「1」と「2」に分けて掲載しています。
前回の記事<■タグ一覧ページに記事リストを作る(1)>の続き記事になりますので、まずは「1」の記事を先に確認しておいてください。







タグ一覧ページに記事リストを作る(見出しを付ける)


タグ一覧ページに関するHTMLの記述は、前回の記事で編集した箇所の他にもう1つあります。


管理画面の「HTML編集」画面を開き「<% if:page_name eq 'tag' -%>」で検索すると2ヶ所がヒットしますが、今から2つ目を編集します。(1つ目は前回の記事「1」で編集したタイトル部分です)
デフォルトのテンプレートだと332行目です。
ここまでのカスタマイズ後だと402行目あたりです。



まずはHTMLのタグ一覧ページに対して見出しを付けます。
コレ、やっておかないと本当に混乱してしまいます。
デフォルトのテンプレートの場合(タグクラウドやタグサーチを移動させていない場合)も、ここの見出しは付けておいた方がパーツの入れ替えをする時に役立つと思います。



付ける見出しは2種類です。
「タグページ 開始」と「終了」、「タグページ(記事) 開始」と「終了」です。
HTMLのタグ一覧ページ部分には記事だけではなく他のパーツ(画像やビデオなど)に関する記述も入っていますので、膨大な量のタグが記述されています。
私はタグを付けるのは「記事」に対してだけにして画像やビデオにはタグを付けないので、この膨大な記述の中で「記事」部分はどこなのかのわかるようにしておきたいのです。
もしも画像やビデオなどにタグを付ける場合は、ご自分で編集してくださいね。私は関知しませんのでw



タグ一覧ページのHTMLに見出し「タグページ 開始」を付ける


タグ一覧ページがどこからどこまで記述されているのかをわかりやすくするために、コメントアウトで見出しを付けます。


まずは、「<% if:page_name eq 'tag' -%>」の上に「<!-- ********** タグページ 開始 *********** -->」と記述します。


コメントアウトでタグ一覧ページ開始の見出しを付ける位置



そして、どんどんスクロールしていって、「<% if:page_name eq 'upload' -%>」の上に「<!-- ********** /タグページ 終わり *********** -->」と記述します。
「<% if:page_name eq 'upload' -%>」はHTML記述中、かなり下の方にありますので注意してください。(タグ一覧ページに関する記述はごちゃごちゃ多いのです)


コメントアウトでタグ一覧ページ終了の見出しを付ける位置



タグ一覧ページのHTMLに見出し「タグページ(記事) 開始」を付ける


タグ一覧ページの記述の中には記事部分(本来の記事リスト)の記述があります。
これを「タグページ(記事)」と呼ぶことにします。


先ほど追加した「<!-- ********** タグページ 開始 *********** -->」の見出しの下に島が1つあります。(島の下に1行分の空きがあるはずです)
その下に「<% loop:list_service -%>」があり、また1行空いて「<% if:tag_service.service_key eq 'articles' -%>」があります。


この「<% loop:list_service -%>」と「<% if:tag_service.service_key eq 'articles' -%>」の間に、見出し「<!-- *** タグページ(記事) 開始 *** -->」を記述します。
この見出しの下からタグ一覧ページの記事部分が始まります。


コメントアウトでタグ一覧ページの記事部分開始の見出しを付ける位置



記事部分の終わりは「<% if:tag_service.service_key eq 'photos' -%>」の直前です。
<!-- *** /タグページ(記事) 終わり *** -->」という見出しを付けておきます。
「開始」と「終わり」を追加したHTMLはこんな感じになります。


コメントアウトでタグ一覧ページの記事部分終わりの見出しを付ける位置



注意してほしいこと


私のブログカスタマイズでは、以前の記事<■タグ一覧ページの記事を線で囲む>でタグ一覧ページの記事を点線で囲むという処理をしました。
その時に見出し「<!-- 記事一覧(要約あり)囲い線 開始 -->」と「<!-- /記事一覧(要約あり)囲い線 終わり -->」を記述していました。
コレです。


コメントアウトで見出しを付けた状態のタグ一覧ページの記事部分


この見出しは「タグ一覧ページの記事一覧(要約あり。つまり本来の記事リスト)」の開始と終了をわかりやすくするために付けました。
この見出しに囲まれている部分を点線で囲んだからね、って意味です。



点線で囲まれたこの部分はあくまでもタグ一覧ページの記事(元からあった記事リスト)であり、今から作ろうとしている「タイトルのみを表記させる記事リスト」ではありません。
コレ、注意してくださいね。
記事リストはページ上部に表示させたいと思っているのですから、既に点線で囲んでいる本来の記事リストよりも上に記事リストのコードを記述しなければいけません。



タグ一覧ページに記事リストを作る(コードの追加)


追加するコードを紹介する前に、コードの意味を少しだけ説明しておきます。


<追加するコードの内容>
-----囲い線-----
◆記事タイトルと日付(曜日) ←今から作る記事リスト
-----囲い線-----
◆ページ案内ボタン「次へ」
◆「もっと見る」ボタン
◆余白100px
◆タイトル(タグ「○○○○」の記事一覧) ←元からあった短文表示の記事リストのタイトル


<意訳>
点線で囲った中に「新作の記事リスト」を表示させる。
もしもページ案内が必要ならば、点線で囲った下にページ案内ボタン「次へ」を表示させ、「次へ」案内ボタンを使う場面ではないならば、「もっと見る」ボタンを表示させる。(ここでページの切り替えを行なおうとしています)
タイトルにclass「subheading」を使って余白を100px空けてから、元からあった記事リストのタイトルを表示させる。
(以下、元からあった短文表示の記事リストを表示する)



タグをクリックして開いたページ(タグ一覧ページ)には、ページ案内ボタン「次へ」はありません。「次へ」ボタンは「もっと見る」ボタンをクリックした先のページに表示されるものですが、HTMLの記述上は上記の構成で書いておくべきですので、気にせずにそのまま以下のコードを追加してください。



まあ、自分で書いていてもよくわからない説明なので、もう気にしないでください。
下記で紹介しているコードをHTMLに追加したら、ページ上部に記事リストが掲載された、それなりのタグ一覧ページになります、ハイ。



HTMLにコードを追加する


記事リストのコードを追加したいと思います。
先ほど「注意してほしいこと」で説明したように「<!-- 記事一覧(要約あり)囲い線 開始 -->」の上に記述することになりますが、真上ではありません。
正確には、「<% if:tag_service.service_key eq 'articles' -%>」の真下です。



「<% if:tag_service.service_key eq 'articles' -%>」と「<% loop:list_data -%>」の間に、以下のコードすべてを記述してください。
「<% loop:list_data -%>」以下を消さないでください。


<コードを追加する位置>
記事リストのコードを追加する位置


<追加するコード>
<!-- 記事リスト 囲い線 開始 -->
<div class="article_kobetu">
<% loop:list_data -%>
<article class="article">
◆ <a href="<% article.page_url -%>"><% article.subject -%></a> <% article.createstamp | date_format("%Y/%m/%d(%a)") -%>
</article>
<% /loop -%>
</div>
<!-- /記事リスト 囲い線 終わり -->

<!-- ページ案内 開始 -->
<% if:pager -%>
<div class="permalink">
<% if:pager.previous_page -%><a href="?page=<% pager.previous_page -%>" class="prev">前へ</a><% /if -%>
<% if:pager.next_page -%><a href="?page=<% pager.next_page -%>" class="next">次へ</a><% /if -%>
</div>
<!-- 「もっと見る」ボタンの表示 -->
<% else -%>
<p class="read-more read-more--bdt read-more--mgb-60"><a href="<% blog.tag_url(tag, tag_service.service_key) -%>">「<% tag.word -%>」の記事をすべて見る</a></p>
<% /if -%>
<!-- /ページ案内 終わり -->

<!-- *** タグページ(下部)*** -->
<div class="subheading">
<p class="heading">タグ「<% tag.word -%>」の記事一覧</p>
</div>


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

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



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


編集後のタグ一覧ページの記事リストのコード

編集後のタグ一覧ページの記事リスト部分


「もっと見る」ボタンをクリックした先のページ
「もっと見る」をクリックした後のタグ一覧ページの記事リスト部分



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


上記のようにコードを全部コピペすると、記事リストを表示させることができます。
実際に作ってみると、ちょっと行間が狭いような気がしてきました。


行間の調整のためには、上記コードで使った「<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">」に変更します。(見出し「<!-- 記事リスト 囲い線 開始 -->」の真下にあります)
「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ブログ新デザインシステム】過去ログページ(アーカイブページ)に記事リストを作る
記事リスト作成シリーズの第四弾は「過去ログページ」です。(第四弾とか言いながら、シリーズ最後ですけどねw)「過去ログページ」という呼び方で大丈夫だとは思いますが、HTMLの記述を見ると‥‥




関連記事の紹介

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


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


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


【Seesaaブログ新デザインシステム】タグ一覧ページの記事リスト先頭にマークを付ける
機能に関しては問題ありませんが、記事タイトルが長文になった場合に、記事リストの行間が少し広く感じてしまうのと、単語の途中で折り返されてしまうのが気に入らないので編集します。この記事では「タグ一覧ページ」の記事リスト‥‥






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

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