Gatsby×ブログ - 画像を横並びにする小技

2022.03.14 — Gatsby — 1 min read

記事を書いてるとき，画像を横に並べたくなったけど，なかなか上手くできなかったので，その時のメモ．

Flexとdivで囲う

使用プラグイン：gatsby-plugin-theme-ui

1---
2/*** Frontmatter ***/
3---
4import { Flex } from "theme-ui"
5
6## 記事-1
7
8<Flex sx={{
9    flexDirection: [`column`, `row`],
10    "& > *": { width: `100%` },
11}}>
12
13<div><img src="./image-1.png" alt="image-1" /></div>
14
15<div><img src="./image-2.png" alt="image-2" /></div>
16
17</Flex>
18
19## 記事-2

未解決

<img />タグでmagineを自動で取ってくる．使用しているスターターのテーマに依存すると思われるが，どこを直せばいいか分からない．

Tips

必要な場所で改行しないと，表示が変になる可能性大．
"& > *": { width: '100%' }を指定しないと，Gatsbyがimgの大きさを決定できないっぽくて，上手く挿入できない．
flexDirection: ['column', 'row']はモバイル時縦並び，PC時横並びのスタイル設定．

— Gatsby —