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

記事を書いた時に設定している「タグ」をクリックすると記事一覧を表示することができます。この、タグをクリックして開くページのことを勝手に「タグ一覧ページ」と呼ぶことにします。
現時点でのタグ一覧ページです。


現時点のタグ一覧ページ



記事ページやコメント記入ページとは違って、タグ一覧ページは、選んだタグが付けられた記事を全部表示します。リスト表示、みたいな感じでしょうか。



タグ一覧ページでは、1ページに6件の記事が表示されます。
記事に書いた内容全部が表示されるのではなく、設定された文字数が表示されて「続きを読む」リンクで折りたたまれる、いわゆる「短文」表示です。
何もカスタマイズしなければ、記事と記事の間がよくわかりません。記事タイトルで区別する、という感じですかね。
ちょっと中途半端だと思いますので、記事の1つ1つを線で囲んで、境目をハッキリさせたいと思います。
トップページと同じようなイメージです。

タグ一覧ページの記事部分を線で囲む

点線で囲むという指示を出すclassは「article_kobetu」です。
私が記事ページ設定の時に作りました。
コメント記入ページ＜■コメント記入ページの記事を線で囲む＞でも使いましたね。





点線で囲むというclass「article_kobetu」は使いまわすために作ったclassです。せっかく作ったのだから、今回のタグ一覧ページでも利用します。
点線枠「article_kobetu」は既にCSSに記述しているので、HTMLだけを編集すればいいです。

HTMLのタグ一覧ページ部分に「article_kobetu」を追加

HTMLを編集します。
管理画面の「HTML編集」画面を開き、「<% if:tag_service.service_key eq 'articles' -%>」タグで検索すると1ヶ所がヒットしますので、この部分を編集します。


あ、もしかしたら「tag-search」で検索したらいいかもしれません。
「tag-search」関連の下部分が、今回編集するコードです。





この部分がHTML上でのタグ一覧ページの「記事」部分です。
「article_kobetu」は点線で囲むというclassなので、HTMLに「<div class="article_kobetu">」というタグを使用して枠を入れ込みます。もちろん終了タグ「</div>」も追加します。
ついでに、HTML上でも何の指示を出しているのかわかりやすくするために見出しを入れておきます。



コメント記入ページで懲りたので（笑）、コードをそのままコピペすることはおススメしません。下記の赤色の文字のように直打ちで追加してください。（赤色の文字のタグをコピペすればいいです）


＜追加するコード（赤色部分）＞




●これで、タグ一覧ページの記事1つ1つが点線で囲まれることになります。
●CSSで「article_kobetu」の設定は終わってますので、記事を点線で囲む作業はこれで終わりです。

タグ一覧ページに表示される文字数を変更する

ついでと言っては何ですが、文字数も変更してしまいます。
上記コード部分（HTMLコード）と同じ位置に「<% article.entire_body | text_summary(240) | tag_strip -%>」というコードがあります。





このコードの中の数値「240」の部分が、タグ一覧ページの記事に表示する文字数（バイト）です。ご自分の好きなように変更してください。
私は「150」にしてみました。

コード編集後のタグ一覧ページ

こんな感じで、記事1つ1つを線で囲むことができました。







次の記事の紹介

タグ一覧ページには、ページの上の方にタグクラウドや案内リンクが入っています。





ページの上部にこういうのが存在していると、正直、邪魔です。
次の記事では、タグ一覧ページの各パーツ（タグクラウドや案内リンク）を入れ替えて、もう少しスッキリ表示させたいと思います。