INTEREST

最新記事に「New」等の新着マークを表示

 

2014.11.14

投稿から48時間以内の記事には「NEW!!」を表示 ほぼコピペで出来ちゃう♪表示期間も自由に設定可能

今回は「最新記事」の一覧内で投稿から○○時間以内の記事に “New” などの新着マークを表示する方法を試してみました。
※○○の部分は表示期間で、任意の時間を簡単に設定出来ます♪
そもそも「最新記事」に表示されてる時点で新しい記事って事は分かるのですが、私のように更新頻度が少ない場合などには効果的かなってｗ
また、ゆっくり点滅させたり表示条件を複数にしてみたり等のアレンジを加えてみたので、工夫次第で色々面白い表示も出来ると思います


最近の投稿記事に新着マークを表示


  1. 1.新着マークを表示する為の記述
  2. 2.表示期間の条件を増やす方法
  3. 3.最新コメントに表示する場合
  4. 4.CSSで新着マークを点滅させる方法
  5. 5.この記事へコメントを投稿する





1.新着マークを表示する為の記述


新着マークを表示する為の記述を、FC2ブログの公式プラグイン「最新記事」を使ってご説明♪
（FC2ブログ以外でも変数の部分を変更すれば表示する事が可能です）

今回参考にさせて頂いた記事はこちら → 「 新着マーク 」 - FCafe 様

▼まずは、FC2ブログの管理画面から「テンプレートの設定」をクリックし、HTMLの編集でhead要素内（<head> ～ </head>の間）に以下のJavaScriptのソースを記述します。


<script type="text/javascript"><!--
var today = new Date();
function WhatsNew(year,month,day,hour) {
var Time = 24;
var Post = new Date(year,month-1,day,hour);
if (today - Post < 3600000 * Time) {
document.write('<span class="new">New!!</span>')}
}
--></script>

※上記の設定の場合、投稿から24時間以内の記事に「New!!」を表示します。
※表示する文字を変更したい場合は、7行目の「New!!」の部分をお好みで変更して下さい♪

※表示する期間（時間）を変更したい場合は、4行目の「24」の数字を変更します。
例えば48時間（2日間）表示したい場合は「48」で、72時間（3日間）なら「72」とします。

※JavaScriptを外部ファイル化する場合は、2行目～8行目をコピペして保存して下さい。


▼そして、次にスタイルシート編集にも以下の1行を末尾などに追加し保存します。


