初めてテンプレートを本格的に作っている。 今時FC2ブログでテンプレート作ってる人など居ないので、古い情報しか見つからないし散見しているしで面倒だった。 その覚え書き。 作りたい物は軽量高速なテンプレート。余計な物は付けたくないし、JavaScriptも極力使わないようにしたい。 目次 非公開変数 親子カテゴリに対応したパンくずリスト ページネーションもどき 更新がな...">

FC2ブログのテンプレート覚え書き

">

初めてテンプレートを本格的に作っている。 今時FC2ブログでテンプレート作ってる人など居ないので、古い情報しか見つからないし散見しているしで面倒だった。 その覚え書き。

作りたい物は軽量高速なテンプレート。余計な物は付けたくないし、JavaScriptも極力使わないようにしたい。

非公開変数

非公開と言うかマニュアルに載ってない、載っていても説明が足りない変数が結構あるみたい。

例えばこれとか
【ブログ】テンプレート変数に管理人コメントブロック変数が追加されました。 - FC2総合インフォメーション

まとめてくれてる人もいるんだけど、その情報も10年以上前のものだったり。

親子カテゴリに対応したパンくずリスト

やりたいこと

カテゴリページ
TOP > カテゴリ

親カテゴリページ
TOP > 親カテゴリ

子カテゴリページ
TOP > 親カテゴリ > 子カテゴリ

普通にやると子カテゴリページで親カテゴリを表示出来ないので、 変数の内容を最初の1つ目だけ出力する方法を使う。

<!--topentry-->
<!--parent_category-->
  <span> > </span>
  <a href="<%topentry_parent_category_link>"> > <%topentry_parent_category></a>
<!--/parent_category-->
<!--not_category_area--><!--/topentry--><!--topentry--><!--/not_category_area-->
<!--/topentry-->
  <span> > </span>

こんな風に変数を襷掛けにすると、トップに表示されてる記事の親カテゴリ名一つだけを出力できる。

ただし、このままだと親カテゴリページで、かつ、 トップの記事が子カテゴリの記事だった場合、パンくずリストに親カテゴリ名が2個並んでしまうので

トップの記事が子カテゴリの記事だった場合
TOP > 親カテゴリ > 親カテゴリ

  <style>
    .category-no<%cno> + .category-no<%cno>{display: none;}
  </style>
<!--topentry-->
<!--parent_category-->
  <span class="category-no<%topentry_parent_category_no>"> > </span>
  <a class="category-no<%topentry_parent_category_no>" href="<%topentry_parent_category_link>"><%topentry_parent_category></a>
<!--/parent_category-->
<!--not_category_area--><!--/topentry--><!--topentry--><!--/not_category_area--><!--/topentry-->
<!--/topentry-->
  <span class="category-no<%cno>"> > </span>

カテゴリNoをclass名に振って、同じカテゴリNoが2つ並んでいたら前の一つを消すことにした。

完成したのが以下

<!-- パンくずリスト -->
<!--not_index_area-->
  <div class="breadcrumb">
    <a href="./">TOP</a>
<!--permanent_area-->
<!--topentry-->
<!--parent_category-->
    <span>&gt; </span><a href="<%topentry_parent_category_link>"><%topentry_parent_category></a>
<!--/parent_category-->
    <span>&gt; </span><a href="<%topentry_category_link>"><%topentry_category></a>
<!--not_permanent_area-->
    <span>&gt; </span><b><%sub_title></b>
<!--/not_permanent_area-->
<!--permanent_area-->
    <span>&gt; </span><b><%sub_title></b>
<!--/permanent_area-->
<!--/topentry-->
<!--/permanent_area-->
<!--category_area-->
<!--topentry-->
<!--parent_category-->
    <style>
      .b-category-no<%cno> + .b-category-no<%cno>{display: none;}
    </style>
    <span class="b-category-no<%topentry_parent_category_no>">&gt; </span><a class="b-category-no<%topentry_parent_category_no>" href="<%topentry_parent_category_link>"><%topentry_parent_category></a>
<!--/parent_category-->
<!--not_category_area--><!--/topentry--><!--topentry--><!--/not_category_area--><!--/topentry-->
    <span class="b-category-no<%cno>">&gt; </span><b><%sub_title></b>
<!--/category_area-->
<!--date_area-->
    <span>&gt; </span><b><%sub_title>の記事一覧</b>
<!--/date_area-->
<!--search_area-->
    <span>&gt; </span><b>キーワード「<%search_word>」を含む記事</b>
<!--/search_area-->
<!--tag_area-->
    <span>&gt; </span><b><%tag_word></b>
<!--/tag_area-->
<!--edit_area-->
<!--topentry-->
<!--parent_category-->
    <span>&gt; </span><a href="<%topentry_parent_category_link>"><%topentry_parent_category></a>
<!--/parent_category--><!--/topentry-->
    <span>&gt; </span><a href="./blog-category-<%edit_category_no>.html"><%edit_category_title></a>
    <span>&gt; </span><a href="./blog-entry-<%edit_entry_no>.html"><%edit_entry_title></a>
    <span>&gt; </span><b>コメントの編集</b>
<!--/edit_area-->
<!--titlelist_area-->
    <span>&gt; </span><b>全記事一覧</b>
