*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

Top Page › Template › カスタマイズ › 新着記事にNewマークを表示
2019-11-06 (Wed)

新着記事にNewマークを表示

昔から有るカスタマイズなので今更感は有りますが、JavaScriptでよく使われている『document.write』を使わないでNewマークを表示する方法です。

JavaScript(以下JS)の『document.write』はHTMLに何かを書き出す時に使う記述なのですが、ブラウザのレンダリングに悪影響を与えるそうで、HTML5では非推奨になっています。
しかも仕様書では非常に厳しい「strong discouraged(強く非推奨)」、使えなくなった訳では無いですが出来ればこれを使わずに【Newマーク】を出したい…と、色々探してみたのですがなかなか見つけられず。(;^_^A
JSと<span>とdisplayの値で操作する方法も有りますが、それだとHTML内に残るspan要素をクローラーが読んでしまうので今一つ…。出来れば新旧クロスブラウザ(IEも)で表示させたい…。


11/09 『FC2ブログNEWマークのdocument.write書き換えコード』を
The other way round の AkiraさんがJS版の掲載をしていらっしゃいます。m(__)m

FC2ブログNEWマークのdocument.write書き換えコード

「ひとつの方法」です。やり方はそれこそ無数にありますので、現段階でこの方法が良いかもしれないなぁ、というものを提案してみようと思います。...

何より表示する位置を選ばない、プラグインの新着記事の最終更新日や新着コメントにも使える、画像も表示できる、等…こちらの方が色々使い勝手が良いのでお勧め致します。
また、当方テンプレートでの追加位置を、記事最下段にある追記( ReadMore )に掲載しておりますので、是非ご利用下さいませ。


以下は当方がjQuery版のscript記事を11/06に掲載したものです。こちらもご参考にどうぞ。m(__)m
* - - - - - - - - - - *
…で、見付けたのがtime要素。日付のセマンティック・マークアップは<time datetime="">年月日</time>とする方が良いとの事。
↓こんな感じに表示させるカスタマイズです。
Newマーク


先ず、テンプレートのHTML編集枠内、記事日付表示部を探します。
(検索は[Ctrl+Fキー]で<%topentry_year> と入力。枠内に1ヶ所有り)

<%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)
この部分を下記のように変更

<time datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)</time>

オレンジ色の部分が追記した部分です。
次に、下記のJS(jQuery)をHTML編集枠内一番下段 </body> の真上に追加

<script>
$(function(){$("time").each(function(){var c=new Date();var b=c.getTime()-(
2*24*60*60*1000);var a=new Date($(this).attr("datetime"));var d=a.getTime();if(b<d){$(this).before('<span style="color:red;font-size:0.9em;margin-right:5px;">New</span>')}})});
</script>

</body> (←↑こんな感じに</body>の上に追記)

青文字の22日間Newマークを表示します。変更する場合は(必ず半角英数で)青文字部分を必要日数にして下さい。

Newマーク3
また、文字では無く画像を表示したい場合は <span style="color:red;font-size:0.9em;margin-right:5px;">New</span> の部分を <span><img src="画像のURL" alt="New!" style="margin:0 5px -2px 0;"></span> のように <span></span> で画像タグを挟んで下さい。
style="margin:0 5px -2px 0;" の部分は画像の場合の表示位置です。4つの数値は(左から)上・右・下・左 になっているので、余白を広げたい場合は正の値・狭めたい場合は負の値で調整して下さい。

Newマーク2
Newマークや画像を日付の後ろに表示したい場合は、上記JS(jQuery)の青文字beforeの部分をafterに変更し、表示位置を下記のように調整して下さい。
・文字の場合↓
style="color:red;font-size:0.9em;margin-left:5px;" 文字の左側余白
・画像の場合↓
style="margin:0 0 -2px 5px;" 画像の左側余白(4番目の数値)
文字は左右の余白のみ(大きさはfont-size:の数値増減)、画像は周囲の余白で調整出来ます。

後は更新ボタンを押して頂ければ完了です。(不具合が有った場合に備えて、複製を作っておくと安心です。)



----- 因みに上記のJSは、下記を圧縮したものです。

更新日時が2日以内であればNewマークを表示する(jQuery)
(2 * 24 * 60 * 60 * 1000) の一番初めの数値が表示する日数

$(function () {
$('time').each(function(){
// 現在日時
var current = new Date();
// 2日前のミリ秒
var range_ms = current.getTime() - (2 * 24 * 60 * 60 * 1000);

// 更新日時
var modified = new Date($(this).attr('datetime'));
// 更新日時のミリ秒
var modified_ms = modified.getTime();

if (range_ms < modified_ms){
$(this).after('<span style="color:red;font-size:0.9em;margin-right:5px;">New</span>');
}
});
});



