エンジニアなら自分でブログを作れ！④レイアウト変更編

この記事は「エンジニアなら自分でブログを作れ！」の第四弾です。
過去の記事の実装が前提になっている可能性もあります。特に第一弾では無料の自作ブログを作成するために必要な導入について解説しているので良ければ一緒にご覧ください。

第一弾↓

https://zenn.dev/miketako3/articles/9b2b1a9ec13901

第二弾↓

https://zenn.dev/miketako3/articles/bfdc1b09ba8ed3

第三段↓

https://zenn.dev/miketako3/articles/66e1cc17193168

この記事はNext.jsの
blog-starter
(公式のデモページ)
について、記事一覧ページのレイアウトを変える例として、Zenn風味のレイアウトにしてみたいと思います。

今回は細かい変更が多くなってしまうので、Githubのリンクを張る形にしています。

また、不要なコードが残っていたりする場合がありますが、変更箇所を少なくするためにあえて残しています。

Before

After

Zennのレイアウト

不要な要素の削除

https://github.com/miketako3/blog-example/commit/cf7d9b3d8f7c1967202834ea270550e835f7975f

この記事ではシンプルに記事一覧部分をZenn風にすることを目指します。ですので、一旦不要な箇所を削りましょう。例えば記事一覧における各記事の要約や、最初の記事の拡大表示などです。

ついでに背景色もZennっぽく水色にしましょう。

レイアウトの変更

https://github.com/miketako3/blog-example/commit/36866acc51fd041feb73898de463b9f57ad684da

記事一覧をZenn風味にしてみましょう。

すでに縦二列のレイアウトやアイコン、著者などの情報はあるので、それらをReactとTailwindCSSを使って配置しなおしてみましょう。

この辺りはゴリゴリ書くだけなので特筆することはありませんが、強いて挙げるとするならカバー写真だけ固定幅でタイトル部分を変動幅にする方法でしょうか。

https://www.aizulab.com/blog/css-flexbox-liquid-layout/

この辺りの記事を参考にReactとTailwindCSSで書き直すと次のようになります。親要素に flex-row を、カバーイメージには固定幅を、記事名等の要素はまとめて flex-1
をつけています。

components/post-preview.tsx

const PostPreview = ({
  title,
  coverImage,
  date,
  excerpt,
  author,
  slug,
}: Props) => {
  return (
    <div className="flex flex-row">
      <div className="w-32 h-32">
        <CoverImage slug={slug} title={title} src={coverImage} />
      </div>
      <div className="flex-1 ml-4">
        <h3 className="text-xl">
          <Link as={`/posts/${slug}`} href="/posts/[slug]">
            <a className="hover:underline">{title}</a>
          </Link>
        </h3>
        <div className="flex flex-row">
          <Avatar name={author.name} picture={author.picture} />
          <div className="font-bold text-xs my-auto mx-2">
            <DateFormatter dateString={date} />
          </div>
        </div>
      </div>
    </div>
  )
}

第二弾の記事でもお伝えしましたが、
className
の部分は基本的にTailwindCSSのものです。検索すれば出てくるので適宜検索しましょう。ここで逐一解説することもできますが、あえてしないことにします。

この記事は「エンジニアが自分のオリジナルブログを作成する」ことを目的としており、みなさんにはデザインをコピペするのではなくそれぞれオリジナルの実装ができるようになってほしいです。わからないところは是非自分で検索してみましょう。

(また、私がフロントエンドの専門家では無いので、不適切な実装になっている可能性もあります。自分でより良い実装を探してみましょう。)

React, TypeScript, TailwindCSSの参考資料を載せておきますので、みなさんもこれを見て好きなように実装してみてください。

https://typescript-jp.gitbook.io/deep-dive/

https://ja.reactjs.org/tutorial/tutorial.html

https://tailwindcss.com/docs/installation

まとめ

この記事ではNext.jsで書かれたブログの記事一覧をZenn風のレイアウトにする実装を紹介しました。

みなさんの独自ブログの参考になれば幸いです。

次回はそろそろ機能追加について解説したいのですが、分量が多くなりそうなので時間がかかるかもしれません。

最後に、私の投稿はZenn以外の投稿もまとめて以下ブログで取得できますので、良ければ見てみてください。

https://blog.miketako.xyz

追記

次回

https://zenn.dev/miketako3/articles/519f5fbd1f5042