Chapter 12

記事リストの作成

ここでは、トップページ内の投稿した記事のリストを作成してきます。
記事データはHeadless CMSから取得したデータを表示するのですが、ここではハードコーディングします。コンポーネントの作成とスタイリングのみ行っていきます。

コーディング

コンポーネント

記事の画像・タイトル・説明・更新日を表示するコンポーネントを作成します。
RANDOM_IMGで指定しているURLは**「Unsplash」**と呼ばれるサービスのものです。プロのカメラマンが投稿した画像を無料でクレジットなしで使うことができます。ブログなどのカバー画像に迷ったときなどには非常に便利です。詳しいAPIの仕様はこちらをご覧ください。

// src/components/post-link.js
import React from "react"
import "../styles/post-link.css"

const RANDOM_IMG = "https://source.unsplash.com/collection/175083/640x360";

export default function PostLink() {
    return (
        <div className="post-link">
            <div>
                <img src={RANDOM_IMG} className="post-link-image" alt="post-cover"></img>
            </div>
            <div className="post-link-text">
                <h2>Gatsbyでブログを作成してみた</h2>
                <p className="post-link-body">先日、爆速なサイトを作れると噂のReact製フレームワークのGatsbyを学んでみました。</p>
                <p className="post-link-date">2020530</p>
            </div>
        </div>
    )
}

スタイリング

モバイルとPCで表示方法を変えています。
モバイル版の場合は縦長に、PC版の場合は横長に投稿が表示されるようにしています。
画像のサイズは記事のタイトルや説明の高さにフィットするように調整しています。

/* src/styles/post-link.css */
.post-link {
  display: grid;
  margin: 50px 0px;
}

.post-link-body {
  text-overflow: ellipsis;
  overflow-wrap: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  color: #434343;
}

.post-link-text {
  padding: 1rem;
}

.post-link-date {
  color: #595959;
}

.post-link-image {
    width: 100%;
    height: 100%;
    max-height: 200px;
    object-fit: cover;
}

@media screen and (max-width: 575px) {
  .post-link {
    grid-template-columns: 1fr;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 40px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .post-link-image {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
  }
}

@media screen and (min-width: 576px) {
  .post-link {
    grid-template-columns: 280px 1fr;
    grid-column-gap: 24px;
  }
  .post-link-image {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 30px 60px -10px, rgba(0, 0, 0, 0.33) 0px 18px 36px -18px;
    border-radius: 10px;
  }
}

コンポーネントの適用

作成したコンポーネントを呼び出します。
投稿データは無いので、同じPostLinkを呼び出すことで複数データがあるように表示します。

// src/pages/index.js
import React from "react"
import Layout from "../components/layout"
import Hero from "../components/hero"
import PostLink from "../components/post-link"

export default function Home() {
  return (
    <Layout>
      <Hero />
      <PostLink />
	  <PostLink />
	  <PostLink />
    </Layout>
  )
}

表示結果

トップページの見た目ができてきましたね。
post-link.png