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

記事を書くたびに日付部分のカスタマイズを説明するのが面倒なので、Seesaaブログの日付表示について、まとめて書いておこうと思います。



例として、タグ一覧ページに掲載される記事の画像を掲載します。
何もしなければ、日付表示は「年/月/日 投稿時間」という表記です。





Seesaaブログデフォルトのテンプレート「シンプルA. ホワイト 右カラム」では、トップページや記事ページの日付は「年月日」表示になっています。「2000年10月10日」という表示です。
それなのに、タグ一覧ページでは「年/月/日 投稿時間」という表記です。つまり「2000/10/10 10:00」という表記なわけです。


こんな感じで、Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」は、それぞれのページで日付表示が違います。
なぜこういうことになっているのかはわかりませんが、バラバラで表示するよりも統一しておいた方がいいと思いますので、以下、それぞれのページの日付部分を変更します。



ちなみに、ここまでのカスタマイズの中で、既に日付表示を変更した箇所があります。
「記事ページ」と「コメント記入ページ」です。
記事ページの日付は「年月日（曜日）投稿時間」という表示にしました。コメント記入ページの日付も同じく投稿時間まで入れています。






「記事ページ」と「コメント記入ページ」で既に日付部分のカスタマイズをやってしまったので、合わせるという意味でも、Seesaaブログの各ページの日付表示は「年月日（曜日）投稿時間」で統一します。
もともと、私が好きだから「記事ページ」や「コメント記入ページ」でも曜日まで入れてるんですよね。なのでこの表記で何の問題もないです。



まずは、Seesaaブログの日付表示に関する独自タグを紹介します。
その後で、「トップページの記事」「記事ページ」「記事ページのコメント欄」「記事ページのトラックバック」「タグ一覧ページの記事」「画像一覧ページ」「コメント記入ページ」の順番で日付表示を編集します。

日付に関するSeesaaブログの独自タグ

以下は、Seesaaブログの日付に関する独自タグです。HTMLを編集して日付表記を変更します。
私は「年月日」表記が好きなのでこれを「基本形」として考えて、曜日や投稿時間をプラスしたコードを紹介しておきます。
お好きなコードを各ページの日付部分でご利用ください。



基本形「年月日」

これが基本形です。「年月日」を表示する独自タグです。



曜日（英語表記）あり

曜日を入れたい場合はこのコードです。曜日部分が「（%a）」というタグになります。



投稿時間あり

投稿時間を入れたい場合は、このコードです。投稿時間部分が「%H:%M」というタグです。



以下、日付表記の編集はHTML編集画面で行いますが、コードを記述していくのが面倒なので画像で説明します。
一応、デフォルトのテンプレート「シンプルA. ホワイト 右カラム」の該当行数を書いていますが、掲載している画像は私なりのカスタマイズ後の画像なので、行数がデフォルトとは違うと思います。ご注意ください。



私自身は日付表示を「年月日（曜日）投稿時間」という表記にしますので、お好きな表記を選んで上記の紹介している独自タグ部分と入れ替えて利用してください。
「トップページの記事」「記事ページ」「記事ページのコメント欄」「記事ページのトラックバック」「タグ一覧ページの記事」「画像一覧ページ」「コメント記入ページ」の順番で掲載します。

トップページの記事の日付を編集する

トップページの記事の日付は、テンプレートがデフォルトのままだと139行あたりにあります。
「<article class="entry">」の中です。





HTMLの該当部分に下記「入れ替えるコード」の記述をコピペもしくは該当箇所を直接変更して、「保存」します。


＜入れ替えるコード＞

コード入れ替え後のトップページ

記事ページの日付を編集する

記事ページの日付は、テンプレートがデフォルトのままだと70行あたりにあります。
「<article class="article">」の中です。


私のブログでは、既に記事ページの日付を編集しています。
現時点でデフォルトのコード画像を持っていませんので、既に投稿時間まで入れたコード画像を掲載しておきます。該当部分にコピペしてください。


＜入れ替えるコード＞

コード入れ替え後の記事ページ

記事ページのコメント欄の日付を編集する

記事ページ下部の「コメント欄」の日付は、テンプレートがデフォルトのままだと290行あたりにあります。「<footer class="comments__meta">」の中です。





コメント欄の日付には既に投稿時間が入っていますので、「曜日」を追加したいと思います。


＜入れ替えるコード＞

コード入れ替え後の記事ページのコメント欄

記事ページのトラックバックの日付を編集する

記事ページの下部にあるトラックバックの日付は、テンプレートがデフォルトのままだと325行あたりにあります。
私はトラックバックの設定をしていないのでよくわかりませんが、こちらも曜日を追加できるみたいですね。いつかやるかもしれないので、念のためにコードを入れ替えておきます。（私自身が設定をしていないので、実際のページの画像はありません）





＜入れ替えるコード＞

タグ一覧ページの記事の日付を編集する

タグ一覧ページの記事の日付は、テンプレートがデフォルトのままだと362行あたりにあります。
「<% if:tag_service.service_key eq 'articles' -%>」の中です。
コレが、私がこの記事の冒頭で、タグ一覧ページで日付表示が「年/月/日 投稿時間」になっていると書いていた部分です。





日付の表示を統一したいと思いますので「/」がいらないですね。
「年月日」表記に変更して、「曜日」もプラスしたいと思います。


＜入れ替えるコード＞

コード入れ替え後のタグ一覧ページ

このように日付表示がうまくいきましたが、何かが足りない‥‥。
あ、カレンダーのアイコンが無いんだ！！



では、カレンダーのアイコンまで入れてしまいましょう！！
（どうしても個別記事ページの日付表示と同じにしたいのですｗ）


＜入れ替えるコード＞

コード入れ替え後のタグ一覧ページ（アイコン付き）

画像一覧ページの日付を編集する

画像一覧ページの日付は、テンプレートがデフォルトのままだと450行あたりにあります。
「<% if:page_name eq 'upload' -%>」の中です。





とりあえず投稿時間は表示させずに「曜日」までを表示したいと思います。
（ちなみに、この画像一覧ページは、まだカスタマイズしていません）


＜入れ替えるコード＞

コード入れ替え後の画像一覧ページ

コメント記入ページの日付を編集する

コメント記入ページの日付は、テンプレートがデフォルトのままだと620行あたりにあります。
「<% if:page_name eq 'comment' -%>」の中です。


私のブログでは、既にコメント記入ページの日付を編集しています。
現時点でデフォルトのコード画像を持っていませんので、既に投稿時間まで入れたコード画像を掲載しておきます。


＜入れ替えるコード＞

コード入れ替え後のコメント記入ページ

次の記事の紹介

次の記事では、Seesaaブログの画像詳細ページにタイトルを作る方法を説明します。