2019年01月12日

【FC2ブログカスタマイズ】最終更新日時を表示-更新されたページのみ表示する!

去年の3月22日に、FC2ブログに記事の最終更新日時を表示する変数群が追加されました。

引用:
<!--topentry--> ~ <!--/topentry-->内で有効になる単変数

<%topentry_modified_year> 最終更新年を表示  
<%topentry_modified_month> 最終更新月を表示 
<%topentry_modified_month:short> 最終更新月(書式:Jan/Feb/Mar…)を表示 
<%topentry_modified_day> 最終更新日を表示 
<%topentry_modified_hour> 最終更新時を表示 
<%topentry_modified_minute> 最終更新分を表示 
<%topentry_modified_second> 最終更新秒を表示 
<%topentry_modified_youbi> 最終更新曜日(書式:Mon/Tue/Wed…)を表示 
<%topentry_modified_wayoubi> 最終更新曜日(書式:月/火/水…)を表示
引用終了:

FC2ブログで記事の最終更新日時を表示させてみよう
https://fc2blogstaff.blog.fc2.com/blog-entry-45.html

そこで今日は、遅ればせながらこれらの変数を使って、FC2ブログで記事の最終更新日時を表示するスクリプトをつくってみたいと思います。(^^)v
表示は、以下のようになるようにします。

最終更新日時:2019/01/12 (Sat)

と仕様が決まったところで、早速つくってみたのが以下です。

最終更新日時:<%topentry_modified_year>/<%topentry_modified_month>/<%topentry_modified_day> (<%topentry_youbi>)

このコードを、あなたのお使いになっているテンプレートのhtmlの、最終更新日時を表示したところに書き込めば、晴れて最終更新日時が表示されますようになります。(^^)

が……、「晴れて」と書いておきながら何ですが、実は、これだとちょっと難があります。
それは、記事内容に更新がない場合、同じ日付が2つ並んでしまうということです。

それでは、最新更新日時の意味がありませんね。【><】

ということで、javascriptを使って、記事が更新されていた場合のみ、最終更新日時を表示するスプリプトを書いてみました。(^^)v

以下のスプリプトを、あなたのブログの<!--topentry--> ~ <!--/topentry-->内の、最終記事更新日時を表示したいところにコピペしてください。
<script language="JavaScript">
<!--
if ("<%topentry_year><%topentry_month><%topentry_day>" != "<%topentry_modified_year><%topentry_modified_month><%topentry_modified_day>")
    document.write('最終更新日時:<%topentry_modified_year>/<%topentry_modified_month>/<%topentry_modified_day> (<%topentry_youbi>)');
//-->
</script>

これで、今度こそ晴れて、記事内容に更新があった場合のみ、更新日時が表示されるようになります。
どうぞお試しください。(^^)

あっ!(゚o゚)
最後に一言。
この変更を行なう前に、あらかじめお使いのテンプレートのバックアップをとっておくことをお勧めいたします。
そして、変更は自己責任で。

2016年03月29日

【忍者ブログカスタマイズ】最新記事にNew!マーク-自動で消えて表示期間の変更も可能!

今日は、忍者ブログの最新記事プラグインに表示される新着記事に、New!マークをつけるスクリプトのご紹介です。

忍者ブログの最新プラグインで表示される記事には、最新記事のタイトルとともに、(良く見ると)その下に記事が書かれた日付も表示されています。
が、”特に最後の記事が、どのくらい前に書かれたものなのかということが、直感的に分かりにくい”です。

基本的に、ここに表示されている記事は、正確には”最新記事”ではなくて、”そのブログで書かれた記事が、一番新しいものから順番に並んでいるもの”に過ぎません。
ということは…、「書きたてのフレッシュな記事!」とは限らず、ヘタをすると、「10数年前に書かれた、化石のような記事(?)」の可能性もあるわけです。【><】

ということで、”発信されたばかりの、本当に「フレッシュ」な記事のみに、New!マークをつける”スクリプトを、Javascriptでつくってみました。(^^)

 表示イメージ


それでは早速、そのやり方です。

1.プラグイン内の文字列の編集

まず、管理画面から、「プラグイン」をクリックします。
すると、あなたのブログで現在使用中のプラグインの一覧が表示されますので、その中から「最新記事」を探し、その右側にある「表示設定」をクリックします。
そうすると、「プラグインHTMLの変更」という窓が現れます。
その中に書かれたおまじないのような文字列を見ていくと、3行目に、

<a href="<!--$plugin_entry_link-->"><!--$plugin_entry_title--></a>

という箇所があります。

この行の最後に、以下の文字列を付け加えます。

<span class="nm">&nbsp;</span>

すると、こんな風になります(分かりやすくするために、赤く色をつけています)。

<a href="<!--$plugin_entry_link-->"><!--$plugin_entry_title--></a><span class="nm">&nbsp;</span>

