【F-light】固定ページで公開・更新日を表示させる

｜2024/10/05
アイキャッチ

久しぶりのカスタマイズ記事です。(あまり需要はないかもしれませんが…)

「このブログについて」とか「プライバシーポリシー」等の固定ページで公開日や最終更新日を表示させる方法をご紹介します。ちなみに当ブログでは「このブログについて」でのみ表示させています。

CONTENTS

カスタマイズ手順

HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。

このカスタマイズは F-light テーマ専用です。その他のテーマには適用できません。

すべての固定ページで公開日と最終更新日を表示させる

①テーマの HTML 編集画面で下記のコードを検索で見つけます。

<span id='p-header'>

②このコードのすぐ上にある分岐タグ<b:if cond='data:view.isPost'>を下記のように変更します。

投稿・更新日HTML
<b:if cond='data:view.isSingleItem'>

これで固定ページでも記事ページと同じように公開日と最終更新日が表示されるようになります。公開日と更新日が同じ場合は公開日のみが表示されます。コメントがある場合はコメント数も出ます。

が、このままだとアイコンが表示されないのでSVGコードの分岐タグも変更します。

①更新アイコン

下記のコードを検索で見つけます。

<symbol id='pen'

※v1.35 より古いバージョンの場合はこちらのコードが検索対象です。

<symbol id='svg-twitter'

このコードのすぐ上にある分岐タグ<b:if cond='data:view.isPost'>を下記のように変更します。

<b:if cond='data:view.isSingleItem'>

②カレンダーアイコン

下記のコードを検索で見つけます。

<b:if cond='data:view.isPost or data:view.isArchive'>

このコードを下記のコードに変更します。

<b:if cond='data:view.isSingleItem or data:view.isArchive'>

特定のページでのみ表示させる方法

方法①: 分岐タグでURLを指定

分岐タグで URL を指定することで特定のページでのみ表示させることができます。

最初に変更した<span id='p-header'>の上の分岐タグ<b:if cond='data:view.isPost'>を下記の要領で変更します。

例: ページの URL がhttps://●●●.blogspot.com/p/blog-page_1.htmlの場合。

<b:if cond='data:view.isPost or data:blog.url == data:view.url path "p/blog-page_1.html"'>

記事ページ及び指定した固定ページで表示されます。

更に表示させたいページを追加する場合はタグの URL を追加します。

例: https://●●●.blogspot.com/p/blog-page_2.htmlを追加する場合。

<b:if cond='data:view.isPost or data:blog.url == data:view.url path "p/blog-page_1.html" or data:blog.url == data:view.url path "p/blog-page_2.html"'>

方法②: CSSで非表示

上記の手順が面倒という方には、表示させたくないページで CSS (display:none) を使って非表示にする手っ取り早いやり方もあります。

表示させたくないページの HTML 編集モードで下記の style コードを記入してください。

<style>#p-header{display:none}</style>

更新日のみ表示

個人的に固定ページでは公開日はあまり必要ない気がするので、当ブログでは更新日のみにしています。ついでにこのやり方も書いておきます。

<span id='p-header'>の数行下にある</b:includable>の直上に下記のコードを挿入します。

コード挿入位置
<b:if cond='data:view.isPage'>
    <div id='p-header'>最終更新: <data:post.lastUpdated.year/>年<data:post.lastUpdated.month/>月<data:post.lastUpdated.day/>日</div>
  </b:if>

当ブログのようにアイコンは使わず最終更新: 2024年6月5日というフォーマットで表示します。

特定のページでのみ表示させたい場合は1行目の分岐タグ<b:if cond='data:view.isPage'>を先述の手順を参考にURL指定に変更してください。(もしくは除外ページで display:none で非表示)

<b:if cond='data:blog.url == data:view.url path "p/blog-page_1.html"'>