このJS(jQuery)の出典は下記サイトです。
http://php.o0o0.jp/article/jquery-new [ 私的雑録 ] 様
(上記サイトに書いてある[非jQuery版]はIEで表示出来ませんでしたが、[jQuery版]はWin10にて、
IE10(開発者ツール),IE11,Edge,GoogleChrome,Opera27.0,Firefox40.0で表示を確認、現行OperaやFirefoxでも確認しました。)
当方のテンプレートでは初めからGoogleのCDNから jQuery3.3.1 を読み込んでいるので直ぐに使用できますが、もしテンプレート内に記述が無い場合は、下記のscriptタグをNewマーク表示用のJSより上に追記して下さい。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
バージョン3.3.1で確認済み。それ以外のものは未確認です。
(ただ、MDNでは time要素 datetime属性のどちらもIEは互換性無しになってるのに、何で使えるのか不思議…^^;)

当方不勉強なので、間違っている・こうした方が良い等のお気付きが有る方は是非!ご連絡下さいませ。m(__)m


『The other way round』様で作成された、jQueryを利用しないNewマークを表示するJSを使用する場合は、下記のReadMoreをクリックして表示して下さい。


共有化されているテンプレート全て、同じ位置の記載で表示出来ます。

■ 『New』の文字で表示する場合
JavaScript(HTML編集枠)下段に有る
<script>objectFitImages();</script> の下に追加
<script>
for(var s=2,c=new Date,n=document.querySelectorAll("[data-newdate]"),i=0;i<n.length;i++){var d=new Date(n[i].dataset.newdate);d.setDate(d.getDate()+s),c<d&&(n[i].classList.add("new"),n[i].innerHTML="New")}
</script>


■ 『画像』を表示する場合
JavaScript(HTML編集枠)下段に有る
<script>objectFitImages();</script> の下に追加
<script>
for(var s=2,c=new Date,n=document.querySelectorAll("[data-newdate]"),i=0;i<n.length;i++){var d=new Date(n[i].dataset.newdate);d.setDate(d.getDate()+s),c<d&&(n[i].classList.add("new"),n[i].innerHTML="<img src='画像URL' alt='New'>")}
</script>

文字の場合も画像の場合も、s=2 という部分が表示する日数です。(2は2日)

■ 表示するための(文字・画像)共通コード
<span data-newdate="<%topentry_year>-<%topentry_month>-<%topentry_day>"></span>
このコードを、下記の表示位置に挿入して下さい。

記事タイトルの前に表示する場合
記事タイトル前
(検索は[Ctrl+Fキー]で <a href="<%topentry_link>"> と入力。枠内に1ヶ所有り)
<a href="<%topentry_link>"> の前に上記コードを記述

記事タイトルの後に表示する場合
記事タイトル後
(検索は[Ctrl+Fキー]で <%topentry_title></a> と入力。枠内に1ヶ所有り)
<%topentry_title></a> の後に上記コードを記述

日付の前に表示する場合
日付の前
(検索は[Ctrl+Fキー]で <%topentry_year> と入力。枠内に1ヶ所有り)
<%topentry_year> の前に上記コードを記述

日付の後に表示する場合
日付の後
(検索は[Ctrl+Fキー]で (<%topentry_youbi>) と入力。枠内に1ヶ所有り)
(<%topentry_youbi>) の後に上記コードを記述


■ スタイルシート編集枠内最下段に追加
Newマークを記事タイトル、または日付の前に表示する場合
/* Newマーク、日付・タイトル前 */
.new{
margin-right:5px;
font-size:0.9em; /* 文字サイズ */
font-weight:normal;
color:red; /* 文字の色 */
}


Newマークを記事タイトル、または日付の後に表示する場合
/* Newマーク、日付・タイトル後 */
.new{
margin-left:5px;
font-size:0.9em; /* 文字サイズ */
font-weight:normal;
color:red; /* 文字の色 */
}


画像を記事タイトル、または日付の前に表示する場合
/* 画像、日付・タイトル前 */
.new img{
margin:0 5px -2px 0; /* 左の数値から、上右下左の余白 */
}


画像を記事タイトル、または日付の後に表示する場合
/* 画像、日付・タイトル後 */
.new img{
margin:0 0 -2px 5px; /* 左の数値から、上右下左の余白 */
}