.new { color:#F00; font-weight:bold; }

※上記は例として「New!!」を赤い太字で表示する場合の設定なので、お好みで編集して下さい。



最後に、実際に表示する為の記述をプラグインのHTMLに記述します。
「プラグインの設定」から「最新記事」のプラグインの “詳細” をクリックすると、プラグインの編集画面になるので、その中の【HTMLの編集】をクリックします。すると以下のようにHTMLが表示されます。
以下はデフォルトの表示なので、実際はお使いのテンプレートによって多少内容が異なると思います。

最新記事のプラグイン編集画面

▼上記のHTMLを元に「New!!」を記事タイトル末尾に表示する場合は以下のようにHTMLを編集します。
（以下ではHTMLタグの左側のスペースは省いて表示してます）


<ul>
<!--recent-->
<li &align>
<a href="<%recent_link>" title="<%recent_title>"><%recent_title> 
(<%recent_month>/<%recent_day>)</a>&nbsp;
<script type="text/javascript">
WhatsNew(<%recent_year>,<%recent_month>,<%recent_day>,<%recent_hour>)
</script>
</li>
<!--/recent-->
</ul>

※記事タイトルと「New!!」の表示がくっ付かないようにする為に、5行目末尾に「&nbsp;」(半角スペースの文字コード)を追加してます。（CSSでスペースを調節する場合は削除して下さい）


※上記は例として、デフォルトの最新記事プラグイン内に記述してますが「New!!」を表示する為に追加したのは、6行目～8行目の記述なので実際には自身のプラグイン内のHTMLを確認し表示したい位置に
<script type="text/javascript">
WhatsNew(<%recent_year>,<%recent_month>,<%recent_day>,<%recent_hour>)
</script>
の3行を追加すればOKです♪（余白などはお好みで調節してねｗ）



以上、ここまでの設定で「最新記事」内で投稿から24時間以内の記事には「New!!」と表示されます♪

要は ①HTMLのhead要素内への記述、②スタイルシートへの記述、③プラグインのHTMLへの記述、その3ステップでほぼ上記のソースをコピペで表示出来るので簡単に新着マークを付ける事が出来ます♪


1-1.JavaScriptの説明など


この後の項目で応用の仕方を説明するので、一応「JavaScript」の仕組みを解説♪
ただ、ちょっと説明が長くなってしまったので...
別に解説など要らぬっ!!って場合は、右のボタンで解説部分を折りたたんで下さいｗ
▼ クリック ▼

▼まずは上記でも記載しましたが、説明の為にもう一度JavaScriptのソースを以下に表示します。

<script type="text/javascript"><!--
var today = new Date();
function WhatsNew(year,month,day,hour) {
var Time = 24;
var Post = new Date(year,month-1,day,hour);
if (today - Post < 3600000 * Time) {
document.write('<span class="new">New!!</span>')}
}
--></script>

では、上の行から順に説明して行きますっ!!ｗ

※1行目は、ここからJavaScriptの記述ですよ～って部分ｗ
（HTML5では「 type="text/javascript" 」の部分を省略しても良いです）



※2行目では「today」と言う変数を宣言、today ＝ new Date(); ←現在の日時を表すコンストラクタ
var ○○ ←の部分が変数名なので分かり易く今日と言う意味の「today」となってます。
変数名の付け方・規則については こちら 　 をご覧下さい。



※3行目では、実行する関数を定義しています。
function ○○ ←の部分が関数名で、今回の場合「WhatsNew」と言う関数を定義しています。
関数名の付け方については、上記の変数名の付け方・規則と同じ感じです♪

また、関数名の後の「 ( 」 ～ 「 ) 」の間には引数を指定する事ができ、今回の場合何の値が代入されてるか分かり易いように「year,month,day,hour」としてます。（何年、何月、何日、何時）
この引数には、プラグインのHTMLに記述した以下の値がそれぞれ代入されます。

(<%recent_year>,<%recent_month>,<%recent_day>,<%recent_hour>)
<%recent_year>等は、FC2ブログの変数ですので詳しくは こちら 　 をご覧下さい。

そして、その関数により実行される処理を「 { 」 ～ 「 } 」の間に記述します。
今回の場合、開始の「 { 」は3行目の末尾で、終了の「 } 」は8行目となってます。



※4行目では、2行目と同じように変数の宣言をしており、Time ＝ 24 となってます。
要は “Time” は数字の24って事だよ～って感じです♪ｗ
（時間の計算で使用してるので分かり易く「 Time 」と言う変数名にしました。）



※5行目では「Post」と言う変数を宣言し、記事の投稿日時を表す為の変数となります。
new Dateの「 ( 」 ～ 「 ) 」の間に「year,month-1,day,hour」と言う引数を指定しており、ここには3行目の引数の値が代入され記事の投稿日時のデータとなります。

またJavaScriptでは月を0～11で表すので2つ目の引数は「month-1」となってます。
例えば、<%recent_month>は記事の投稿月を表示するので11月の場合「11」と言う値になりますがこのままの値では、JavaScriptでは12月と計算してしまうので「-1」をして「10」の値としてます。



※6行目では、上記で指定した変数などを用いたif文による条件式となります。
また、JavaScriptでは日時の計算をミリ秒単位で行います。（1秒は1000ミリ秒）
ですので式の途中にある「 3600000 」と言う数字は、1時間を表している事になります。
1000（1秒は1000ミリ秒） × 60（1分は60秒） × 60（１時間は60分） ＝ 3600000

と言う事で、計算式はこんな感じになります。
(today（現在の日時） - Post（記事の投稿日時） < 3600000（1時間） * Time（24）)

例えば、現在の日時が「2014年11月14日18時」で、記事の投稿日時が「2014年11月13日20時」とすると22時間経過してる事になるので差は 22 × 3600000 ＝ 79200000 となり、3600000 × 24 ＝ 86400000 の方が数字が大きいと言う事になるので、if文による条件式は “true” を返します。



※7行目では、6行目のif文による条件式が “true” の場合の処理が行われます。
document.write()は「 ( 」 ～ 「 ) 」の間の内容を書き出します。
また、文字列を書き出す場合は「 "（ダブルクォーテーション）」で囲むのですが、書き出す文字列に 「 "（ダブルクォーテーション）」が含まれてる場合は「 '（シングルクォーテーション）」で囲みます

今回の場合だと「<span class="new">New!!</span>」が書き出され、書き出す文字列に「 "（ダブルクォーテーション）」が含まれてるので「 '（シングルクォーテーション）」で囲まれてます。

6行目のif文による条件式が “false” の場合は何も書き出されないので「New!!」が表示されない仕組みになってます。

また画像を書き出す事も可能なので、その場合は「<span class="new">New!!</span>」の部分を「<img src="画像のURL">」とすればOKです♪


※8行目の「 } 」で、3行目の関数「WhatsNew」の処理が終了します。


