Skip to content

Commit 9dbafa9

Browse files
nedewnedew
committed
スマホ表示の見出しサイズの調整・記事の微修正
1 parent c1e0170 commit 9dbafa9

File tree

5 files changed

+36
-161
lines changed

5 files changed

+36
-161
lines changed

‎articles/202104040000_38226_made-blog-with-nextjs.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ date: "2021-04-04-00-00"
44
tags: [nextjs, mdx, blog]
55
---
66

7-
Next.jsで自分用のブログを作った（このブログ）ので、開発時に工夫した事を書こうと思います。
7+
Next.jsで自分用のブログを作った（このブログ）ので、開発時に工夫した事を簡単に書こうと思います。
88

99
ブログとしての基本的な機能はだいぶ前に出来ていたものの、CSSとかOGP辺りの見た目の部分が面倒で後回しにしていたら年明けるどころか桜咲いてました。
1010
何か明確な用途があったから作ったわけではなくReact周りの技術で何か作りたくて作った感じなので、継続して更新するかは分かりませんが、せっかく作ったからには色々書きたい気持ちです。
@@ -51,7 +51,7 @@ export default ({children}) => {
5151
- ビルド時にファイル名やFront Matterから記事のメタデータを拾ったりしたかったので、そういう対象のファイルが`pages`以下にあるのは何か違う気がした
5252

5353

54-
回避策として`pages/articles/[slug].ts`で記事ページへのリクエストを受けて、対応する記事を [Dynamic import](https://nextjs.org/docs/advanced-features/dynamic-import) して表示するようにしてます。
54+
代わりに`pages/articles/[slug].ts`で記事ページへのリクエストを受けて、対応する記事を [Dynamic import](https://nextjs.org/docs/advanced-features/dynamic-import) して表示するようにしてます。
5555

5656
MDXの文書そのままでは当然import出来ないのでwebpackのLoaderを通す必要があります。
5757
`next.config.js`を以下の様に編集し、拡張子が`.mdx`のファイルは`@mdx-js/loader`を通します。
@@ -187,7 +187,7 @@ fs.writeFileSync(path.join(process.cwd(), 'gen/articles.json'), json)
187187
若干力技な感じもしていて、もう少しいい方法無いかなーとも思ったんですが、とりあえずJSONに吐き出しておけば再利用もしやすいのでまあ良いかという気持ちです。
188188

189189
余談ですがこの記事書く時に Front Matter の正しい名称が分からなくて困った。
190-
人によって「YAML Front Matter」だったり「Frontmatter」だったり「Front-matter」だったりと表記ゆれが激しくて、結局今もどれが正しいのか分かってないです（特に統一されてない...？）。
190+
人によって「YAML Front Matter」だったり「Frontmatter」だったり「Front-matter」だったりと表記ゆれが激しくて、結局今もどれが正しいのか分かってないです（特に統一とかされてない...？）。
191191

192192

193193

‎components/styles/article.module.scss

+23-2
Original file line numberDiff line numberDiff line change
@@ -167,15 +167,36 @@
167167
font-size: 29px;
168168
}
169169
h3 {
170-
font-size: 24px;
170+
font-size: 25px;
171171
}
172172
h4 {
173-
font-size: 21px;
173+
font-size: 22px;
174174
}
175175
h5 {
176176
font-size: 18px;
177177
}
178178
h6 {
179179
font-size: 15px;
180180
}
181+
182+
@media screen and (max-width: $breakPoint) {
183+
h1 {
184+
font-size:29px;
185+
}
186+
h2 {
187+
font-size: 26px;
188+
}
189+
h3 {
190+
font-size: 23px;
191+
}
192+
h4 {
193+
font-size: 20px;
194+
}
195+
h5 {
196+
font-size: 16px;
197+
}
198+
h6 {
199+
font-size: 15px;
200+
}
201+
}
181202
}

‎gen/articleIds.json

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
11
{
2-
"13990": "202009120358_13990_develop-test-3.mdx",
3-
"38226": "202012310000_38226_made-blog-with-nextjs.mdx",
4-
"64403": "202008271034_64403_develop-test-1.mdx",
5-
"75234": "202012290656_75234_markdown-style-test.mdx",
6-
"80520": "202008301100_80520_develop-test-2.mdx"
2+
"38226": "202104040000_38226_made-blog-with-nextjs.mdx"
73
}

‎gen/articles.json

+4-59
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,14 @@
11
[
2-
{
3-
"slug": "64403",
4-
"fileName": "202008271034_64403_develop-test-1.mdx",
5-
"fm": {
6-
"title": "これはテストのタイトルReact_Next.jsですこれはテストのタイトルReact_Next.jsですこれはテストのタイトルReact_Next.jsです - 1",
7-
"date": "2020-10-02-04-19",
8-
"tags": [
9-
"dev",
10-
"nextjs",
11-
"react"
12-
]
13-
}
14-
},
15-
{
16-
"slug": "80520",
17-
"fileName": "202008301100_80520_develop-test-2.mdx",
18-
"fm": {
19-
"title": "ランダム文字列を生成して、テスト記事の本文として記載したもの - 2",
20-
"date": "2020-10-03-15-38",
21-
"tags": [
22-
"dev",
23-
"nextjs",
24-
"react",
25-
"test",
26-
"discordjs"
27-
]
28-
}
29-
},
30-
{
31-
"slug": "13990",
32-
"fileName": "202009120358_13990_develop-test-3.mdx",
33-
"fm": {
34-
"title": "本文無しのテスト記事だよ - 3",
35-
"date": "2020-10-04-22-19",
36-
"tags": [
37-
"dev",
38-
"nextjs",
39-
"react",
40-
"test",
41-
"programming"
42-
]
43-
}
44-
},
45-
{
46-
"slug": "75234",
47-
"fileName": "202012290656_75234_markdown-style-test.mdx",
48-
"fm": {
49-
"title": "Mdxで書けるMarkdownのスタイル確認",
50-
"date": "2020-12-29-06-56",
51-
"tags": [
52-
"mdx",
53-
"markdown",
54-
"blog"
55-
]
56-
}
57-
},
582
{
593
"slug": "38226",
60-
"fileName": "202012310000_38226_made-blog-with-nextjs.mdx",
4+
"fileName": "202104040000_38226_made-blog-with-nextjs.mdx",
615
"fm": {
626
"title": "Next.jsでブログを作った",
63-
"date": "2020-12-31-00-00",
7+
"date": "2021-04-04-00-00",
648
"tags": [
659
"nextjs",
66-
"mdx"
10+
"mdx",
11+
"blog"
6712
]
6813
}
6914
}

‎gen/tagMap.json

+5-92
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,23 @@
11
{
2-
"dev": [
3-
{
4-
"slug": "64403",
5-
"title": "これはテストのタイトルReact_Next.jsですこれはテストのタイトルReact_Next.jsですこれはテストのタイトルReact_Next.jsです - 1",
6-
"date": "2020-10-02-04-19"
7-
},
8-
{
9-
"slug": "80520",
10-
"title": "ランダム文字列を生成して、テスト記事の本文として記載したもの - 2",
11-
"date": "2020-10-03-15-38"
12-
},
13-
{
14-
"slug": "13990",
15-
"title": "本文無しのテスト記事だよ - 3",
16-
"date": "2020-10-04-22-19"
17-
}
18-
],
192
"nextjs": [
20-
{
21-
"slug": "64403",
22-
"title": "これはテストのタイトルReact_Next.jsですこれはテストのタイトルReact_Next.jsですこれはテストのタイトルReact_Next.jsです - 1",
23-
"date": "2020-10-02-04-19"
24-
},
25-
{
26-
"slug": "80520",
27-
"title": "ランダム文字列を生成して、テスト記事の本文として記載したもの - 2",
28-
"date": "2020-10-03-15-38"
29-
},
30-
{
31-
"slug": "13990",
32-
"title": "本文無しのテスト記事だよ - 3",
33-
"date": "2020-10-04-22-19"
34-
},
353
{
364
"slug": "38226",
375
"title": "Next.jsでブログを作った",
38-
"date": "2020-12-31-00-00"
39-
}
40-
],
41-
"react": [
42-
{
43-
"slug": "64403",
44-
"title": "これはテストのタイトルReact_Next.jsですこれはテストのタイトルReact_Next.jsですこれはテストのタイトルReact_Next.jsです - 1",
45-
"date": "2020-10-02-04-19"
46-
},
47-
{
48-
"slug": "80520",
49-
"title": "ランダム文字列を生成して、テスト記事の本文として記載したもの - 2",
50-
"date": "2020-10-03-15-38"
51-
},
52-
{
53-
"slug": "13990",
54-
"title": "本文無しのテスト記事だよ - 3",
55-
"date": "2020-10-04-22-19"
56-
}
57-
],
58-
"test": [
59-
{
60-
"slug": "80520",
61-
"title": "ランダム文字列を生成して、テスト記事の本文として記載したもの - 2",
62-
"date": "2020-10-03-15-38"
63-
},
64-
{
65-
"slug": "13990",
66-
"title": "本文無しのテスト記事だよ - 3",
67-
"date": "2020-10-04-22-19"
68-
}
69-
],
70-
"discordjs": [
71-
{
72-
"slug": "80520",
73-
"title": "ランダム文字列を生成して、テスト記事の本文として記載したもの - 2",
74-
"date": "2020-10-03-15-38"
75-
}
76-
],
77-
"programming": [
78-
{
79-
"slug": "13990",
80-
"title": "本文無しのテスト記事だよ - 3",
81-
"date": "2020-10-04-22-19"
6+
"date": "2021-04-04-00-00"
827
}
838
],
849
"mdx": [
85-
{
86-
"slug": "75234",
87-
"title": "Mdxで書けるMarkdownのスタイル確認",
88-
"date": "2020-12-29-06-56"
89-
},
9010
{
9111
"slug": "38226",
9212
"title": "Next.jsでブログを作った",
93-
"date": "2020-12-31-00-00"
94-
}
95-
],
96-
"markdown": [
97-
{
98-
"slug": "75234",
99-
"title": "Mdxで書けるMarkdownのスタイル確認",
100-
"date": "2020-12-29-06-56"
13+
"date": "2021-04-04-00-00"
10114
}
10215
],
10316
"blog": [
10417
{
105-
"slug": "75234",
106-
"title": "Mdxで書けるMarkdownのスタイル確認",
107-
"date": "2020-12-29-06-56"
18+
"slug": "38226",
19+
"title": "Next.jsでブログを作った",
20+
"date": "2021-04-04-00-00"
10821
}
10922
]
11023
}

0 commit comments

Comments
 (0)