読者です 読者をやめる 読者になる 読者になる

maRkの

キャンペーンだとか、Chess.appについてのなにか

はてなブログで古い記事に自動でメッセージをいれる

はてなブログ どうでもいい

Clipボタン

よくあるカスタマイズです。 CMSであればテンプレート内部でサーバーサイドでもって作成出来るのですが、ブログサービスの場合はそういうわけにはいかないので、たいていは JavaScript でゴリ押しすることになります。
情報が古くなると内容が現状とあっていなかったりすることがあるので、警告しておく、というものです(はてブロはテンプレートに作成日とかちゃんとでてるけど)。
というわけで、これははてブロ始めたばかりの人よりも数年は記事書いているひとむけになります。

f:id:maRk:20150909000143j:plain

まず、記事の先頭に空のメッセージ用のDIV要素を用意しておきます。
これは、デザイン設定の「カスタマイズ」(スパナ)=> 「記事」 =>記事上下のカスタマイズ の 上のほうに

<div class="message"></div>

をいれて、保存にします。これはスクリプトjQuery)側で生成してもいいのですが、ここでは空要素を用意しておく方法で説明します。
id にしないのは、AutoPagerizeのように、スクロール最下部に次のエントリー差し込む形でみる人がいるばあいのid 重複を避けるものです。
なお、class="message" の message は任意です。カスタマイズで使用済みならば別の名称にするなどします。

次に、メッセージのほうのCSSを追加します。
先の要素を最初から display:none にして、スクリプトで visible する、というやり方もありますが、ここでは、jQueryの addClass を使って、要素に追加した classに対してスタイルを指定してあげる事で表示となるようにしています。
CSS編集のところに ここでは、is_true というclassを追加されたものに対するスタイルを指定してあげます。

div.message.is_true {
/* ここに適当なスタイル 単純な例:
 color : inherit;
  margin : .5em;
  padding : .5em;
  border : 1px solid;
*/
}

以上で、一度エントリーページで確認して表示でおかしい部分がないかチェックすれば確実です。
※ 空要素に別なスタイルがついていたりすると、通常表示されない要素が表示されてしまいます。

で、本題のメッセージは以下のエントリーを参考にしました。

jQueryで古い記事に警告メッセージを自動表示する方法 - LIQUID DESIGN BLOG

あらかじめ、テンプレートでjQueryが使えるようにjQuery本体を読み込んでおいてから、先ほどのデザイン設定の「記事下」で以下をいれてみます。

(function($){
  var message = 'この記事は古い!';
  var _date = new Date();
  _date.setYear(_date.getFullYear()-1); // 1年前の設定
  var pub_date = new Date($('time').attr('datetime'));

  if (_date > pub_date){  
    $('div.message').append(message).addClass('is_true');
  }
})(jQuery);
  • message には「●年前に書かれた記事です」とかいった適当な文章をいれます。
  • .setYear で引いている数値が何年前かということになります。
  • 今の時間から年数を引いた経過年と公開日を比べて、.message のある要素に追加して、is_true (これは任意な文字で)というclassを追加します。

メモ

※ 日にちを読まずに、●日前とか○年前とかいうテキストリンクが記事にあるので、直接それを参照するアイデアも考えられます。(表示方法に変更あると大変かな)
※ このやりかたでは、スマートフォン版ページには対応しません(記事作成時刻の表記が違っているため (モバイルページで要素の検証をすればなんとかなりそうですが)

広告を非表示にする