×同日に複数投稿すると2件目以降には日付が表示されない
○表示フォーマットが多い
タイムスタンプ
○全記事に表示される
×表示フォーマットが少ない
投稿日を非表示にして、タイムスタンプの表示形式と位置を変更して代用する。
レイアウト → ブログの投稿の設定 にて
時刻:の表示形式を m/dd/yyyy (例:6/19/2013)に変更
テンプレート → HTMLの編集 にて
<data:post.timestamp/>↑を
↓に書き換える
<span expr:id='"post-timestamp-" + data:post.id'> <script type='text/javascript'> changeDateFormat('<data:post.id/>', '<data:post.timestamp/>'); </script> </span>↓こうなる
<span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <b:if cond='data:post.url'> <meta expr:content='data:post.canonicalUrl' itemprop='url'/> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'> <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'> <span expr:id='"post-timestamp-" + data:post.id'> <script type='text/javascript'> changeDateFormat('<data:post.id/>', '<data:post.timestamp/>'); </script> </span> </abbr> </a> </b:if> </b:if> </span>Javascriptを追加する
※ここではレイアウト → HTML/Javascriptガジェットに追加した
<script type="text/javascript"> //<![CDATA[ // タイムスタンプ function changeDateFormat (id, date) { var div = document.getElementById('post-timestamp-' + id); var splDate = date.split("/"); var change_date = splDate[2] + "/" + splDate[0] + "/" + splDate[1]; div.innerHTML = change_date; } //]]> </script>日付のリンク部分(↓)を削除する
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'> </a>↓こうなる
<span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <b:if cond='data:post.url'> <meta expr:content='data:post.canonicalUrl' itemprop='url'/> <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'> <span expr:id='"post-timestamp-" + data:post.id'> <script type='text/javascript'> changeDateFormat('<data:post.id/>', '<data:post.timestamp/>'); </script> </span> </abbr> </b:if> </b:if> </span>↑の部分をまるごと↓に入れる
<div class='post-header-line-1'/>ついでにラベルも移動させると↓な感じ
<div class='post-header'> <div class='post-header-line-1'/> <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <b:if cond='data:post.url'> <meta expr:content='data:post.canonicalUrl' itemprop='url'/> <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'> <span expr:id='"post-timestamp-" + data:post.id'> <script type='text/javascript'> changeDateFormat('<data:post.id/>', '<data:post.timestamp/>'); </script> </span> </abbr> </b:if> </b:if> </span> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'> <data:label.name/> </a> <b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span> </div>日付を太字にしてラベルとの間隔をあける為にCSS追加
.post-timestamp{ margin-right: 5px; font-weight: bold; }
0 件のコメント:
コメントを投稿