ブログカスタマイズの雑談BLOG

記事リスト調整シリーズ、第三弾は「タグ一覧ページ」です。
一応、今回の「記事リスト調整」に関する記事を紹介しておきます。






私はSeesaaブログで「カテゴリページ」「ブログ内検索結果ページ」「タグ一覧ページ」「過去ログページ（アーカイブページ）」の各ページ上部に記事リストを置くように設定しています。
機能に関しては問題ありませんが、記事タイトルが長文になった場合に記事リストの行間が少し広く感じてしまうのと、単語の途中で折り返されてしまうのが気に入らないのです。（何度も同じ説明をしていて、段々しつこさが増してきましたｗ）



ということで、この記事では「タグ一覧ページ」の記事リストを編集します。
そして、次の記事で「過去ログページ（アーカイブページ）」の記事リストを編集したら、私が独自で作った「記事リスト」に関する編集というか調整は、終わりです。

記事リストを編集する前の準備

以前の記事＜■【Seesaaブログ新デザインシステム】カテゴリページの記事リスト先頭にマークを付ける＞で「カテゴリページ」の記事リストを編集した際に書いているように、リストマークの画像を準備してください。


あと、CSSには記事リストのために作ったclass「top-list」関連を記述してください。
この2つの作業をやっておけば、HTMLを編集するだけで作業が終わります。



念のために画像とCSSを掲載しておきますが、とりあえず現時点のテンプレートがどういう状況に変化するのかは、上記に掲載している「カテゴリページ」の記事リストに関する記事で確認しておいてください。

私が準備したリストマークの例

どういう画像が必要なのか「例」という意味で私が準備した画像を紹介しますが、そのまま画像を保存して使用するのはやめてください。「アイコン」「矢印」「フリー」等の単語でネット検索すると、親切な方が無料でダウウンロードさせてくれるので、そういうものを探してみてください。



リストマーク
「yajirushi_03.png」

class「top-list」

リストタグを使用して記事リストを作るための、スタイルを設定したclass「top-list」を紹介しておきます。
このまま、CSSの空いている場所にコピペすればいいと思います。
記述内の画像のURL部分（赤色文字）は、ご自分でアップロードしたリストマークの画像のURLを記述してください。


＜CSSに追加するコード＞

タグ一覧ページの記事リストHTMLを編集する

HTMLを編集します。
下記「関連記事」を参考に、タグ一覧ページには記事リストを掲載するようにカスタマイズしておいてください。






管理画面の「HTML編集」画面を開き、「<% if:page_name eq 'tag' -%>」で検索すると2ヶ所がヒットしますが、そのうちの2つ目を編集します。タグ一覧ページの記事リスト部分です。（記事リストを設置していますので、もちろんデフォルトのコードとは全く違う記述になっているはずです）


＜元コード＞




この記述は、カテゴリページと同じように、記事リストの先頭に無理やり「◆」マークを付けた記述です。
この「◆」マークを、準備した画像に変更し、行間や折り返しを調整します。



具体的には、上記コード内の赤色文字「◆ <a href="<% article.page_url -%>"><% article.subject -%></a>　<% article.createstamp | date_format("%Y/%m/%d（%a）") -%>」の部分をリストタグ「ul」と「li」で囲みます。
「ul」には新しく作っていたclass名「top-list」を付けて「<ul class="top-list">」と記述します。
（CSSには既に「top-list」関連の記述が為されていることが前提です。記述していない場合は、カテゴリページに関する編集記事を参考にして記述しておいてください。一応、念のためにこのページ上部にもCSSのコードを掲載しています）



以下の「入れ替えるコード」をそっくりコピペします。
赤色の文字の上、「<article class="article">」から「</article>」までを入れ替えれば簡単です。


＜入れ替えるコード＞


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

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

次の記事の紹介

この記事ではタグ一覧ページの記事リストを調整しました。
次の記事では「過去ログページの記事リスト」について、同じような内容の編集をしたいと思います。