最新記事のNew!や○○分前などの文字や装飾をカスタムする方法

最新記事に表示されるNew!や○○分前/○○時間前/○○日前をデフォルトからカスタムする方法です。当サイト作者が作成したcustomtemplate と customtemplate-3c (ver1.5.0)についてです。

デフォルトでの機能説明

  1. グローバルナビゲーションなどの最新記事一覧に、7日以内に公開された記事があればnew!と表示する機能を追加しました。公開後の経過時間によって、どの程度前に公開されたかも表示されます。1時間以上は四捨五入による概算です。

    • ○○分前 - 0分以上60分未満
      (公開時間から59分59秒まで)
    • ○○時間前 - 1時間以上24時間未満
      (60分から23時間59分59秒まで)
    • ○○日前 - 1日以上7日未満
      (24時間から6日目23時間59分59秒まで)

    次の部分に表示されます。

    • グローバルナビゲーションの最新記事
    • グローバルナビゲーションの最新コメント
    • カテゴリページの記事タイトル
    • 記事ページの記事タイトル直下(下図参照)
    • サイトマップの記事タイトル
    • 検索結果ページの記事タイトル
    • コメント投稿日時
    • トラックバック投稿日時
    130301v150modified-1.png

カスタムできること

  1. 「New!」や「○○日前」などを別の文字に変更できます。

  2. 「○○日前」が表示される期間をデフォルトの7日間から任意の期間に変更できます。

  3. CSSで装飾を変更できます。

  4. ○○日前などを非表示にするだけなら、bodyにクラス付与だけで可能です。

テンプレートのHTMLを編集

追加するコード

  1. 定義追加用スペース1を探します。下図で反転している部分です。

    //▼▼ 定義追加用スペース1 開始 ▼▼
    //JavaScriptでカスタムの際にご自由にお使いいただけます。
    
    //▲▲ 定義追加用スペース1 終了 ▲▲
    130302newe-1.png
  2. 次のコードを追加します。下図で反転している部分が追加後です。

    <!--
    var newe_str={
    m:'<span class="m-ago blink">New!!</span> ',
    ma:'<span class="m-ago2"> 分前</span>',
    h:'<span class="h-ago">New!!</span> ',
    ha:'<span class="h-ago2"> 時間前</span>',
    d:'<span class="d-ago">New!</span> ',
    da:'<span class="d-ago2"> 日前</span>',
    l:24*7
    }
    //-->
    130302newe-2.png
  3. 上記コードを追加しただけだと、デフォルト状態と変わりません。次の項目で、カスタムする方法を具体的に述べます。

具体例

  1. 公開後60分以内で表示されるNew!!を点滅しないようにするには、 m: の行の blink を削除します。また、New!!を大文字や別の文字に変更できます。

    m:'<span class="m-ago">NEW!!\(^o^)/</span> ',
  2. 「分前」を、たとえば英語にカスタムするには、 ma: の行を次のようにカスタムします。

    ma:'<span class="m-ago2"> minutes ago</span>',
  3. h: の行から da: の行まで同じ要領でカスタムできます。

  4. 「○○日前」が表示される期間をデフォルトの7日間からカスタムするには、 l: の行の 7 を変更します。3日間に変更するなら、次のとおりです。

    l:24*3

テンプレートのCSSを編集

  1. 次のコードを探します。下図で反転している部分です。

    /*記事 > 現在日時を基準に○○時間前など表示する部分*/
    .m-ago,.h-ago,.d-ago{color:red;text-shadow:1px 0 0 #ff0,-1px 0 0 #ff0,0 1px 0 #ff0,0 -1px 0 #ff0,1px 1px 0 #ff0,1px -1px 0 #ff0,-1px 1px 0 #ff0,-1px -1px 0 #ff0;}
    .m-ago,.h-ago{font-weight:700;}
    .how-long-ago{color:#888;}
    .m-ago2,.h-ago2,.d-ago2{color:#888;font-size:70%;}
    .no-some-time-ago .some-time-ago{display:none;}
    130302newe-3.png
  2. New!や○○分前/○○時間前/○○日前ごとにクラス分けしています。デフォルト設定の文字で説明しています。

    • .m-ago - 公開後60分以内に表示されるNew!!
    • .h-ago - 公開後24時間以内に表示されるNew!!
    • .d-ago - 公開後7日以内に表示されるNew!
    • .how-long-ago - ○○時間前などの○○(数字)部分
    • .m-ago2 - 「分前」の部分
    • .h-ago2 - 「時間前」の部分
    • .d-ago2 - 「日前」の部分
  3. 上記説明を参考に任意に変更できます。

補足:クラス名などの由来や意味

  1. m はminutes(分間)、h はhours(時間)、d はdays(日間)です。

  2. ma はminutes ago(分前)、ha はhours ago(時間前)、da はdays ago(日前)です。

  3. l はlimit(限度)です。

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

  1. 相違があるかもしれません。ご了承願います。

以上です。

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