そうしたら、これらのおまじない全体を一番下まで送り、以下のおまじない(スクリプト)をコピペ追加します。
<script type="text/javascript"><!--
//http://musingbuff.blog.shinobi.jp/
var t_arttim = '
<!--plugin_entry-->
<!--$plugin_entry_year-->,<!--$plugin_entry_mon-->,<!--$plugin_entry_day-->,<!--$plugin_entry_hour-->,
<!--/plugin_entry-->
0';
t_arttim = t_arttim.split(",");
t_elt = document.getElementsByTagName('span');
var t_today = new Date();
var t_t = 24;
var t_obj = '';
var t_c;
var t_fnd = 0;
for (i = 0; i < t_elt.length; i++) {
    t_obj = document.getElementsByTagName('span')[i];
    if (t_obj.className == 'nm') {
        t_c = new Date(t_arttim[t_fnd * 4] ,t_arttim[t_fnd * 4 + 1] - 1 ,t_arttim[t_fnd * 4 + 2] ,t_arttim[t_fnd * 4 + 3]);
        if (t_today - t_c < 3600000 * t_t)
            t_obj.innerHTML += 'New!';
        t_fnd++;
    }
}
--></script>

OKですか?
追加したら、「変更」ボタンを忘れずにクリックします。

2.CSSの編集

次に、CSSの編集です。

「PCテンプレート」をクリックし、現在使用中のテンプレート欄のの右側にある「修正」をクリックします。

すると、「CSS編集」という窓が現れますので、一番下に以下の3行を付け加えます。
.nm {
    font-weight:bold;
    color: red;
}

書き加えたら、画面上部中央にある「データ保存」ボタンをクリックするのを忘れずに。
以上で終了です。
どうもお疲れさまでした。(^^)

さてこれで、あなたが新しい記事を書くと、新着記事プラグイン内の、その記事タイトルの最後に、一定期間New!マークがつくようになります。

3.【応用編(カスタマイズ)】 New!マークの表示期間の変更、他

New!マークが表示されている期間(時間)は、初期設定で1日(24時間)となっています。
通常はこのままで問題ないと思いますが、この時間を変えたいときがあります。
もっと早く消したい! もっと長く表示したい! などです。

このような場合には、プラグイン内に追加したスクリプトの12行目にある「24」という数字を変更します。
好きな期間、マークを表示させることが可能です。
t_elt = document.getElementsByTagName('span');
var t_today = new Date();
var t_t = 24; ←ココ。
var t_obj = '';
var t_c;
var t_fnd = 0;

たとえば、New!マークを2日間表示させたいのならば「48」に、3日間表示させないのならば「72」に変更します。

また、New!マークは、現在テキスト文字で表示されていますが、画像に変えることもできます。
その場合には、スクリプトの下から5行目の、現在'New!となっている'部分に、お好きな画像をセットして下さい。

            t_obj.innerHTML += 'New!';
              ↓
            t_obj.innerHTML += '<img src="お好きな画像のURL" border="0" />';

なお、New!マークの色や大きさなどは、CSSをいじることによって変更が可能です。

あっ!(゚o゚)
最後に一言。
これらの改造を行なう前に、あらかじめ変更箇所のバックアップをとっておくことをお勧めいたします。
そして、改造は自己責任で。

2012年10月12日

【忍者ブログカスタマイズ】スパム対策強化-コメント欄に認証機能を追加