※9行目は、JavaScriptの記述はここまでですよ～って事です♪ｗ


以上で、今回のJavaScriptの説明は終わりです♪
どう表現すれば良いか悩んだけど、仕組みは大体伝わったんじゃないかな？と...ｗ
また、こうやって書き出す事で自分自身の復習も兼ねてるんですが... それにしても説明が長いよ...ｗｗ




2.表示期間の条件を増やす方法


シンプルに記事の投稿から24時間以内や、48時間以内など新着マークを表示する条件が１つだけなら上記の記述でOKなのですが、ちょっと遊び心を持たせたい場合は条件を複数にしてみても面白いと思います♪

例えば... 投稿から24時間以内の記事には「新作!!」と表示して、それ以降で48時間以内に投稿された記事には「準新作!!」と表示したりも出来ます♪（レンタルショップかいっ!! って感じでｗ）

もちろん、これはあくまでもネタと言うか１つの案なので、工夫次第で面白いオリジナルの表現が色々出来ると思います♪

▼その方法は上記のhead要素内に記述する「JavaScript」を以下のようにアレンジすればOKです。
例として24時間以内は「新作!!」を表示、48時間以内は「準新作!!」と表示する場合の記述です。


<script type="text/javascript"><!--
var today=new Date();
function WhatsNew(year,month,day,hour) {
var Time = 24;
var Post = new Date(year,month-1,day,hour);
if (today - Post < 3600000 * Time) {
document.write('<span class="new1">新作!!</span>')}
else if (today - Post < 3600000 * Time * 2) {
document.write('<span class="new2">準新作!!</span>')}
}
--></script>

※複数条件で新着マークを表示する為に8行目と9行目を新たに追加してます。
※表示する文字を変更する場合は「新作!!」と「準新作!!」の部分を変更して下さい。

※表示する新着マークをそれぞれ違う色等に設定出来るよう「class="new1"」と「class="new2"」としてますので、それぞれスタイルシート（CSS）で設定して下さい。

※表示期間を変更する場合は4行目の「24」の数字と、8行目の「2」の数字を変更して調整して下さい。

※さらに条件を増やしたい場合は、8行目と9行目をコピペして足して行けばOKです♪



▼スタイルシート編集には以下のように記述します。（末尾等に追加でOK）


.new1 { color:#F00; font-weight:bold; }
.new2 { color:#0F0; font-weight:bold; }

※上記は例として「新作!!」の部分は赤い太字で表示、「準新作!!」の部分は緑の太字で表示する場合の記述なので、お好みで編集して下さい♪


また、表示する条件を増やしただけなのでプラグイン内のHTMLは編集しなくてOKです♪
（表示箇所を変更したい場合は、それに合わせて編集して下さい）



3.最新コメントに表示する場合


上記では「最新記事」に新着マークを表示する方法を説明しましたが「最新コメント」のプラグイン内に以下の記述を追加すれば「最新コメント」の一覧で新着マークの表示が可能です。

<script type="text/javascript">
WhatsNew(<%rcomment_year>,<%rcomment_month>,<%rcomment_day>,<%rcomment_hour>)
</script>

※追加する場所はプラグインのHTML次第なのですが、上記の「最新記事」のプラグイン内への記述と同じ要領で表示したい場所に追加すればOKです。

※また、変数の部分を変更して「最新トラックバック」のプラグイン内に記述すれば「最新トラックバック」の一覧で新着マークを表示する事も可能です。変数について詳しくは こちら 　 をご覧下さい♪




4.CSSで新着マークを点滅させる方法


新着マークをただ表示するだけでは味気ないっ!! って事でゆっくり点滅するようにもしてみましたｗ
あんまりチカチカすると、それはそれで目障りと言うか変に気になってしまうので点滅の間隔を好みで変更出来るようにしてます♪

▼こんな感じで点滅します♪

ゆっくり点滅してるでしょ？ｄ(≧∀≦)ｂ


▼上記のように点滅させるには、スタイルシート編集に以下の記述を追加します。

.blinking{
-webkit-animation:blink 2s ease-in-out infinite alternate;
-moz-animation:blink 2s ease-in-out infinite alternate;
-ms-animation:blink 2s ease-in-out infinite alternate;
-o-animation:blink 2s ease-in-out infinite alternate;
animation:blink 2s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}

※各ブラウザに対応させる為にベンダープレフィックスを付けてるので、点滅の間隔を変更する際は2行目～6行目の「2s」の部分を変更して下さい。点滅を早くする場合は「1s」など数字を減らし、逆に点滅をゆっくりにする場合は「3s」など数字を増やせばOKです。


※今回の新着マーク以外の箇所でも使う事があるかも？と思って一応別のクラス名を付けてます♪



そして、head要素内に記述した「JavaScript」の以下の部分にクラス名の「blinking」を追加します。
追加前：「document.write('<span class="new">New!!</span>')}」
追加後：「document.write('<span class="new blinking">New!!</span>')}」

