Bloggerのフィードからブログカードを一気に作成(1)ー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;
}}

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

thumbnail

JR福知山線廃線敷ハイキング

兵庫県西宮市の武庫川沿いにかつて機関車が走っていたJR福知山線の廃線敷がハイキングコースとして一般開放されています。全長4.7kmで線路の枕木が残っていたりトンネルに入ったりとなかなか面白いハイキングコースでした。 ...

ブログカードのテンプレートが準備できました。これを1個1個手作業で作るのは大変ですね。ネットで検索するとJavaScriptでブックマークレットを作りURIを入れて作成する方法があり、便利ですがそれでも1個1個作るのは面倒です。そこで次はフィードから記事一覧を取得し、一気にブログカードを作りコピペできるようにしていきます!

関連記事

コメント