無料はてなブログでも記事を一覧形式にする方法┃設定は一度きりで、コピペOK！

はてなブログのトップページに表示される記事の一覧は【全文形式】と【一覧形式】があります。

皆さんはどちらに設定していますか？

もくもく

一覧形式が人気だけど、はてなブログの場合有料プラン（はてなPro）限定の機能なんだよね。

yunico

そこで、今回ははてなブログの無料プランでも一覧形式のように表示させる方法をご紹介するよ。

すべての記事に一括で設定させる方法なので、既に投稿している記事が多くても簡単に一覧形式にできますよ！

サムネも載せられる最新版ができました！

コードの使用について

スマホでも一覧形式のように見せるためには、スマホのデザインもPCと同じになるようにレスポンシブデザインに設定している必要があります。

まだレスポンシブデザインになっていない場合は以下を参考に設定してください。

コードの使い方

/* 擬似的に一覧形式 */
.page-index .entry-content {
  max-height: 0;
  overflow: hidden;
}

.page-index .entry-footer {
  display: none;
}

このコードを貼り付けるとトップページに載る、記事全文・本文下にある部品（スターや共有リンク）など、記事のタイトル以外が全て非表示になります。　

デモブログ

design-yunico.hateblo.jp
無料版はてなブログで、広告を含め実際どのように表示されるのかを確認してみてください。

デモサイトを見ていただけるとわかりますが、記事本文に画像を載せていたとしてもアイキャッチ画像（サムネイル）は表示されません。

これは『あくまで全文形式のまま、本文を非表示にすることで擬似的に一覧形式に見えるようにする』というデザインにしているためです。

アイキャッチ画像も本文の一部なのでトップページに表示することができず、~~これはコードでどうすることもできませんでした( ..)"~~

サムネ画像を表示できるものが完成しました！

無料プランのはてなブログでも一覧形式のように表示させる方法をご説明しました！

もくもく

無料プランを利用していて一覧形式にできなかった方も、この記事を参考にデザインの幅が広がったら嬉しいね。

yunico

ご不明な点がありましたら、お気軽にコメントください。

yunico's fluffy life