yunico's fluffy life

横着主婦の暮らしの詰め合わせ

当ブログにはPR広告を利用した記事があります

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

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

  • 1つの記事の全文が表示される全文形式
  • タイトルだけを表示させ記事を数個並べていく一覧形式

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

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

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

 

  

 

はじめに設定すること

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

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

 

『続きを読む』を活用する

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


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

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

 

『続きを読む』のデメリット

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

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

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

 

 

デザインCSSで設定する

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

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

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

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

 

  • トップページに載る記事本文
  • 本文下にある部品(スターや共有リンクなど)

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

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

 

CSSで設定することの注意点

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

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

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

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

 

 

おわりに

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

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

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

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