以上で、今回の「新着マークを表示する方法」の説明終了です♪

最後の方は若干説明が雑になった気もしないでもないけど...ｗ
多分これで大丈夫なはずっ!!ｄ(≧∀≦)ｂ　
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 ＩＴ技術ブログ Webサイト構築へ
B!

関連記事
2014-11-14 | JavaScript | コメント(9) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/51-cb963edf

「最新記事に「New」等の新着マークを表示」へのトラックバック

- TrackBack -


「最新記事に「New」等の新着マークを表示」へのコメント

- Comment -

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  • 2014-11-15 00:27
  • -さん@管理人
  • 編集

新しい記事に・・・

Ｎｅｗが付くの良いなぁ～♪

って、付けたいです（笑）

でも、なかなかその方法が分からなかったのと、
（調べなかったんですけど（笑））

記事内で、そういうようにしたかったので、

毎回自分で更新日時とかを修正してます（笑）


毎回色々凄いですね！

参考になります♪
  • 2014-11-15 07:52
  • らいふさん@管理人
  • 編集

Re: 新しい記事に・・・

> らいふさん

いつもありがとうございます♪

Newが付くの中々イイ感じですよね♪
自分でも実際やってみると、思ってより良い感じに出来たので満足してますｗ

また、手動で毎回更新するとなると結構大変だと思うので
自動で新着マークを表示してくれると楽で良いですよね♪ｄ(≧∀≦)ｂ

是非お試し下さいませ♪d(⌒ー⌒)
  • 2014-11-15 08:47
  • あると♪さん@管理人
  • 編集

No title

これいいですね（≧∇≦）ちょっとしたマークでクリック率変わりますもんね。
さっそく取り入れますのでできたらまた見に来てやってください(^^)
リンクちょっとやり過ぎました 笑
  • 2014-11-15 14:23
  • ひーさんさん@管理人
  • 編集

こんにちは

私も早速「New!!」（点滅ヴァージョン）付けてみましたヽ(^o^)丿

いつもすばらしい記事でとても役に立ってます。
ありがとうございますm(__)m

「Google Analytics」ですがプロ仕様ともいえる内容なので私のような素人が使いこなせるものではないかもしれません(^_^;)

ひとまずその一部だけでも読めれば良いかな、と(^.^)

たくさんの方が使い方もレビューされますので参考にしてまた記事にしますね。

では応援ポチ。
  • 2014-11-15 16:09
  • じゅんぴーAさん@管理人
  • 編集

Re: No title

> ひーさんさん

確かにちょっとしたマークを付ける事によって
クリックしてくれるかも知れませんよね♪ｄ(≧∀≦)ｂ

ひーさんさんのブログではどんな表示になるか楽しみにしてますね^^
  • 2014-11-15 22:39
  • あると♪さん@管理人
  • 編集

Re: こんにちは

> じゅんぴーAさん

早いｗｗ(≧∇≦)b
もう表示されてましたね♪ｗ

分かり易くてイイ感じですｄ(≧∀≦)ｂ

「Google Analytics」の事、色々参考にさせて頂こうと思うので
記事を楽しみにしてますね(≧∇≦)ｂ
  • 2014-11-15 22:41
  • あると♪さん@管理人
  • 編集

New

あると♪さん

是非付けたいと思います。
色々実践的な情報ありがとうございます。
あると♪の記事を新しい順から講読中です。
  • 2014-11-26 00:50
  • girigiri26さん@管理人
  • 編集

Re: New

> girigiri26さん

ありがとうございます♪(≧∇≦)b

ただ...古い記事は何か恥ずかしいですｗｗ
今後ゆっくり修正していきますｗｗ
  • 2014-11-26 10:32
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます 　
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author：あると♪
ブログ開始： 日目
公開記事数： 件

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

【 当ブログのご案内は こちら♪ 】

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