公式プラグイン「最新記事」にNew!や○○時間前を表示するカスタム

更新
2013年03月04日(月)

公式プラグイン「最新記事」にNew!や○○時間前を表示し、現在表示しているページが最新記事一覧にある場合に背景色をハイライトするカスタム方法です。コピペでOKです。当サイト作者が作成したcustomtemplate と customtemplate-3c (ver1.5.0)についてです。

カスタム前後の比較

  1. コピペでOKです。

  2. 仕上がりはこんな感じです。

    130303plugin-recent-5.png

メリット

  1. デフォルトの最新記事一覧よりも新しい記事が目立ちます。

  2. どの程度前に公開された記事かが一目瞭然です。

  3. 現在表示しているページが最新記事一覧にあれば背景色がハイライトされ、読者のユーザビリティ向上を期待できます。

プラグインのHTMLを表示

  1. 管理画面でプラグインの設定をクリックします。

    130303plugin-recent-1.png
  2. 切り替わった画面にある【HTMLの編集】をクリックします。

    130303plugin-recent-2.png
  3. テキストボックスが展開され、次のコードが表示されます。

    <ul>
      <!--recent-->
        <li &align>
          <a href="<%recent_link>" title="<%recent_title>"><%recent_title> (<%recent_month>/<%recent_day>)</a>
        </li>
      <!--/recent-->
    </ul>
    130303plugin-recent-3.png
  4. 上記コードを好みに合わせて下記コードのどれかに変更します。

変更用コードやキャプチャ画像

すべて表示タイプ(改行なし)

  1. 最新記事タイトル・公開日時・New!・どの程度前かを続けて表示するタイプです。

    130303plugin-recent-5.png
  2. 次のコードに変更します。下図で反転している部分が変更後です。

    <ul class="tell-this-page">
    <!--recent-->
    <li &align>
    <a href="<%recent_link>" title="<%recent_title>"><%recent_title></a> <span class="entry-date"><%recent_year>年<%recent_month>月<%recent_day>日(<%recent_wayoubi>) <span class="entry-time"><%recent_hour>:<%recent_minute></span></span><span class="some-time-ago"> <script type="text/javascript">newe(<%recent_year>,<%recent_month>,<%recent_day>,<%recent_hour>,<%recent_minute>);</script></span>
    </li>
    <!--/recent-->
    <!--カスタム参考ページ:http://customtemplate.blog112.fc2.com/blog-entry-96.html-->
    </ul>
    130303plugin-recent-4.png
  3.  設定 をクリックで完了です。

すべて表示タイプ(改行あり)

  1. 最新記事タイトルで改行し、公開日時・New!・どの程度前かを表示するタイプです。

    130304plugin-recent-1.png
  2. 次のコードに変更します。

    <ul class="tell-this-page">
    <!--recent-->
    <li &align>
    <a href="<%recent_link>" title="<%recent_title>"><%recent_title></a><br /><span class="entry-date"><%recent_year>年<%recent_month>月<%recent_day>日(<%recent_wayoubi>) <span class="entry-time"><%recent_hour>:<%recent_minute></span></span><span class="some-time-ago"> <script type="text/javascript">newe(<%recent_year>,<%recent_month>,<%recent_day>,<%recent_hour>,<%recent_minute>);</script></span>
    </li>
    <!--/recent-->
    <!--カスタム参考ページ:http://customtemplate.blog112.fc2.com/blog-entry-96.html-->
    </ul>
  3.  設定 をクリックで完了です。

曜日/時間省略タイプ(改行なし)

  1. 最新記事タイトル・公開日・New!・どの程度前かを続けて表示するタイプです。

    130304plugin-recent-2.png
  2. 次のコードに変更します。

    <ul class="tell-this-page">
    <!--recent-->
    <li &align>
    <a href="<%recent_link>" title="<%recent_title>"><%recent_title></a> <span class="entry-date"><%recent_year>年<%recent_month>月<%recent_day>日</span><span class="some-time-ago"> <script type="text/javascript">newe(<%recent_year>,<%recent_month>,<%recent_day>,<%recent_hour>,<%recent_minute>);</script></span>
    </li>
    <!--/recent-->
    <!--カスタム参考ページ:http://customtemplate.blog112.fc2.com/blog-entry-96.html-->
    </ul>
  3.  設定 をクリックで完了です。

