無料版のはてなブログでも記事を一覧形式にする方法（コピペOK！）

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

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

個人的には全文形式よりも一覧形式のほうが読みたい記事を探しやすいですし人気の形式のように感じていますが、はてなブログの一覧形式は有料プランに加入している人しか使えない機能となっています。

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

スマホのデザインがPCと同じ『レスポンシブデザイン』に設定されている必要があります。

まだレスポンシブデザインの設定をしていない場合は、以下を参考に設定してください🧸yunico-fluffylife.com

はてなブログ続きを読む
記事を書く時に『続きを読む』を設定することで、トップページに表示される記事を分割する方法です。

記事を執筆/編集するページで、トップページに表示させたい文章の下に『====』を挿入します（丸の部分の押すと自動で挿入されます）。

これで続きを読む設定が完了します。

記事を書くついでにできるのでお手軽ではあるのですが、記事1つ1つに、個々に設定していく必要があります。

投稿している記事が少なければ、1つずつ編集し直せば良いのですが、記事数が多い場合はこの作業は現実的ではありません。

なので、1回きりの設定で全ての記事に反映されるようにCSSコードを組んでみたので、次の項目でそちらをご紹介します。

コード使用の注意点
公開するCSSコードは個人利用のコピペはOKですが、ブログなどでカスタマイズ方法を紹介する場合は、本記事をリンクして引用である旨の表記をお願いします。

以下のコードを、マイページ（ダッシュボード）の左側にあるメニューから【デザイン】ページに飛び、【{}デザインCSS】に貼り付けてください。

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

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

コードを貼ることで上記の項目が非表示になります。

design-yunico.hateblo.jp⬆無料版はてなブログで、広告などを含めて実際どのように表示されるのかを確認しやすいようにデモブログを作ってみました。

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

無料版では一覧形式に設定することができず、

『あくまで全文形式のまま、本文を非表示にすることで擬似的に一覧形式に見えるようにする』という設定をしています。

アイキャッチ画像も本文の一部なのでトップページに表示することができません。これに関してはコードでどうすることもできないのでご了承くださいますようお願いします( ..)"

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

無料プランを利用していて、これまで一覧形式にできなかった方も、この記事を参考にブログデザインの幅が少しでも広がったら嬉しいな୨୧

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

今日はそんな感じ！
それではまたね🧸◌𓈒𓐍

yunico's fluffy life