(cache) 【ブログカスタマイズ】トップページの記事一覧表示をデフォルトの50記事から30記事に♪

こんにちは卯月廿六です。
いつも当ブログをご覧いただきありがとうございます。

今回は…

当ブログではたまに毒を吐く（id:dokuwohaku）さんの、下記の記事を元に、トップページに記事一覧を表示するカスタマイズをしています。

dokuwohaku.hateblo.jp

これは、たまに毒を吐くさんの記事中の言葉にあるように簡単に言うと…

「もしも現在地がトップページだったら、記事一覧に転送（リダイレクト）します」というJavascriptです。

を、利用したカスタマイズです。

問題点もある

ただし、このカスタマイズの問題点（不満点？）として、はてなブログのデフォルトの仕様上、記事一覧（archivesページ）の1度の表示件数は50記事に固定されています。

これだと、正直多すぎだしサイドバーコンテンツとのバランスも悪い。
なんとか減らして表示できないかと、以前からネットで探したり最近では自身でも模索してみたり…

み～つけた！？

そんな折に id:WorldWorldWorldさんの下記の記事を見つけました。

blog.wackwack.net

こちらの記事は元々はレスポンシブのモバイル端末での表示向けのカスタマイズとして紹介されていますが、WorldWorldWorldさんが記事中で、このカスタマイズの悪いところとして挙げている…

※PCとスマホを判定して、PC向けにはカスタマイズを適用しないように修正しました！

これはイコール、PC表示に特化して50記事より少なくも出来るってことだろうと「判断はできた」。

でもね、現実は^^;

だけど、先日のデザインカスタマイズで思い知らされた知識・勉強不足はここでも発揮^^;

レイアウトに特化したCSS学習サイト「Markup」で学んでも補いきれていないらしく…

WorldWorldWorldさんが記事中で紹介されたコードの5～7行目辺りが、端末の種別を判定しているらしい所までは解っても、実際にそこを修正するのか、削除するのか…、その辺りの理解が追いつかない。
と、言うよりも「頭に柔軟性がない」とでも言うのかも！？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
  $('#main-inner').ready(function(){
    "use strict";
    var pc_width = 600;
    var device = window.screen.width < pc_width ? 'sp' : 'pc';
    device = (device == 'pc' && $(window).width() > pc_width) ? 'pc' : 'sp';
    var view_sec_num = 5; <!-- ここに1回あたりの表示記事数を設定 -->
    var sections = $('#main-inner > div.archive-entries > section');
    if((sections.length > view_sec_num) && device == 'sp') {
      var page_index = 0;
      var $entries_archive = null;
      var archive_num = 0;
      $entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
      $entries_archive.insertBefore(sections[0]);
      for(var i=0; i < view_sec_num; i++) {
        $(sections[i]).appendTo($entries_archive);
        page_index += 1;
      }
      archive_num += 1;
      for(var i=view_sec_num; i < sections.length; i++) {
        if(page_index==view_sec_num) {
          var $read_more_link = $('<p style="text-align:center;background:#ddd"><a href="javascript:void(0)" style="line-height:3;font-size:80%:">もっと表示する</a></p>');
          $read_more_link.on('click',{archive_num: archive_num},function(e){
            $(e.target).hide();
            $('#entries-archive-' + e.data.archive_num).fadeIn("slow");
          });
          var $before_archive = $('#entries-archive-' + (archive_num-1));
          $before_archive.append($read_more_link);

          $entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
          $entries_archive.hide();
          $entries_archive.insertAfter($before_archive);
          page_index = 0;
          archive_num += 1;
        }
        $(sections[i]).appendTo($entries_archive);
        page_index += 1;
      }
      $entries_archive.hide();
    }
});
</script>

上記のコードを実際にテストブログに実装して、何パターンか試行錯誤したけどどうにも端末の種別を判定が上手くいかない。

そこで「伝家の宝刀を抜く」（苦笑）

そこで今回も…伝家の宝刀「作者様に質問」を抜いてしまった（結局それか！！）

WorldWorldWorldさんに事の経緯を伝えると、早速回答が頂けました。

結論から言えば「見落とし」が原因。
端末の種別を判定しているであろう部分のコードを5～7行目と目星を付けたのは正解で、それを実際にテストブログでの試行錯誤でまるっと削除してみたことも大正解だったのだが、思うような結果を得られなかった。
その理由は、更なる判定の関連記述を「見落とした」ことだった。

WorldWorldWorldさんへの質問回答の中で…

・5行目〜7行目を削除
・10行目の「 && device == 'sp'」を削除

「10行目」の記述の一部削除、これが原因で思うように出来なかったのです。
前述の通り知識・勉強不足と柔軟性の無さを痛感させられるような理由でした^^;

まあ、自分で言うのもなんなのですが、逆に良い所までは行ってはいたのも事実ではありますが…

そんな訳で、WorldWorldWorldさんが記事中で、このカスタマイズの悪いところとしてもう1つ挙げていた…

・「もっと表示」と「次のページ」が紛らわしい

この点に関しては「一覧の続きをもっと表示する」に変えることで、一定の混同回避をし、実際の当ブログのサイドバーの長さを考慮して一度に表示する記事数の部分の調整値も「30」記事に決定。

最終的にやったこと

上記を踏まえて修正を加えた下記のコードを、WorldWorldWorldさんが記事中で説明しているように「デザイン」⇒スパナマーク⇒「フッタ」に追記記述しました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
  $('#main-inner').ready(function(){
    "use strict";
    var view_sec_num = 30; <!-- ここに1回あたりの表示記事数を設定 -->
    var sections = $('#main-inner > div.archive-entries > section');
    if((sections.length > view_sec_num) && device == 'sp') {
      var page_index = 0;
      var $entries_archive = null;
      var archive_num = 0;
      $entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
      $entries_archive.insertBefore(sections[0]);
      for(var i=0; i < view_sec_num; i++) {
        $(sections[i]).appendTo($entries_archive);
        page_index += 1;
      }
      archive_num += 1;
      for(var i=view_sec_num; i < sections.length; i++) {
        if(page_index==view_sec_num) {
          var $read_more_link = $('<p style="text-align:center;background:#ddd"><a href="javascript:void(0)" style="line-height:3;font-size:80%:">一覧の続きをもっと表示する</a></p>');
          $read_more_link.on('click',{archive_num: archive_num},function(e){
            $(e.target).hide();
            $('#entries-archive-' + e.data.archive_num).fadeIn("slow");
          });
          var $before_archive = $('#entries-archive-' + (archive_num-1));
          $before_archive.append($read_more_link);

          $entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
          $entries_archive.hide();
          $entries_archive.insertAfter($before_archive);
          page_index = 0;
          archive_num += 1;
        }
        $(sections[i]).appendTo($entries_archive);
        page_index += 1;
      }
      $entries_archive.hide();
    }
});
</script>