はてなブログ無料版でトップページのカスタマイズ・記事一覧で見やすく

久しぶりの『ブログ日和』

記事を書いていると、そちらに時間をとられ

なかなかカスタマイズに手が回らないろみです。

記事数は少ないですが、雑記ブログなのでトップページを見た時に

これは何の記事だろう、興味がある記事はどこだろう？

少しだけ分かりやすくするために一覧形式を取り入れてみました。

『はてなブログpro』の人は管理画面の設定ですぐに変更出来るので

私のように無料版で利用している場合の記事となっています。

簡単！コピペで出来るトップページを記事一覧にする方法

簡単！コピペで出来るトップページを記事一覧にする方法

たくさんの先輩方が記録を残してくれているので、とても助かります。

しかもコピペ！　

コピー&ペースト大好き (*´ω`*)

そんな私が先輩方の記録を参考にしながらやったことのまとめです。

内容は殆ど変わらないので、後ほど参考にしたサイトを記載しておきます。

まずはバックアップ

カスタマイズによってブログのデザインが大きく変わる時は、

バックアップをしておいた方が安心です。

定期的にしておくと良いのですが、忘れがちになるので

こういった変更時などを利用しておきましょう (*'▽')

バックアップの方法を載せています。

romita.hatenablog.com

最初の確認

それではカスタマイズを進めてみます。

まずは自分のブログがスマホなどに対応しているレスポンシブデザインなのかを確認。

一覧形式にするのに、javascript のコードを使うためレスポンシブデザインでないとスマホやタブレットなどには適応できないからです。

おさらいレスポンシブデザインかの確認

ダッシュボード
デザイン
スマートフォンのアイコンをクリック

f:id:romita:20191126214801j:plain

トップを記事一覧にするコード

このコードは自動的に記事一覧としてアーカイブページ (記事を保存するフォルダのようなもの) に飛ばす機能です。

私のページからコードをコピペしたい人のために残しておきます。

入力する (張り付け) 場所は

ダッシュボード
設定
詳細設定

詳細設定の中の「headに要素を追加」にコードを貼りつける。

<script type="text/javascript">
  if( location.href == 'https://自分のURL/'){
  location.href='https://自分のURL/archive';
}
</script>
<noscript>
<p><a href="https://自分のURL/archive">自分のブログ名</a></p>
</noscript>

先人様のコードを参考に引用させていただいております。

コード内の変更箇所は全部で4つ

自分のURL＝トップページのURL 私の場合は romita.hatenablog.com
自分のブログ名＝私の場合はことり日和

張り付けたあとは、詳細設定の中の一番下。

変更する　ボタンを忘れずにクリック☆

ろみの失敗

おっちょこちょいも健在です。

貼り付けコード内に記載する自分のアドレスのスペルミス。

それをしてしまうと、どれどれ～と設定したトップを見ると

「そのページは存在していません。」

のような無情なページを見ることになるのでお気をつけ下さい。

(*´Д｀) そりゃそ～だ

また、ぱぱっと張り付けていくと「https://」がダブっていたり

最後の「/」が増えたり消えていたりなどしている場合もあるので

自分のアドレス入力箇所だけは慎重に入力していく方が無難です。

何も問題がなければ、これでトップが一覧形式になっていると思います。

あら、簡単！ ( ﾟДﾟ)

左が今までのトップ画面 / 右が変更後のトップ画面

美味しそうに…いえ、見えやすくなりましたでしょうか？

今までは記事の最初の方に「続きを読む」と設定していました。

記事ごとに設定しないといけないので、

手間と感じる人には今回のカスタマイズは良い機能だと思います。

このカスタマイズは１度設定すると全ての記事に対応出来るのも嬉しいですね。

またパッと見て記事内のイメージが付きやすいのも良いですね。

スマホへの設定

先ほどのコードを張り付けた状態で終わると、スマートフォンでブログを見た時

トップの一覧がズラ～と出てきてしまいます。

これは逆に重くなってスクロールするのも大変です…。

と、いうことで一覧にでる記事数を減らすためスマホ用にも設定をしておきます。

こちらもコードをコピペできます。

長いですけどね！

場所は

ダッシュボード
デザイン
カスタマイズ
フッタ

f:id:romita:20191126214807j:plain

例を上げると、だいたい5記事くらいに設定しているので

まずは私もそれで調整してみました。

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