記事下に表示される【このカテゴリーの最新記事】をカスタマイズする
Seesaa Blogやファンブログで最初の記事の下に表示される【このカテゴリーの最新記事】を改造します。
このページでは、画像付きの【このカテゴリーの最新記事】は取り扱っていません。画像付き【このカテゴリーの最新記事】の表示を変えたい方は次のページをご覧ください。
画像付きで記事下に表示される【このカテゴリーの最新記事】のルックスを変更するプラグイン
このページでやること
このページで出てくるもの
- <% article.category.name %>
- text_summary(0)
準備
改造するためにはテンプレートを編集しないといけません。ファンブログのテンプレートは次の手順で開きます。
管理画面にログインした直後なら下の画面のデザインをクリック。
切り替わった画面でHTMLをクリック。
するとHTMLの一覧という画面が開きます。
ログイン直後以外の画面から移動する時は画面上部のメニューにあるデザインにマウスを合わせ、出てきた一覧のいちばん下にあるHTMLをクリックしても開けます。
html名の一覧にあるデフォルトHTMLは編集できません。デフォルトHTMLしかない時はHTMLの追加ボタンを押します。
デフォルト以外のHTMLがあって、そこに適用の印が付いている場合は、そのHTMLの名前（または"編集"という文字）をクリックします。
古いファンブログから移行したテンプレートは、はじめからデフォルト以外のテンプレートが追加されています。
HTMLの追加ボタンを押した場合は、開いたページのHTML名が空欄になっているので、好きな名前を記入します。
名前は必ず必要です。保存する時に名前がないとエラーになります。また保存後、名前の左の適用マークをクリックして印を付けないと、カスタマイズしたHTMLが有効になりません。
上の画像の<!DOCTYPE HTML>で始まっているのがテンプレートです。
<!DOCTYPE HTML>以外ではじまっているテンプレートもあります。上の図と同じ場所にあるのがテンプレートです。
テンプレートの編集は難しいので一旦、メモ帳などのエディタにコピーして作業することをおすすめします。エディタで修正が終わってから、コピー元に貼りつけて保存する方が間違えにくいです。
このカテゴリーという表示を変更する
テンプレートの中にある【このカテゴリーの最新記事】という文字を探します。
テンプレートの中は複雑に同じような表示がたくさん出てきますが、
【このカテゴリーの最新記事】は1ヵ所しかありません。
見つけたらこのカテゴリーという部分を<% article.category.name %>に変更します。
変更前
<% if:list_category_article -%>
<div class="listCategoryArticle">
【このカテゴリーの最新記事】<br />
<ul>
<% loop:list_category_article %>
<li><a href="<% article.page_url %>"><% article.subject | text_summary(20) %></a></li>
<% /loop %>
</ul>
</div>
<% /if %>
変更後
<% if:list_category_article -%>
<div class="listCategoryArticle">
【<% article.category.name %>の最新記事】<br />
<ul>
<% loop:list_category_article %>
<li><a href="<% article.page_url %>"><% article.subject | text_summary(20) %></a></li>
<% /loop %>
</ul>
</div>
<% /if %>
これで【このカテゴリーの最新記事】と表示されていた部分の
このカテゴリーがその記事のカテゴリー名に変更されます。
カテゴリー名を表示するタグは<% article.category.name %>
ただし、このタグ<% article.category.name %>は
<% if:list_category_article -%>と<% /if %>の間でしか使えません。
長い記事名の後半を省略させずに全部表示する
Seesaa Blog と同じシステムのファンブログのテンプレートでは文字数を縮める時は text_summary(20)という関数を使います。
この中の20という数字を大きくすれば、切り詰める前の文字数が長くなります。また、この数字を0にすれば省略せずに全文表示します。
数字をいくつにするかは好みですが、このページの例では0にして全部表示します。
全文表示させたい時は、数字を0にするのでなくtext_summary(20)を丸ごと削除しても出来ますが、後で「やっぱり元に戻したい」となった時は大変です。
注）もし丸ごと削除する時は、その前にある | も消去する必要があります。
変更前
<% if:list_category_article -%>
<div class="listCategoryArticle">
【<% article.category.name %>の最新記事】<br />
<ul>
<% loop:list_category_article %>
<li><a href="<% article.page_url %>"><% article.subject | text_summary(20) %></a></li>
<% /loop %>
</ul>
</div>
<% /if %>
変更後
<% if:list_category_article -%>
<div class="listCategoryArticle">
【<% article.category.name %>の最新記事】<br />
<ul>
<% loop:list_category_article %>
<li><a href="<% article.page_url %>"><% article.subject | text_summary(0) %></a></li>
<% /loop %>
</ul>
</div>
<% /if %>
切り詰める文字数の変更はtext_summary(0)の数字を変える。
数字を0にすると全文表示となる。
スタイルシートでルックスを変える
カテゴリーの最新記事のクラス名はlistCategoryArticleです。このクラスにスタイルシートを適用すればルックスは変わります。
スタイルシートそのものの説明はしませんが、このページのサンプルには次のスタイルを適用しています。
.listCategoryArticle {
background: #eeffee;
border: 1px solid #00ff00;
border-radius: 5px;
}
ファンブログでの、スタイルシートの追記方法は、別の記事「大きな画像が枠から絶対はみ出さないスタイルシートの設定」に書いてあります。
