Gatsbyでアイキャッチを設定する

2021/02/05

前提

スターターにはgatsby-starter-blogを使用しています。

やりたいこと

ブログ記事にアイキャッチ用の画像を設定する。

やったこと

アイキャッチ用のコンポーネントを作成
コンポーネントにスタイル設定
ブログ記事テンプレートにアイキャッチ用コンポーネントを組み込み

コンポーネントを作成

色々いじってみて,ブログ記事テンプレートに直接書いちゃうか迷いましたけど, 暫定的にアイキャッチ用のコンポーネントを作成しました。

// src/components/eyecatch.js
import React from "react"

const EyeCatch = ({ title }) => {
  const hostUrl = "https://placehold.jp/"
  const size = {
    horizontal: 740,
    vertical: 457
  }
  const css = '{"background-color":"aliceblue","color":" #555555","font-size":" 35px","word-break":" break-all","padding":" 25px"}'
  const imageUrl =
      hostUrl + size.horizontal + "x" + size.vertical + ".png?css=" + encodeURIComponent(css) + "&text=" + title

  return (
    <img
      src={imageUrl}
      alt={title}
      className="eyecatch-img"
    />
  )
}

export default EyeCatch

VuePress時代と変わらず長いタイトルだと変なところで改行されてしまうので改良が必要です。。。

スタイル設定

作成したアイキャッチ用のコンポーネントにスタイルを当てていきます。

/* src/style.css */
.eyecatch-img {
  width: 100%;
  border-radius: 1rem;
}

style.cssに全てまとめて書かれてます。
Reactがコンポーネント指向なんでスタイルもコンポーネント毎に分割するのが基本だと思ってたんですけど, これはこれでありなんですかね？

テンプレートにコンポーネントを組み込み

作成したアイキャッチ用のコンポーネントを組み込みます。

// ==========(略)==========
const BlogPostTemplate = ({ data, location }) => {
  const post = data.markdownRemark
  const siteTitle = data.site.siteMetadata?.title || `Title`
  const { previous, next } = data

  return (
    <Layout location={location} title={siteTitle}>
      {/* ==========(略)========== */}
      <article
        className="blog-post"
        itemScope
        itemType="http://schema.org/Article"
      >
        <header>
          <EyeCatch title={post.frontmatter.title}/> {/* 追加 */}
          <p>{post.frontmatter.date}</p>
        </header>
        {/* ==========(略)========== */}
      </article>
      {/* ==========(略)========== */}
    </Layout>
  )
}

export default BlogPostTemplate
// ==========(略)==========

ひとこと

とりあえず,アイキャッチを表示できたけど満足は行ってないからちょっとずつ改良していきたい。
ブログを改良しつつそれ自体を記事にするのは意外と良いサイクルなんじゃないかと思ってます。
VuePress時代より情報が豊富なので,カスタマイズのモチベーションも高め。
デザインセンスがほしい！
あと,技術力も。
日々研鑽ですね。

それではまた明日。