【レスポンシブデザイン向け】はてなブログアーカイブページの記事数を変更するカスタマイズを作りました

※PCとスマホを判定し、スマホで表示した場合のみカスタマイズを適用するように修正しました！

この度はてなブログのアーカイブページに表示する記事数を変更するためのカスタマイズを作成しました。作成経緯から設定方法までご紹介していきたいと思います！

レスポンシブデザインを使う理由

はてなブロガーのみなさん、ブログのデザインは「レスポンシブ型」でしょうか、それとも「スマホ独立型」でしょうか。

私は「レスポンシブ型」を使っています。最大の理由は、

カスタマイズ・デザイン用のCSSやスクリプトの設定が一度で済む

からです。

怠け者の化身である私にとって、「PC用とスマホ用にそれぞれのCSSを設定する」といった作業は「赤ん坊に『ジュース買ってこい』とお願いする」に等しいくらい遂行困難な任務です。

仮に最初だけは頑張って設定しても、その後「新しくカスタマイズ導入しよう」や「この部分を自分でカスタマイズしよう」と思った時、2種類分を設定し続けられるでしょうか。はい、できません。

だから私のような継続性のかけらもない怠け者が選ぶ道は、クライアントの端末によっていい感じに勝手に調整してくれるレスポンシブデザインなわけです。

レスポンシブデザインの欠点

私にとってメリットたくさんなレスポンシブデザインですが欠点もあります。それは、

トップページを記事一覧で表示することができない

ということです。

通常のはてなブログトップページは、最新の5つの記事が立て続けに全表示されます。

PCならまだしもスマホで見ると延々とスクロールが続き、プロフィールやおすすめ記事が表示されているであろうページ下部にたどり着くのが大変です。

これはユーザビリティもよろしくないし、ふとしたタイミングでフォローされたり、おすすめ記事を読んでもらえる機会を損失している！と個人的に考えています。

……

おっと、「トップページなんか大してアクセスないだろ」「PV大してないくせに偉そうなこと言うな」という悪口はそこまでだ。

ちなみにスマホ独立型のデザインを利用すると、スマホのトップページを記事を一覧で表示してくれるため、かなりスッキリとした見た目となります。

先人たちの解決策

「レスポンシブデザインでもトップページを一覧で表示させたい！」と考えた先人たちは、ひとつの手法を編み出しました。

それが、

ブログトップページにアクセスしたら自動的にアーカイブページを表示させる

という手法です。

はてなブログでは「ブログURL/archive」のアーカイブページが用意されており、ここにアクセスすると1ページあたり50記事分の一覧が新着順に表示されます。

これを利用して先人たちは「ブログトップページにアクセスした場合JavaScriptの制御で自動的にアーカイブページへリダイレクトする」という設定を行ってきたのです。

スクリプト自体は非常に簡易であるため誰がオリジナルなのかは分かりませんが、多くの方が導入しているようです。
導入目的は「デフォルトのトップページが重いから」や私のように「記事一覧を表示したいから」など、人それぞれのようです。

shijinblog.hatenablog.com

lovdiv.hatenablog.com

http://www.ito-tomohide.com/entry/2016/03/04/190917www.ito-tomohide.com

dokuwohaku.hateblo.jp

アーカイブ表示のデメリット

トップページをアーカイブページへリダイレクトするこの方法、非常に簡単でメリットも大きいと思いますが、イマイチな点があります。

それが、

50記事って、多くね？

ってことです。

元々このカスタマイズを導入しようとしたきっかけは、「スマホでトップページ見たときに下までスクロールするのが大変！」という理由が第一にあったはず。それがアーカイブページにしたところで、「5記事の全表示」が「50記事の一覧表示」になっただけであり、ページ下部までの長さは変わらないどころか下手したら前より長くなっている！！

くそっ、これが怠け者へ対する仕打ちか！スマホ用デザインを導入するしかないのか……！？

アーカイブページをアーカイブするカスタマイズを作った

だがしかし！ここで諦めては怠け者の名が廃ります。

この悩みを解消すべく、アーカイブページをアーカイブするカスタマイズを自作しました！！

……え、意味が分からんて？まぁまぁ、とりあえず見ていってくださいよ。

このカスタマイズでできること

はてなブログのアーカイブページを表示した際に、最初の5記事を一覧表示にして、残りを非表示にします。
その上で「もっと表示ボタン」を設置し、このボタンを押すと次の5記事が表示される、という仕組みです。

設定方法

コピペ2回で設定できます。

トップページをアーカイブ一覧に設定する

こちらは前述のとおり既に多くの方が使われているものですが、一応載せておきます。（ここまで読み進めた方は既に設定しているかもしれませんね。）

はてなブログの管理ページから「設定」→「詳細設定」と進み、「headに要素を追加」欄に以下のスクリプトを貼り付けます。
※この時ブログURLとブログ名を自分のURLとタイトルに修正するのを忘れずに！

<script type="text/javascript">
  if( location.href == 'http://blog.wackwack.net/'){
  location.href='http://blog.wackwack.net/archive';
}
</script>
<noscript>
<p><a href="http://blog.wackwack.net/archive">小さな星がほらひとつ</a></p>
</noscript>

フッタにスクリプトを貼り付ける

最後にアーカイブページをアーカイブします。

はてなブログの管理ページから「デザイン」→「カスタマイズ」→「フッタ」と進み、HTML欄に以下のスクリプトを貼り付けます。

<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>

※コメントで指摘いただきスクリプトを一部修正しました。（最終行の「</script>」が抜けていた）

なお「」の部分の数字を任意の値にすることで、一度に表示する記事数を変更することができます。

これだと最初に5記事分を一覧表示。

var view_sec_num = 5; <!-- ここに1回あたりの表示記事数を設定 -->

これだと最初に7記事分を一覧表示。

var view_sec_num = 7; <!-- ここに1回あたりの表示記事数を設定 -->

以上です！

このカスタマイズの悪いところ

認識しているのはこの2点です。

• PCで見るには、むしろうざったいかもしれない。
  ※ PCとスマホを判定して、PC向けにはカスタマイズを適用しないように修正しました！

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

細かいことには目をつむる主義の方、ぜひご利用下さい。

カスタマイズ　【特注】をビジネスにする新戦略