最新記事だけ日付を消す新スクリプト -お知らせ枠の設置-

スポンサーリンク


先ほど「querySelectorとquerySelectorAll」という記事を書きましたが、実はあれ、この記事の前フリです。

楽して稼ぎたい」のマスクドライダー17号さんなんですが、ブログを開くと最新記事を「お知らせ」欄として使っています。

最新記事を未来の日付にすれば、一番上に表示されるので、「お知らせ」を書いて常に表示できます。

問題なのが、しばらくの間「2017年05月27日」と表示されているんですね。待っていれば消えるんですけど。

どうやって消しているのかというと、スクリプトを使っています。そのソースを変えれば、もっと早くに、すぐ消えるんじゃないか?と、思ってソースを見てみました。実にドンくさいソースコードでした。

でもよく考えたら、これは私が書いたものでした

そのソースコードが、これですが、無駄に長い。「記事の日付を消したい」より

<script type="text/javascript">(function(){var entries=document.getElementById('entries');if(!entries){return;}var div=entries.getElementsByTagName('div');if(!div){return;}for(var i=0;i<div.length;i++){if(div[i].className=='entry'){var child=div[i].getElementsByTagName('div');if(child){for(var n=0;n<child.length;n++){if(child[n].className=='entryDate'){var date=child[n].innerHTML.replace(/^\s+|日\s*$/g,'').replace(/年|月/g,'/').split('/');var entrydate=new Date(date[0],date[1]-1,date[2]);var today=new Date();if(today.getTime()<entrydate.getTime()){child[n].style.display='none';div[i].className='entry future';break;}return;}}}}}})();</script>

これを、先ほどの記事「querySelectorとquerySelectorAll」を使って書きかえます。

まずは、古いコードをスキンから削除してください。もういりません。そして、この下のコードを使います。

新しいソースコード

<script type="text/javascript">date=document.querySelector('div.entryDate');if(date)date.style.display='none';</script>

すごく短くなった。querySelector恐るべし!

ただし、手を抜いています。最新記事の日付は常に未来である。その記事は必ず先頭に表示される。そういう前提で作りました。

設置方法

これを、スキンではなく、「2017年05月27日」の日付の記事の中に付け加えます。

張り付けるのは、記事の最初でも最後でも構いません。
問題がなければ、「2017年05月27日」の日付はソッコーで消えます。


追記

実際にマスクドライダー17号さんが設置したところ、ある事情でうまくいきませんでした。
(上のソースは、うまくいくように修正済みです)

それに関して別の記事「ソースのバグの作り方 -if文のカッコ-」で説明しています。


関連コンテンツ

スポンサーリンク

「最新記事だけ日付を消す新スクリプト -お知らせ枠の設置-」への5件のフィードバック

  1. こんばんは。
    ご丁寧に教えて頂き、ありがとうございます(^^)

    早速、試してみました・・・
    旧コードを外して、新しいソースコードを
    記事文末に加えてみましたが、上手く消えません。

    もし、よろしければ
    お手隙の際にでもご指南の程、よろしくお願いします(^^)

  2. <script type=”text/javascript”>date=document.querySelector(‘div.entryDate’);if(date){date.style.display=’none’;}</script>

    を文末に加えたのですが、{}で囲った部分が

    <div class=”entry_image”><img src=”/maskdrider17/file/62/date.style.display” border=”0″></div>

    に変わってしまいます。

    プログラムを理解できていないので、ちんぷんかんぷんです(^_^;)
    頼ってばかりで、申し訳ありません(>_<)

    1. こんばんは。

      >かえって、余計なお手間をとらせてしまって、ごめんなさい。

      とんでもないです。
      親切にして頂いて、嬉しいです(^^)

      Tomさんから頂いたコメントについては
      残しておきたいと思うのですが、何か不都合があれば消します。

      その際は、お手数をおかけしますが
      御一報よろしくお願いいたします(^^)

  3. こんにちわ・
    TOMさんもすっきりした きれいなページになりましたね。
    最初のページに日付がでないのは とても気に入っています。
    私はあのままで良いのですね!?
    友達に聞かれたら 今度はこの記事を紹介させていただきます。 
    絵文字が面白い~~

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください