jQueryで記事公開日の横に更新日を移動させるHTML記述方法

更新
2012年12月05日(水)

fc2blogで更新日を手動で記述し、見た目が自然になるように公開日の右に表示する方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. 記事に更新日を記述する際のHTMLの書き方の記述方法です。

  2. 本文の編集の最初に所定の書き方で書けば、jQueryが公開日の横に更新日を移動させます。

メリット

  1. 記事を後日編集した場合に更新日を冒頭に追加すれば、読者にそれを明確に伝えられます。

  2. 既存の記事でも情報が更新されていると認識してもらえ、その記事が読まれる可能性が高くなるかもしれません。

  3. 所定の場所に所定の書き方で統一すれば、読者に親切です。

  4. 本文の編集の最初であれば、検索結果ページやサイトマップページの記事タイトルのホバー時に、更新日が最初に表示されます。ほとんど気付かれないでしょうが、気付いた方の利便性を少し上げられます。

    121204modified-date-1.png
  5. さらに気付かれにくいと思いますが、タブボックスのメタ情報にも更新日が表示されます。

「本文の編集」の最初に記述

  1. 次の書式で更新日を記述します。下図で反転している部分が具体例です。

    <dl class="modified-date"><dt>更新</dt><dd>yyyymmdd日(day)</dd></dl>
    121204modified-date-2.png
  2. 更新日用コードを別の要素の子要素にすると処理が正しく行われません。更新日用コードの後に本文を記述するのがいいです。

  3. 次のコードは処理が正しく行われない例です。更新日用のコードが <div> の子要素になっています。

    <div><dl class="modified-date"><dt>だめな例</dt><dd>yyyymmdd日(day)</dd></dl></div>

デモページ

  1. このページ冒頭で更新日の表示を確認できます。

今後のテンプレート改訂時には

  1. なんらかの変更などがあるかもしれませんが、ご了承願います。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)