Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】記事ページの日付部分に曜日と投稿時…

【Seesaaブログ新デザインシステム】記事ページの日付部分に曜日と投稿時間を表示する

Seesaaブログの記事ページの日付部分に曜日と投稿時間を表示する
■Seesaaブログの記事ページの日付部分に曜日と投稿時間を表示する
■変数「%a」「%H:%M」を追加する  

Seesaaブログの記事ページ(個別記事ページ)の日付部分には投稿時間が入っていません
デフォルトのテンプレートでは、記事の投稿時間は、文章の下の「posted by(投稿者の名前と時間、コメント数、カテゴリ名)」の部分に入っています。
文章下に入っているのだから、タイトル部分には投稿時間は必要ない、という考えなのでしょうね。(知りませんけどw)


私は、記事タイトルの下には投稿時間も表示してほしい主義です。





記事ページの日付部分に曜日と投稿時間を表示する


HTMLを編集します。
管理画面の「HTML編集」画面で「<% if:page_name eq 'article' -%>」を探します。
おそらく64行目あたりにあると思います。(茶色の文字でごちゃごちゃ書いてある部分の下にあります)


個別記事の日付部分のHTML



「<% if:page_name eq 'article' -%>」(上記画像の赤色矢印)以下の記述が、HTML上でのいわゆる個別記事の設定部分になります。
このタグの下を見てみます。上記画像の青色矢印(赤い背景色)の部分です。


<span class="icn icn--calendar"></span><time datetime="<% article.createstamp | date_format("%Y年%m月%d日") -%>"><% article.createstamp | date_format("%Y年%m月%d日") -%></time>



この記述が、日付部分です。「年月日」という文字が入っているのでわかりますよね?
今回はこの部分に、投稿時間を表示させたいと思います。
ついでに曜日まで表示させて、「年月日(曜日)投稿時間」という表示にします。



投稿時間のタグ(変数)は「%H:%M」です。
曜日のタグ(変数)は「%a」です。
曜日は英語表記にします。日本語表記にしたい場合はご自分でお調べください。(オイw)



それでは、下記の「入れ替えるコード」を日付部分のコードと入れ替えてください。
丸ごとコピペすれば大丈夫です。


<入れ替えるコード>
<span class="icn icn--calendar"></span><time datetime="<% article.createstamp | date_format("%Y年%m月%d日(%a)%H:%M") -%>"><% article.createstamp | date_format("%Y年%m月%d日(%a)%H:%M") -%></time>


入れ替える日付部分のコード

●「%H:%M」と「%a」については先ほど書きましたが、投稿時間と曜日を表す変数です。
●コードを丸ごと入れ替えてしまえば、記事タイトル下の日付部分に曜日と投稿時間が表示されるようになります。
●ちなみにこれは、あくまでも個別記事ページの記事タイトル下の投稿時間です。この作業をしたからと言って、トップページの記事タイトルに投稿時間は表示されませんのでお気を付けください。



ちなみに、他のページの日付部分にも曜日や投稿時間を表示させたい場合は、こちらの記事をご覧ください。


【Seesaaブログ新デザインシステム】各ページの日付表示を変更する
記事を書くたびに日付部分のカスタマイズを説明するのが面倒なので、Seesaaブログの日付表示について、まとめて書いておこうと思います。‥‥




次の記事の紹介

次の記事では、Seesaaブログの記事ページの「タイトルと日付の間」や「行間」を設定する方法を説明します。


【Seesaaブログ新デザインシステム】記事ページのタイトルと日付の間や行間を設定する
Seesaaブログのテンプレート「シンプルA. ホワイト 右カラム」は、デフォルトの状態だと、記事ページのタイトルと日付の間が少し狭いような気がします。「気がします」と書いているように完全に感覚で発言しているんですけど‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。