確認ブラウザ -- Win10にて、
IE11,Edge,GoogleChrome,Opera27.0,Firefox40.0で表示を確認、現行OperaやFirefoxでも確認済み。)


関連記事

Comment







管理者にだけ表示を許可

aki Re: やぴこ 様へ

いつも楽しい記事とコメントのやり取り、拝見しております。(^-^)
カスタマイズも楽しめているようで何よりです。
元のテンプレがどんなのだったか、分からないくらいの改変を見るのも楽しいので、是非ドンドン試してみて下さいね。

p.s. 納車の後、帰路で高速道路を走りまして、すごい量の虫衝突&鳥の糞攻撃に遭遇。(^^;
早速「運が付いたね。。(;'∀')」と旦那さんと苦笑いしました。
今迄の車は15年、多分今度も10年位は乗るでしょう。
(私、物持ちいいので。( ー`дー´)キリッ)
2019-11-12-21:47 * aki [ 返信 * 編集 ]

こんにちは

akiさん、こんにちは。
いつもお忙しい中、丁寧に対応してくださりありがとうございます(^-^)

New✨やフォントのこと等詳しく書いてくださったのに、トップ画像にチョコ(自宅にいるハムスターです)を入れたくなりハマってしまいました…

たぬこさんにあれやこれや教えて頂き、ハンバーガー🍔やポテト🍟等食しながらなんとか落ち着きました🙆

納車の為の帰省だったのですね。
うちの車はまだきてません…
待ち遠しい分楽しみです♪

とりとめもないコメント、お礼も込めて…お邪魔いたしました。

2019-11-12-16:31 * やぴこ [ 返信 * 編集 ]

aki Re: t 様へ

コメント頂き有難うございます。
でもまぁ、ブログのカスタマイズは、色々試して・楽しみながらやるのが一番ですから。(^^)
お気に召すまで、沢山弄ってみて下さい。
カスタマイズ失敗した時のために、複製を作るのをお忘れなく。(^-^)

では、暫し帰省して参ります。。
2019-11-09-01:14 * aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-11-08-22:07 * - [ 返信 * 編集 ]

aki Re: y 様へ

後程そちらへ伺いますね。(^-^)
2019-11-08-20:26 * aki [ 返信 * 編集 ]

aki Re: 徳川たぬこ 様へ

セマンティックは「意味を持たせる」という意味で、マークアップは「印をつける」という意味です。
HTMLタグ自体に意味を持たせて、内容を分かりやすく検索エンジンに伝える記述の事を「セマンティックなマークアップを書く」と言います。
そうする事によって、SEOが上がったり、ユーザーのページ操作を補助する標示になったりするそうです。
『なんちゃってHTML5』な当方のテンプレートでは、正しいセマンティック・マークアップが出来ているとは言えませんが、これが正しいよと示せるよう勉強しなきゃいけないですね。^^;

それと、HTML内にちょっと気になる所が有ったので、後程そちらに伺います。m(__)m
2019-11-08-20:23 * aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-11-08-09:15 * - [ 返信 * 編集 ]

毎度おさわがせします

ありがとうございます
せ、セマンティック? セマンティックが止まらない的な?

すみません^^;またよくわからないのに使用してしまいました これでは意味がないですね💦


ちなみに前はこちらを参考にしておりました
https://sakuraxren.blog.fc2.com/blog-entry-736.html
document.writeとあり、これがセマンティックのですね^^;今意味がわかりました(←本当にわかったのかは怪しい)
いつもお騒がせしてすみませんorz💦


---追記---
リベンジでつけてみました!
2019-11-08-07:57 * 徳川たぬこ [ 返信 * 編集 ]

aki Re: 徳川たぬこ 様へ

<time>は、日付や時刻を表すための要素ですので、その使い方はセマンティック的には違うかな~と思います。
まぁ、使えなくはないのですが。^^;
(実際、は○なブログでのカスタマイズ記事に、何方かがタイトル脇に表示する同様の方法を書いてますし。)

ご利用頂いて、不具合が有るようでしたらお教え下さいね。
2019-11-07-23:54 * aki [ 返信 * 編集 ]

aki Re: - y様へ

後程そちらへ伺いますね。(^-^)
2019-11-07-22:22 * aki [ 返信 * 編集 ]

No Subject

こんにちは ありがとうございます
さっそく試させていただいております
(1日以内で、タイトルの後ろに画像が出るようにしました)

<%topentry_title><time datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00"></time>

しばらくこれで使ってみます(^0^)
いつもありがとうございます
2019-11-07-14:37 * 徳川たぬこ [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-11-07-12:41 * - [ 返信 * 編集 ]