はてなブログのトップページを記事一覧化にした

YUTOです。

今回ははてなブログのトップページを記事一覧表示にカスタマイズしました。

僕はレスプンシブデザインを使用しているので、デフォルトの状態では

上のように表示されてしまい、【続きを読む】を毎回手動で入力しなければいけないですし、記事によって入れる箇所が違うのでトップページでの記事一覧の長さもバラバラになります。

大半がが1つの記事で画面がいっぱいになってしまいます。

トップページを記事一覧表示

↓のサイトを参考にさせていただき、トップページにアクセスした場合に強制的に一覧表示させるようにしました。

dokuwohaku.hateblo.jp

はてなブログの【管理画面-設定-詳細設定】へ行き、【検索エンジン最適化-headに要素を追加】で以下を入力。

<script type="text/javascript"> if( location.href == 'https://yutof.com/'){ location.href='https://yutof.com/archive'; } </script> <noscript> <p><a href="https://yutof.com/archive">YUTOLOG</a></p> </noscript>

3つあるURL部分を自分のURLに変更し、 3つめのURL部分のすぐ後ろにある【YUTOLOG】を自分のブログタイトルに書き換えてください。

これでトップページにアクセスした際に、強制的に記事一覧表示へ切り替わっていると思います。

ブログタイトルのリンク先、グローバルメニューのリンク先を記事一覧表示に変更

↓以下の記事を参考にさせていただき、カスタマイズしました。

www.ito-tomohide.com

ブログタイトルをクリックした際にも記事一覧ページを表示をさせたいので、

<script>
(function() {
  document.querySelector("#title a").href = "/archive";
}());
</script>

上のコードををはてなブログの【管理画面-デザイン-カスタマイズ-フッタ】に入力するとブログタイトルをクリックした際にも記事一覧表示へと切り替わります。

グローバルメニューのリンク先の変更は今までのURL部分に【/archive】を入力すれば記事一覧表示にアクセスされると思います。

僕のサイトで例えると【http://ytter3.hatenablog.com/archive】のようになります。

カスタマイズ後

これでトップページにアクセスした際の表示が

f:id:ytter3:20161226223237p:plain

このように一覧化され、スマートフォンでは

このように表示されるようになりました。

記事の長さも統一され、見やすくなったと思います。

参考にさせていただいた方々、ありがとうございます。

はてなブログのトップページを記事一覧化表示させたい方の参考になれば幸いです。

またカスタマイズをしていくと思うので、その際に記事を更新していきたいと思います。

では。