<!--/titlelist_area-->
<!--not_index_area-->
<!--not_category_area-->
<!--not_tag_area-->
<!--not_search_area-->
<!--page_area-->
    <span>&gt; </span><b>page <%current_page_num></b>
<!--/page_area-->
<!--/not_search_area-->
<!--/not_tag_area-->
<!--/not_category_area-->
<!--/not_index_area-->
  </div>
<!--/not_index_area-->

ページネーションもどき

ページネーション用の変数はあるんだけど、スマホ用ページでしか使えない。 でも、<%template_pager1>と同様の物は出来た。

1 ... 1 2 3 ... 3

<!-- ページネーションもどき -->
<!--page_area-->
  <nav class="pagination">
  <style>
    .pagination {counter-reset: prev <%current_page_num> next <%current_page_num>;}
    .p-prevno:after {counter-increment: prev -1;content: counter(prev);}
    .p-nextno:after {counter-increment: next;content:counter(next);}
  </style>
<!--firstpage_disp-->
  <a class=p-firstno" href="<%firstpage_url>"><!--/firstpage_disp--><!--firstpage_disp--><%firstpage_num></a>
  <span class="p-ellipsis">...</span>
<!--/firstpage_disp-->
<!--prevpage-->
  <a class=p-prevno" href="<%prevpage_url>" title="prev"></a>
<!--/prevpage-->
  <b class=p-currentno"><%current_page_num></b>
<!--nextpage-->
  <a class=p-nextno" href="<%nextpage_url>" title="next"></a>
<!--/nextpage-->
<!--lastpage_disp-->
  <span class="p-ellipsis">...</span>
  <a class=p-lastno" href="<%lastpage_url>"><!--/lastpage_disp--><!--lastpage_disp--><%lastpage_num></a>
<!--/lastpage_disp-->
  </nav>
<!--/page_area-->

前後のページを表示する変数<%nextpage_url><%prevpage_url>と、 マニュアルには無いが現在のページ数を表示する<%current_page_num>を利用し、これにCSSのcounterで番号を振っている。
マニュアルでは<!--firstpage_disp--><!--lastpage_disp-->は スマホテンプレート用変数内にあるが、PCページでも使える。

最初と最後のページのリンクが重複してて格好悪いけど、<%template_pager1>も同じ仕様なわけだしまあ良いかな。

更新がない記事には最終更新日を表示しない

やりたいこと

更新があった記事
✎ 2024-03-05 | ↻ 2024-03-08

更新が無い記事
✎ 2024-03-05

<style>
  [datetime="<%topentry_modified_xxx>(最終更新日時)"] + [datetime="<%topentry_modified_xxx>(最終更新日時)"] {display: none;}
</style>
<div>
  <time datetime="<%titlelist_xxx>(投稿日時)"><%titlelist_xxx>(投稿日時)</time>
  <time datetime="<%topentry_modified_xxx>(最終更新日時)"><%topentry_modified_xxx>(最終更新日時)</time>
</div>

わかりにくいけど、要するにdatetime内に<%titlelist_xxx><%topentry_modified_xxx>で 投稿日時と最終更新日時を書いておいて、2つが同じならば最終更新日の方を消している。

ソースを綺麗にしたい

相当に気を使わない限り、とても子供には見せられないようなソースが出力されてしまう。 これは、一つ改行位置をずらしてはソースを確認する、という作業を延々と繰り返すしかないので頑張った。 テンプレートには奇妙な改行やインデントが溢れてしまったが、人様に見せられるぐらいには整ったと思う。

多少工夫が必要な箇所もあったので、最新記事のプラグインで例を一つ

デフォルトのHTML
<ul>
  <!--recent-->
    <li>
      <a href="<%recent_link>" title="<%recent_title>">&rplugin_rtitle (<%recent_month>/<%recent_day>)</a>
    </li>
  <!--/recent-->
</ul>

出力されるソース
<ul>
  <li>
      <a href="URL" title="タイトル">タイトル(日付)</a>
    </li><li>
      <a href="URL" title="タイトル">タイトル(日付)</a>
    </li><li>
      <a href="URL" title="タイトル">タイトル(日付)</a>
    </li></ul>

繰り返し内容を出力する変数は基本的に改行してくれないので、変数を入れる位置が重要になる。

変更したHTML
<ul<!--recent-->>
  <li><a href="<%recent_link>" title="<%recent_title>">&rplugin_rtitle (<%recent_month>/<%recent_day>)</a></li
  <!--/recent-->>
</ul>

出力されるソース
<ul>
  <li><a href="URL" title="タイトル">タイトル(日付)</a></li>
  <li><a href="URL" title="タイトル">タイトル(日付)</a></li>
  <li><a href="URL" title="タイトル">タイトル(日付)</a></li>
</ul>

FC2の要約表示(<%topentry_description>)はクソ

  • 改行を削除しない
  • 「"」「>」などを文字参照変換していない

そこでOGP設定を有効にすると

424-ogp

なにこれぇ…。

ちなみに、この記事ではわざと冒頭に「">」と書いているので、<head>内の文字がページ上部に表示されてしまっている。

参考

更新履歴
2024-03-08
更新がない記事には最終更新日を表示しないを追加
2024-03-04
公開