チャべログ

export const PostThumbnail = ({ post }) => (
  <div className={styles.thumbnail}>
    <Link href="/blog/[slug]" as={getBlogLink(post.Slug)} passHref>
      <img
        src={`/notion_images/${post.PageId}.png`}
        width={300}
        height={160}
        alt="thumbnail"
      />
    </Link>
  </div>
)

import {
  BlogPostLink,
  BlogTagLink,
  NextPageLink,
  NoContents,
  PostDate,
  PostExcerpt,
  PostTags,
  PostTitle,
  PostsNotFound,
  ReadMoreLink,
  PostThumbnail,  /*この行を追加*/
} from '../../../components/blog-parts'
import styles from '../../../styles/blog.module.css'
import * as imageCache from '../../../lib/notion/image-cache'  /*この行を追加*/

posts.forEach((p) => p.OGImage && imageCache.store(p.PageId, p.OGImage))

{posts.map((post) => {
  return (
    <div className={styles.post} key={post.Slug}>
      <div className={styles.postContair}>
        <div className={styles.thumbnail}>
          <PostThumbnail post={post} />
        </div>
        <div className={styles.postContent}>
          <PostDate post={post} />
          <PostTags post={post} />
          <PostTitle post={post} />
          <PostExcerpt post={post} />
          <ReadMoreLink post={post} />
        </div>
      </div>
    </div>
  )
})}

.post {
  margin: 0 auto 100px;  /*ここは変更*/
}

/*以下は追加*/
.postContair{
  display: flex;
  flex-direction: row;
  gap: 4vh;
  padding-bottom: 100px;;
  border-bottom: 1px solid #ddd;
}
.thumbnail{
  width:300px;
  cursor: pointer;
}
.postContent{
  width:100%;
}
@media (max-width: 1280px) {
  .postContair {
    flex-direction: column;
  }
  .thumbnail{
    width:100%;
    text-align: center;
  }
}

.mainContent footer {
  margin: 0 auto;
}