記事一覧ページを作ってみる(前編)

引き続き、ブログのカスタマイズです。
PC版ソネブロユーザー以外の方には、まったく面白くない記事でごめんなさい。

どうやってページ一覧を出力したらいいのかね…

大昔に運営していたことのあるFC2のブログとかだと、(私の記憶が確かなら)公式で用意されているので簡単だったんですが、so-netのブログにはこの機能がないんですよね。

最新記事を表示する

<% loop:list_article -%>
<div class="ringo4">
<span class="ringo5"><% article.createstamp | date_format("%y-%m-%d") %></span><br />
<a href="<% article.page_url %>"><% article.subject | shorten(17) | html %></a><br />
<span class="ringo6"><% article.body | text_summary(60) | tag_strip | oneline | html %></span>
</div>
<% /loop -%>

↑のはサイドバーに表示されている『最近書いた記事』を表示させるためのHTMLです
class名がringoとかいうのは、私が付け加えたやつです(この命名、汎用性ないですね…)

こんな感じのを改変すればいいのかな？と一瞬考えたのですが、そもそもそんなことができるぐらいなら、もっと早くにこのブログを自分好みに改変してるわけで…(´・ω・`)
いや、ほんとどうしたらいいんだ…と、ごろごろ寝転びながら『悪魔が来たりて笛を吹く』を読みつつ、放置していました(笑)
で、もしかしたら"タグ"使えばできるんじゃないかな…とひらめいたのです。
とりあえずタグ名はなんでもよくて、普段使いそうもない感じのタグをつけておけば、あとでかぶって『しまったァァァァ～～～～～!!!!!!!!!!!!!』ってことにもなりにくそう。
素直に「記事一覧」でもいいですしね。

けど、書き上げてある記事が100越えてたら、これがまた苦行の予感しかないわけです(;´･ω･)
カテゴリは記事一覧で一度に変えられますけど、タグは記事編集画面でちまちま加えていくしか、現状方法がないですもんね…

というわけで、タグをつけるのは後回しにして、タグページをステキにするほうを先行させることにしました。

ページデザインの変更

今改造しているベースのデザイン(CSS)は、ワイドブラック(2カラム 右)なのですが、これのデフォルトのタグページはこんな感じ。


そっけないし、そもそも私のタイトルのつけ方にセンスがないせいで、タイトルがずらーっと並んでいたところで内容を推測しづらい(すみません；)のも、どうにかしたい。
やっぱり、ある程度記事本文から引用があったほうがわかりやすい(気がします)
それでこんな感じに変更。

上記ふたつのスクリーンショットは、改造テスト用別館のものです(;'∀')


とりあえず、HTMLを書き換えます。
ブログ管理ページ→デザイン→テンプレート管理→HTML編集(デフォルトしかない場合は追加する)

<% if:page_name eq 'tag' -%>
<div class="tag-top"></div>
<div class="tag">
<% if:tag %><div class="tag-title">タグ / <% tag.word | html %></div><% /if -%>
<br />

/* この間長いので端折ってます */

<div class="tag-navi">
<% if:tag_pager.previous_page %><a href="?tag_page=<% tag_pager.previous_page %>" rel="nofollow"><% /if %>≪前へ<% if:tag_pager.previous_page %></a><% /if %>  <% if:tag_pager.next_page %><a href="?tag_page=<% tag_pager.next_page %>" rel="nofollow"><% /if %>次へ≫<% if:tag_pager.next_page %></a><% /if %>
</div>
<% /if -%>
<% /if -%>

</div>
<div class="tag-bottom"></div>
<% /if -%>
</div>

このあたりを適当に配置しなおせばいいと思います。

<% if:tag %><div><span class="tag-title"><% tag.word | html %></span>&nbsp;の記事</div><% /if -%>

ページタイトル部分。
デフォルトだと　タグ / ○○(タグ名)　となってる部分です。
<% tag.word | html %>　これがページタイトルを表示させる部分。

<% if:tag_service.service_key eq 'articles' -%>
<% loop:list_data -%>
<div class="tag-article">
<div class="tag-article-title"><span class="ringo8"><a href="<% article.page_url %>"><% article.subject %></a></span><br />
<span class="ringo3"><% article.createstamp | date_format("%y-%m-%d") %></div>
<div class="tag-article-summary"><% article.entire_body | text_summary(220) | tag_strip %></div>
<hr>
</div>
<% /loop -%>
<% /if -%>

記事表示部分。
デフォルトだとタイトルと書いた日付の表示だったのを、記事本文を若干引用するように変更。
(そもそも<div class="tag-article-summary">のあたりがコメントアウトされているだけなので、コメントタグを取ればおしまい)
タイトル・日付・本文の表示位置を並び替えて、あとはフォントのサイズとかそのあたりをCSSで指定。
自分で付け加えたクラス名は ringo です…(;´･ω･)
そのほかは既存を変更しています。

<% loop:list_service -%>
<div class="tag-bottom">
<div class="tag-search"><a href="<% tag_service.page_url(tag) %>" target="_blank">'<% tag.word | html %>' でSo-netブログ全体を検索する</a></div>
</div>
<% /loop -%>

ソネブロ全体を検索する の表記は一番下に持っていきたかったので、tag-bottom に配置。
※<% loop:list_service -%>　<% /loop -%>
　この表記がないとエラーになるので付け加えました(16/2/10)

<div id="tag_cloud"><div class="ringo9">* tag cloud *</div><% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" class="_tag" title="Tag/<% count %>"><% tag.word | html %></a> <% /loop -%></div>

タグクラウドに * tag cloud * という文字を入れました。
ここはwebフォントでfont-familyを変えています。
参照：Google fonts / Early Access!

あとは、もっと見る　とか、前へ　とか、そのあたりの表記を変更。
タグページは、タグがphotosだったりvideosだったりすると、表示が変わるっぽいのですが…
そういうタグがつけられそうな記事がこのブログには存在してないので、割愛しています。

これでおおむね、好みな感じに仕上がったので今日はこれで終了です。
(全記事にタグをつけるのはまた後日…(;´･ω･)

○ タグ：Ringo ブログカスタマイズ