はてなブログの初期のトップページって記事の全文が表示されると思います。
ですがこれだとダサかったり、見にくかったりと問題があるので今回ははてなブログのトップページを一覧表示にしたり、自分の思い通りのデザインにできるようなカスタマイズ方法を紹介していこうと思います。

/archiveにリダイレクトという利用規約違反の方法や「続きを読む」を活用したちょっと微妙な感じの方法が紹介されている事が多いですが、この記事では独自の新しい方法で自由にカスタマイズできるようにしていきます。

カスタムの概要

今回行う方法ははてなブログのトップページで記事の全文が表示される機能を利用していきます。
簡単に言うとトップページにしたい記事を一つ作成し、その記事だけをトップに表示させておくというものです。

実際のカスタマイズ方法

トップページ用の記事を作成する

まずは普通に記事を書くように記事を作成してください。
このときにトップページっぽくするカスタマイズを加えます。

タイトルなどを非表示にする

タイトル、日付などのトップページには必要ない表示を非表示にしていきます。
以下のコードをトップページ用の記事のHTML編集で貼り付けてください。

<style>
  /* タイトルとか諸々非表示 */
  .entry-header{
    display: none;
  }
</style>

ページャーを非表示

ページャーもタイトルなどと同じ要領で非表示にします。

<style>
　　/* ページャー非表示 */
　　.pager{
 　　 display: none;
　　}
</style>

他に非表示にしたい箇所があれば調べてみてください。

トップページ用記事の公開

トップページ用の記事が完成したら公開をします。
公開する時、公開日時は9999年と相当先の日付を指定して公開してください。
また予約公開ではなくすぐに公開してください。
この設定が今回のキーポイントとなってきます。

トップページに表示させるための設定

次にトップページの表示設定を行います。
設定＞詳細設定＞ブログ表示からトップページの記事数を1記事に設定してください。
有料版を使っている人でこの方法を試しているひとは記事の表示形式を全文表示にしておいてください。

この手順を行うとトップページに今作ったトップページ用の記事だけが表示されていると思います。

記事一覧からトップページ用記事を非表示に

あともう少しです。
このままだと記事一覧ページで見たときにトップページ用記事が見えてしまいます。
これでは不自然なので以下の記事を参考に記事一覧ページからトップページ用記事を非表示にしてください。
【はてなカスタマイズ】アーカイブページから特定の記事を非表示にする方法

完成！

今回は記事一覧を表示させるようにしましたが、おすすめ記事のリンクを貼ったりなどHTML、CSSができれば基本なんでもできるようなカスタマイズ方法となっています。
これならトップページのURLも変わらないですし、現時点で最高のはてなブログのカスタマイズ方法だと思います。
是非実践してみてください。

【はてなブログ無料版も】トップページのカスタマイズ方法。一覧表示やその他自由にカスタム可能！