|
2 | 2 |
|
3 | 3 | ## 環境構築・コマンド |
4 | 4 |
|
5 | | -`./docs/develop.md` を参照。 |
| 5 | +`./docs/develop.md` を参照してください。 |
6 | 6 |
|
7 | | -## Guidelines |
| 7 | +## `contents` ガイドライン |
8 | 8 |
|
9 | 9 | ### 一般 |
10 | 10 |
|
11 | | -フォーマッタは Prettier を用います。 |
12 | | -各フロントマッター (トップに書く YAML) のプロパティは `./docs/contents` に説明があります。 |
| 11 | +- フォーマッタは Prettier を用います。 |
| 12 | +- 各フロントマッター (トップに書く YAML) のプロパティは [./docs/contents](./docs/contents) に説明があります。 |
| 13 | + |
| 14 | +### 画像ファイル |
| 15 | + |
| 16 | +- HEIC は対応していないので、 ImageMagick で他のフォーマットに変換してください。 |
| 17 | + - 例: `magick picture.HEIC picture.webp` |
| 18 | +- すべての画像ファイルは 1 MB 未満に抑えてください。既存のものを変更したり、 CI でチェックしたりはまだ実装してないです。 |
| 19 | + |
| 20 | + - ffmpeg や ImageMagick を使い、解像度を下げたり、画質 (Quality) を下げたり、WebP (or AVIF) に変換するなどができます。 |
| 21 | + |
| 22 | + - 例: |
| 23 | + |
| 24 | + - `mogrify -resize 800x -quality 80 -format webp input.png` |
| 25 | + |
| 26 | + - ImageMagick についてきます。 |
| 27 | + - コマンドの引数は見ての通り。 |
| 28 | + |
| 29 | + - `ffmpeg -i ./input.png -vf 'scale=1920:-1' -crf 10 output.avif` |
| 30 | + |
| 31 | + - -> 50〜300kb 程度になります。AVIF の場合、多少 (数秒〜1分程度) 時間がかかります。 |
| 32 | + - `-vf scale={width}:{height}`: 画像の横幅。height が -1 のときは、横幅から計算する。 |
| 33 | + - `-crf`: 画像の圧縮率。大きいほうが圧縮率が高い。 |
13 | 34 |
|
14 | 35 | ### メンバー |
15 | 36 |
|
|
23 | 44 | - サムネイルは縦横比 3:5 にクロップされます。 |
24 | 45 |
|
25 | 46 | - 可能なら 3:5 に近い画像を使い、 |
26 | | - - できないかつクロップが許容できない場合は、 `fit: contain` と背景色 (`bg_color:`) を指定してください。 |
27 | | - |
28 | | -- 画像サイズは 1MB 未満に抑えてください。 ffmpeg や ImageMagick を使い、解像度を下げたり、画質 (Quality) を下げたり、WebP (or AVIF) に変換するなどができます。 |
29 | | - |
30 | | - - 参考 <https://stackoverflow.com/questions/7261855/recommendation-for-compressing-jpg-files-with-imagemagick> |
31 | | - - 例: |
32 | | - |
33 | | - - `mogrify -resize 800x -quality 80 -format webp *.png *.jpg *.jpeg` |
34 | | - - ImageMagick についてきます。 |
35 | | - - コマンドの引数は見ての通り。 |
36 | | - - `ffmpeg -i ./input.png -vf 'scale=1920:-1' -crf 10 output.avif` |
37 | | - - -> 50〜300kb 程度になります。AVIF の場合、多少 (数秒〜1分程度) 時間がかかります。 |
38 | | - - `-vf scale={width}:{height}`: 画像の横幅。height が -1 のときは、横幅から計算する。 |
39 | | - - `-crf`: 画像の圧縮率。大きいほうが圧縮率が高い。 |
40 | | - |
41 | | - - HEIC は対応していないので、 ImageMagick で他のフォーマットに変換してください。 |
42 | | - - 例: `magick picture.HEIC picture.webp` |
| 47 | + - できないかつクロップが許容できない場合は、 `thumbnail.fit: contain` と背景色 (`thumbnail.bg`) を指定してください。 |
43 | 48 |
|
44 | 49 | - 各記事のファイルサイズの合計は5 MB までに抑えてください。 |
45 | 50 | - 理想は 1MB 未満です。 |
46 | | - - ファイルサイズの確認には、`ncdu` が使いやすいです。 |
| 51 | + - ファイルサイズの確認には、`ncdu` が使いやすいです。 `ls -alh` でも可能です。 |
47 | 52 |
|
48 | 53 | ### プロジェクト |
49 | 54 |
|
50 | 55 | - サムネイルは縦横比 3:5 にクロップされます。 |
| 56 | + |
| 57 | +## Maintenance |
| 58 | + |
| 59 | +- Website のメンテナンス担当者は、[`./docs/maintainer.md`](./docs/maintainer.md) を参照してください。 |
0 commit comments