このところ、このブログに海外からと思われるスパムコメントがポチポチとついています。
しかも、その内容は、音楽とはかけ離れたものばかりです(スパムだから当然か(^^;)。
「管理人の承認後に表示」を選択してあるので、それらのコメントが即表示されることはないのですが、いずれにしてもスパムコメントがつくというのは、あまり気持ちのいいものではありません。【><】

「画像承認機能」があると、それなりの効果は期待できるのですが、いかんせん忍者ブログにはこれがないのです。

そこで、これに代わるようなものが作れないものかと、考えてみました。
結果、頭の中で、以下のようなアイディア(仕様)がまとまりました。

1.コメント投稿欄の項目に、「認証キー」を追加する
2.認証キーは4桁の数とし、ページがロードされる度にランダムに生成される
2.「送信」ボタンは、最初はロックされた状態になっており、正しい認証キーが入力されると、ロックが解除されてコメント投稿が可能となる。

ということでできたのが、以下のjavascriptを使用したスパム対策強化ルーチンです。(^^)v

<tr>
<td class="CommentFormTh">認証キー</td>
<td class="CommentFormTd"><input class="CommentForms" name="key2" id="key2" size="4" onkeyup="check_key();">&nbsp;<span id="cmes">(投稿時 <font style="color:#dd0000;"><span id="otkey">&nbsp;</span></font> を入力してください)</span></td>
</tr>
<script language="JavaScript"><!--
//http://musingbuff.blog.shinobi.jp/
function check_key() {
pw = document.getElementById("key2").value;
if (pw == pword)
document.getElementById("btnn").disabled = false;
}
var pword = 1111;
pword = pword + Math.floor(Math.random () * 8888);
document.getElementById("otkey").innerHTML = pword;
//--></script>

さて、それではこのプログラムを実際に組み込んでみます。
管理画面の「テンプレートの設定」→「修正」とcllickすると、画面の左側に「HTML編集」という窓が現われるので、この窓内をclickし、上のプログラムをブログのHTMLに追加します。
追加位置は、ほぼ真ん中あたりです。

<!--if_cm_receipt-->
   .
   .
   .
この記事にコメントする
   .
   .
   .
ときて、さらにもう少し下を見ていくと、「コメント」...、「パスワード」そして「送信」という文字が現われてくると思います。
この「パスワード」と「送信」の間に、上記の内容をコピペします。


        <td class="CommentFormTh">コメント</td>
        <td class="CommentFormTd"><textarea class="CommentForms" name="comment" cols="40" rows="4"></textarea></td>
        </tr>
        <tr>
                <td class="CommentFormTh">パスワード</td>

                                <td class="CommentFormTd"><input class="CommentForms" type="password" name="pass">&nbsp;&nbsp;<!--$g_emoji_window--></td>
                          </tr>

<tr>
<td class="CommentFormTh">認証キー</td>
<td class="CommentFormTd"><input class="CommentForms" name="key2" id="key2" size="4" onkeyup="check_key();">&nbsp;<span id="cmes">(投稿時 <font style="color:#dd0000;"><span id="otkey">&nbsp;</span></font> を入力してください)</span></td>
</tr>
<script language="JavaScript"><!--
//http://musingbuff.blog.shinobi.jp/
function check_key() {
pw = document.getElementById("key2").value;
if (pw == pword)
document.getElementById("btnn").disabled = false;
}
var pword = 1111;
pword = pword + Math.floor(Math.random () * 8888);
document.getElementById("otkey").innerHTML = pword;
//--></script>


        <td colspan="2" class="CommentFormSubmit">
                 <input class="button" type="reset" value="リセット">&nbsp;&nbsp;<input type="submit" id="btnn" value=" 送信 " disabled>
        </td>
     </tr>


※上は、このブログに実際に組み込んだ様子で、分かりやすくするために挿入部分に色をつけています。

次に、「送信」ボタン部分のタグに、id=btnn" とdisabledを追加します。

<input type="submit"  value=" 送信 ">
         ↓
<input type="submit" id="btnn" value=" 送信 " disabled>

※赤字部分が追加箇所となります。


最後に、「CSS編集」窓内をclickし、CSSの編集です。
CSSの最後に以下を付け加えます。

#cmes {
font-size: 12px;   
}

2行目の数字を変えると、認証キーの表示をするカッコつき文字列の大きさを変えることができます。

以上で終了です。


なお、認証キーをテキストではなく、画像にしたいという方もいらっしゃるかと思います。
その場合には、javascript部分を以下のものに差し替えててください。

<script language="JavaScript"><!--
var numimg = new Array();
numimg[0] = '<img src="数字0の画像のURL" border="0" />';
numimg[1] = '<img src="数字1の画像のURL" border="0" />';
numimg[2] = '<img src="数字2の画像のURL" border="0" />';
numimg[3] = '<img src="数字3の画像のURL" border="0" />';
numimg[4] = '<img src="数字4の画像のURL" border="0" />';
numimg[5] = '<img src="数字5の画像のURL" border="0" />';
numimg[6] = '<img src="数字6の画像のURL" border="0" />';
numimg[7] = '<img src="数字7の画像のURL" border="0" />';
numimg[8] = '<img src="数字8の画像のURL" border="0" />';
numimg[9] = '<img src="数字9の画像のURL" border="0" />';

//http://musingbuff.blog.shinobi.jp/
function check_key() {
pw = document.getElementById("key2").value;
if (pw == pword)
document.getElementById("btnn").disabled = false;
}
pword = 0;
document.getElementById("otkey").innerHTML="";
for (i = 0; i < 4; i++) {
 pword  = pword * 10;
 num = Math.floor(Math.random () * 9);
 document.getElementById("otkey").innerHTML += numimg[num];
 pword +=num;
}
//--></script>

差し替えが終わりましたら、<img src~部分(10ヶ所)に0から9までの画像URLをセットして下さい。
数字画像は、各自ご用意いただくか、以下のものをそれぞれマウスの右clickにてお持ち帰り下さい。

 

これで、認証キーの数字が画像表示となります。


ちなみに、javascript部分は<head>内に書くとか、別ファイルにするとかの方法も考えられますが、今回は「一番簡単な方法」を選択しました。(^^;v
実際に改造した様子は、この記事のコメント欄でご確認下さい。


さてこれで、あなたの忍者ブログが、プログラムを使用した自動コメントスパムの書き込みに強くなるはずです。
もしよろしければご使用ください。

あっ!(゚o゚) この改造をされようと思ってらっしゃる方に、注意点が3つほどあります。

1この改造を施すと、javascriptがONになっていないと訪問者がコメントできなくなります(通常はそれで問題ないと思いますが)。
2.改造前に、必ずオリジナルHTMLのバックアップを取ってください。
3.そして、改造は自己責任で。

それでは、良いブログライフを!
って、どこかで聞いたような…。(爆)