編集

Bloggerの記事一覧をカード型に変更しました【F-light】

2026/08/26

記事一覧はリスト型にしていましたが、スマホでは少し物足りなく感じていました。そこで、スマホだけカード型に変更してみました。

横型のリストから縦型のカードへ

記事一覧は、写真とタイトル・説明文を横に並べた横長のリスト型にしていました。

PCでは写真と文章を横に並べるレイアウトで問題ありませんでしたが、スマホではカードの高さが小さくなり、写真も小さく見えます。

スマホの記事一覧

そこで、写真を上、タイトルや説明文を下に配置する縦型のカードレイアウトに変更しました。

実は、今回のカード化に必要な下地は、前回の「F-lightをFlexbox化」ですでにできています。

Bloggerの記事一覧を自分好みに整えました【F-lightをFlexbox化】 | さあ遊ぶぞ！！

今回は、そのFlexboxを利用して表示方法を変更しました。

F-lightのカードレイアウトをカスタマイズ

F-lightにはもともとカードレイアウトが用意されています。

参考にさせてもらいましたが、前回のFlexbox化で記事一覧の構造を変更しているため、現在の構造に合わせてCSSを調整しました。

スマホだけ縦型カードにする

PCやタブレットでは横型レイアウトをそのまま使い、画面幅600px以下では、写真の下にタイトルと説明文を配置する縦型カードに変更しました。

写真を大きく表示できるので見栄えはよくなりましたが、今度は写真の存在感が大きくなりすぎました。

画像を17:9に変更

16:9の写真はそのまま使いたかったので、画像そのものを変更するのではなく、スマホのカード内だけ表示領域を17:9にしてみました。

.article-img img {
  aspect-ratio: 17 / 9;
  object-fit: cover;
}

16:9より少し横長になるため、写真の高さが少し低くなります。

object-fit: cover; を使っているので、元の16:9画像は上下が少しトリミングされますが、17:9なら大きな違和感はありませんでした。

タイトルと説明文を調整

写真だけが目立たないように、スマホではタイトルの文字サイズも少し大きくしました。

.article-title {
  font-size: 1.7rem !important;
  line-height: 1.35 !important;
}

説明文は3行表示にしていましたが、実際に見てみると少し情報量が多く感じたので、最終的には2行にしました。

.article-snippet {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px !important;
}

途中で文章が切れてしまいますが、記事一覧では全文を読む場所ではないので、2行程度に収めたほうがすっきりします。

「記事一覧」の表示も変更

縦型カードにすると、カードそのものがかなり目立つようになりました。

そのため、スマホでは記事一覧の上に表示していた「記事一覧の青い帯」が少し邪魔に感じるようになりました。

そこで、1カラムになる1024px以下では「記事一覧」の青い帯を非表示にしました。

#Blog1 > .title {
  display: none;
}

最終的なCSS

前回のFlexbox化で記事一覧の構造を変更しているため、今回はその構造を利用して、スマホだけ縦型のカードレイアウトになるようCSSを追加しました。

⚠️ バックアップを取ってからお試し下さい。

/* スマホだけ縦型カードにする */
@media(max-width: 600px) {
  .article {
    flex-direction: column;
    height: auto;
  }

  .article-img {
    flex: none;
    width: 100%;
    height: auto;
  }

  .article-img img {
    position: static;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 17 / 9;
    object-fit: cover;
    border-radius: 5px 5px 0 0;
  }

  .article-text {
    padding: 8px 10px 28px;
  }

  .article-title {
    font-size: 1.7rem !important;
    line-height: 1.35 !important;
  }

  .article-snippet {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 8px !important;
  }
}

/* 1カラムでは「記事一覧」を非表示 */
@media(max-width: 1024px) {
  #Blog1 > .title {
    display: none;
  }
}

まとめ

今回は、F-lightのカードレイアウトを参考に、ブログの表示に合わせてさらにカスタマイズしてみました。

PCではこれまで通り横型、スマホでは写真を大きく見せる縦型にすることで、画面幅に合わせて記事一覧の見え方を変えています。

カード型記事一覧

しばらく使ってみて、また気になるところがあれば調整していこうと思います。

💖 読んでいただき有難うございました。

コメントを投稿

埋め込みフォームが開きます別ページに移動します