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

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

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

個人的には一覧形式の方が読みたい記事を探しやすく、人気の形式のように感じています。しかしはてなブログの一覧形式は有料プラン（はてなPro）のみの機能です。

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

スマホのデザインがPCと同じ『レスポンシブデザイン』に設定されている必要があるので、まだレスポンシブデザインになっていない場合は、以下を参考に設定してください。yunico-fluffylife.com

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

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

トップページでは⬆このように表示され、『====』より下に書いてあった内容は続きを読むのリンクから読むことができます。

特別な設定をする必要もなく、簡単に実行できるのがメリットです。
　

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

これからブログを始める方や投稿している記事が少ない方にはおすすめの方法ですが、既にたくさんの記事を投稿している場合、記事1つ1つ設定していく作業は現実的ではありません。
　

⬆こんな方は、次の項目でご紹介する1回きりの設定で全ての記事に反映されるCSSコードでの設定がおすすめです。

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

CSSコードの使い方

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

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

　
⬆これをデザインCSSにコピペすると

以上が非表示になります。

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

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

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

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

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

続きを読む	CSSで設定
ひと記事ずつ設定する。	一回の作業で一括設定できる。
サムネイルが表示される。	サムネイルが表示されない。

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

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

yunico's fluffy life