Bloggerのフィードからブログカードを一気に作成（１）ーHTMLのテンプレートとCSSを準備ー-しろうとチャリ改造日記

ブログ内に関連記事やおすすめの記事などのリンクを入れる際に、画像、題名、要約をまとめてブログカードにすると見栄えがよいですよね。はてなブログにはブログカード作成機能があったりします。WordPressだとプラグインで実現できるのでしょう。

Bloggerでは、「人気の投稿」ガジェットでアクセス数の多い上位数件をブログカードみたいに表示してくれる機能はありますが、特定の記事を自分で選んで作成するには使い勝手が良くありません。外部サービスのEmbedlyを使うとかなりいい感じの見栄えでブログカードを作ってくれますが、外部JavaScriptを読み込んで、Webフォントとかも読み込んだりするので自分でHTML+CSSで作ることにしました。

HTMLはこんなかんじにします。


<article class="blog-card">
  <a href="リンク先URI"  aria-label="タイトル">
    <img src="画像" width="160" height="90" alt="thumbnail" loading="lazy"/>
  </a>
  <div class="text-contents">
    <h3 class="title">
      <a href="リンク先URI">
	タイトル
      </a>
    </h3>
    <p>
       要約（本文の始めの数十文字）  ...
    </p>
  </div>
</article>

下記のCSSをBloggerのテンプレートに追加して体裁を整えます。テーマの「HTMLを編集」で、CSSの最後の方に下記を書き加えます。

display:flex;でFlexboxを使い画像とタイトル＋要約を左右に並べるのと、モバイルでは要約を表示しないのがポイントです。ブレークポイントは適当に500pxとしています。画像に関しては、16:9で、160px×90pxとして、縦横比の違う画像でもobject-fit:cover;ではみ出た部分をクロップして使います。


/* Blog Card */
.blog-card {
  display: flex;
  width: 100%;
  padding: 0.5rem 0;
}
.blog-card * {
  margin: 0;
  padding: 0;
}
.blog-card img {
  display: block;
  margin: 0;
  padding: 0;
  width: 160px;
  height: 90px;
  object-fit: cover;
}
.blog-card .text-contents {
  flex: 1;
  margin-left: 10px;
}
.blog-card .text-contents h4 {
  border: 0;
  margin: 0;
  padding: 0;
  font-weight: bold;
}
.blog-card .text-contents a {
  color: rgb(0, 0, 0);
}
.blog-card + .blog-card {
  border-top: 1px dashed #cccccc;
}
@media screen and (max-width: 500px) {
  .blog-card .text-contents p {
  display: none;
}}

これで作ったブログカードの例です。