曜日/時間省略タイプ(改行あり)

  1. 最新記事タイトルで改行し、公開日・New!・どの程度前かを表示するタイプです。

    130304plugin-recent-3.png
  2. 次のコードに変更します。

    <ul class="tell-this-page">
    <!--recent-->
    <li &align>
    <a href="<%recent_link>" title="<%recent_title>"><%recent_title></a><br /><span class="entry-date"><%recent_year>年<%recent_month>月<%recent_day>日</span><span class="some-time-ago"> <script type="text/javascript">newe(<%recent_year>,<%recent_month>,<%recent_day>,<%recent_hour>,<%recent_minute>);</script></span>
    </li>
    <!--/recent-->
    <!--カスタム参考ページ:http://customtemplate.blog112.fc2.com/blog-entry-96.html-->
    </ul>
  3.  設定 をクリックで完了です。

日時省略タイプ

  1. 最新記事タイトル・New!・どの程度前かを続けて表示するタイプです。

    130304plugin-recent-4.png
  2. 次のコードに変更します。

    <ul class="tell-this-page">
    <!--recent-->
    <li &align>
    <a href="<%recent_link>" title="<%recent_title>"><%recent_title></a><span class="some-time-ago"> <script type="text/javascript">newe(<%recent_year>,<%recent_month>,<%recent_day>,<%recent_hour>,<%recent_minute>);</script></span>
    </li>
    <!--/recent-->
    <!--カスタム参考ページ:http://customtemplate.blog112.fc2.com/blog-entry-96.html-->
    </ul>
  3.  設定 をクリックで完了です。

備考

  1. 最新記事のNew!や○○分前などの文字や装飾をカスタムする方法もあります。

  2. 最新記事の○○時間前などを非表示 → bodyにno-some-time-agoを付加するだけです。

  3. 曜日部分が不要の場合、それぞれのコードから次の部分を削除します。

    (<%recent_wayoubi>)
  4. bodyにクラスgrayを付加していない場合は以上です。

bodyにクラスgrayを付加している場合

  1. クラスgrayを付加していると見にくいのが判明しました。上記設定後、HTML編集で下記コピペすると文字が読みやすくなります。

  2. 上記コードはプラグインのHTML用でしたが、下記コードはテンプレートのHTMLにコピペします。

    130303plugin-recent-6.png
  3. HTML編集で次のコードを探します。下図で反転している部分です。

    <!--permanent_area-->#single.gray #tbox .tell-this-page a[href="<%url>blog-entry-<%pno>.html"],#single.gray #tbox .tell-this-page a[href="blog-entry-<%pno>.html"],<!--/permanent_area-->
    <!--category_area-->#category.gray .plugins .tell-this-page a[href="<%url>blog-category-<%cno>.html"],#category.gray .plugins .tell-this-page a[href="blog-category-<%cno>.html"]<!--/category_area-->
    <!--tag_area-->#tag.gray .entry .tell-this-page .tag-<%tag_word>,#tag.gray .plugins .tell-this-page .tag-<%tag_word><!--/tag_area-->
    <!--not_index_area--><!--not_date_area--><!--not_search_area--><!--not_titlelist_area-->{background:#ddd;border-radius:5px;}<!--/not_titlelist_area--><!--/not_search_area--><!--/not_date_area--><!--/not_index_area-->
    130303plugin-recent-9.png
  4. 次のコードに変更します。下図で反転している部分が変更後です。

    <!--permanent_area-->#single.gray #tbox .tell-this-page a[href="<%url>blog-entry-<%pno>.html"],#single.gray #tbox .tell-this-page a[href="blog-entry-<%pno>.html"],#single.gray .plugins .tell-this-page a[href="<%url>blog-entry-<%pno>.html"],#single.gray .plugins .tell-this-page a[href="blog-entry-<%pno>.html"]<!--/permanent_area-->
    <!--category_area-->#category.gray .plugins .tell-this-page a[href="<%url>blog-category-<%cno>.html"],#category.gray .plugins .tell-this-page a[href="blog-category-<%cno>.html"]<!--/category_area-->
    <!--tag_area-->#tag.gray .entry .tell-this-page .tag-<%tag_word>,#tag.gray .plugins .tell-this-page .tag-<%tag_word><!--/tag_area-->
    <!--not_index_area--><!--not_date_area--><!--not_search_area--><!--not_titlelist_area-->{background:#ddd;border-radius:5px;}<!--/not_titlelist_area--><!--/not_search_area--><!--/not_date_area--><!--/not_index_area-->
    
    130303plugin-recent-10.png
  5.  更新 をクリックで完了です。

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

  1. 上記説明やキャプチャー画像と相違があるかもしれません。

  2. また、fc2さんの仕様変更で公式プラグインのHTMLなどに相違があるかもしれません。

  3. ご了承願います。

以上です。

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