Post

新しい投稿の書き方

Posted
By
25 min read

このページはテーマの書き方を日本語訳したものです。自身の記事作成用です。

このチュートリアルでは、_Chirpy_テンプレートで投稿を書く方法をガイドします。Jekyllを使ったことがある方でも、多くの機能で特定の変数を設定する必要があるため、読む価値があります。

ファイル名とパス

ルートディレクトリの_postsフォルダにYYYY-MM-DD-TITLE.EXTENSIONという名前の新しいファイルを作成します。EXTENSIONはmdまたはmarkdownである必要があります。ファイル作成の時間を節約したい場合は、Jekyll-Composeプラグインの使用を検討してください。

記法例:

1
2
3
4
5
6

# ファイル名の例
2024-01-15-my-first-post.md
2024-01-15-jekyll-tutorial.markdown

# 配置場所
_posts/2024-01-15-my-first-post.md

Front Matter

基本的に、投稿の先頭で以下のようにFront Matterを記入する必要があります：

1
2
3
4
5
6

---
title: TITLE
date: YYYY-MM-DD HH:MM:SS +/-TTTT
categories: [TOP_CATEGORY, SUB_CATEGORY]
tags: [TAG]     # TAG names should always be lowercase
---

記法説明:

1
2
3
4
5
6

---
title: 私の最初の投稿
date: 2024-01-15 10:30:00 +0900
categories: [ブログ, チュートリアル]
tags: [jekyll, markdown, 初心者]     # タグ名は常に小文字で
---

投稿の_layout_はデフォルトでpostに設定されているため、Front Matterブロックに_layout_変数を追加する必要はありません。

日付のタイムゾーン

投稿のリリース日を正確に記録するには、_config.ymlのtimezoneを設定するだけでなく、Front Matterブロックのdate変数でも投稿のタイムゾーンを指定する必要があります。

フォーマット: +/-TTTT（例：+0800）

記法例:

1
2
3
4
5

---
date: 2024-01-15 10:30:00 +0900  # 日本標準時
date: 2024-01-15 10:30:00 +0800  # 中国標準時
date: 2024-01-15 10:30:00 -0500  # 米国東部標準時
---

カテゴリとタグ

各投稿のcategoriesは最大2つの要素を含むように設計されており、tagsの要素数は0から無限まで可能です。例えば：

1
2
3
4

---
categories: [Animal, Insect]
tags: [bee]
---

記法例:

1
2
3
4
5
6
7
8
9
10

---
categories: [技術, プログラミング]       # 最大2つまで
tags: [javascript, react, tutorial]     # 任意の数
---

# または
---
categories: [ライフスタイル]             # 1つでも可
tags: []                               # 空でも可
---

著者情報

投稿の著者情報は通常_Front Matter_で記入する必要はありません。デフォルトでは設定ファイルのsocial.name変数とsocial.linksの最初のエントリから取得されます。しかし、以下のように上書きすることもできます：

_data/authors.ymlに著者情報を追加します（このファイルがない場合は作成してください）。

1
2
3
4

<author_id>:
  name: <full name>
  twitter: <twitter_of_author>
  url: <homepage_of_author>

記法例:

1
2
3
4
5
6
7
8
9
10

# _data/authors.yml の例
taro_yamada:
  name: 山田太郎
  twitter: taro_yamada
  url: https://yamada-taro.com

hanako_sato:
  name: 佐藤花子
  twitter: hanako_sato
  url: https://hanako-sato.jp

そしてauthorで単一のエントリを指定するか、authorsで複数のエントリを指定します：

1
2
3
4
5

---
author: taro_yamada                     # 単一エントリの場合
# または
authors: [taro_yamada, hanako_sato]     # 複数エントリの場合
---

authorキーは複数のエントリも識別できます。

_data/authors.ymlファイルから著者情報を読み取ることの利点は、ページにtwitter:creatorメタタグが追加され、Twitter Cardsが充実し、SEOに良い影響を与えることです。

投稿の説明

デフォルトでは、投稿の最初の単語がホームページの投稿一覧、_関連読み物_セクション、RSSフィードのXMLで表示されます。投稿の自動生成される説明を表示したくない場合は、_Front Matter_のdescriptionフィールドを使用してカスタマイズできます：

1
2
3

---
description: Short summary of the post.
---

記法例:

1
2
3

---
description: Jekyllでブログを始める方法を初心者向けに詳しく解説します。
---

さらに、descriptionテキストは投稿ページのタイトル下にも表示されます。

目次（Table of Contents）

デフォルトでは、目次（Table of Contents, TOC）が投稿の右パネルに表示されます。グローバルにオフにしたい場合は、_config.ymlでtoc変数の値をfalseに設定します。特定の投稿でTOCをオフにしたい場合は、投稿のFront Matterに以下を追加します：

1
2
3

---
toc: false
---

記法例:

1
2
3
4
5
6
7
8

# _config.yml でグローバル設定
toc: false

# 投稿個別の設定
---
title: 目次のない投稿
toc: false
---

コメント

コメントのグローバル設定は、_config.ymlファイルのcomments.providerオプションで定義されます。この変数でコメントシステムが選択されると、すべての投稿でコメントが有効になります。

特定の投稿でコメントを無効にしたい場合は、投稿のFront Matterに以下を追加します：

1
2
3

---
comments: false
---

記法例:

1
2
3
4
5
6
7
8
9
10
11

# _config.yml でのグローバル設定
comments:
  provider: disqus
  disqus:
    shortname: your-disqus-shortname

# 投稿個別の設定
---
title: コメント無しの投稿
comments: false
---

メディア

_Chirpy_では、画像、音声、動画をメディアリソースと呼びます。

URLプレフィックス

投稿内の複数のリソースに対して重複するURLプレフィックスを定義するのは退屈な作業ですが、2つのパラメータを設定することで回避できます。

  • メディアファイルのホスティングにCDNを使用している場合、_config.ymlでcdnを指定できます。サイトのアバターや投稿のメディアリソースのURLはCDNドメイン名でプレフィックスされます。

    1

    cdn: https://cdn.com

    記法例:

    1
2
3

    # _config.yml
cdn: https://cdn.example.com
# これにより、/assets/img/photo.jpg → https://cdn.example.com/assets/img/photo.jpg

  • 現在の投稿/ページ範囲のリソースパスプレフィックスを指定するには、投稿の_front matter_でmedia_subpathを設定します：

    1
2
3

    ---
media_subpath: /path/to/media/
---

    記法例:

    1
2
3
4
5

    ---
title: 旅行の写真
media_subpath: /assets/img/travel/2024/
---
# これにより、photo.jpg → /assets/img/travel/2024/photo.jpg

site.cdnとpage.media_subpathオプションは個別にも組み合わせても使用でき、最終的なリソースURLを柔軟に構成できます： [site.cdn/][page.media_subpath/]file.ext

組み合わせ例:

1
2
3
4
5
6
7
8
9

# _config.yml
cdn: https://cdn.example.com

# 投稿のFront Matter
---
media_subpath: /travel/japan/
---

# 結果: photo.jpg → https://cdn.example.com/travel/japan/photo.jpg

画像

キャプション

画像の次の行に斜体を追加すると、キャプションとなり画像の下部に表示されます：

1
2

![img-description](/path/to/image)
_Image Caption_

記法例:

1
2

![Tokyo Tower](/assets/img/tokyo-tower.jpg)
_東京タワーの美しい夜景_

サイズ

画像が読み込まれるときにページのコンテンツレイアウトがシフトするのを防ぐため、各画像に幅と高さを設定すべきです。

1

![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }

記法例:

1
2

![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }
![Mobile View](/assets/img/mobile.png){: width="300" height="600" }

SVGの場合、少なくとも_width_を指定する必要があります。そうしないとレンダリングされません。

_Chirpy v5.0.0_以降、heightとwidthは略記をサポートしています（height → h、width → w）。以下の例は上記と同じ効果です：

1

![Desktop View](/assets/img/sample/mockup.png){: w="700" h="400" }

略記例:

1
2

![Photo](/assets/img/photo.jpg){: w="500" h="300" }
![Icon](/assets/img/icon.svg){: w="100" }  # SVGは幅のみでもOK

位置

デフォルトでは画像は中央揃えですが、normal、left、rightのクラスのいずれかを使用して位置を指定できます。

位置が指定されている場合、画像キャプションは追加しないでください。

  • 通常位置

    以下のサンプルでは画像が左揃えになります：

    1

    ![Desktop View](/assets/img/sample/mockup.png){: .normal }

  • 左フロート

    1

    ![Desktop View](/assets/img/sample/mockup.png){: .left }

  • 右フロート

    1

    ![Desktop View](/assets/img/sample/mockup.png){: .right }

記法例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# キャプション付き中央揃え（デフォルト）
![Photo](/assets/img/photo.jpg){: w="500" h="300" }
_美しい景色の写真_

# 左揃え（キャプションなし）
![Photo](/assets/img/photo.jpg){: .normal w="400" h="250" }

# 左フロート（テキストが回り込み）
![Photo](/assets/img/photo.jpg){: .left w="200" h="150" }
このテキストは画像の右側に表示されます...

# 右フロート（テキストが回り込み）
![Photo](/assets/img/photo.jpg){: .right w="200" h="150" }
このテキストは画像の左側に表示されます...

ダーク/ライトモード

ダーク/ライトモードでテーマの設定に従って画像を表示させることができます。これには、2枚の画像（ダークモード用とライトモード用）を用意し、ひとつずつに特定のクラス（darkまたはlight）を割り当てる必要があります：

1
2

![Light mode only](/path/to/light-mode.png){: .light }
![Dark mode only](/path/to/dark-mode.png){: .dark }

記法例:

1
2
3

![Light mode screenshot](/assets/img/app-light.png){: .light w="600" h="400" }
![Dark mode screenshot](/assets/img/app-dark.png){: .dark w="600" h="400" }
_アプリのスクリーンショット（テーマに合わせて自動切り替え）_

シャドウ

プログラムウィンドウのスクリーンショットはシャドウ効果を表示することを検討できます：

1

![Desktop View](/assets/img/sample/mockup.png){: .shadow }

記法例:

1
2

![App Screenshot](/assets/img/app-screenshot.png){: .shadow w="800" h="500" }
_シャドウ付きのアプリスクリーンショット_

Preview Image

If you want to add an image at the top of the post, please provide an image with a resolution of 1200 x 630. Please note that if the image aspect ratio does not meet 1.91 : 1, the image will be scaled and cropped.

Knowing these prerequisites, you can start setting the image’s attribute:

1
2
3
4
5

---
#image:
  path: /path/to/image
  alt: image alternative text
---

Note that the media_subpath can also be passed to the preview image, that is, when it has been set, the attribute path only needs the image file name.

For simple use, you can also just use image to define the path.

1
2
3

---
#image: /path/to/image
---

LQIP

For preview images:

1
2
3
4

---
#image:
  lqip: /path/to/lqip-file # or base64 URI
---

You can observe LQIP in the preview image of post "Text and Typography".

For normal images:

1

![Image description](/path/to/image){: lqip="/path/to/lqip-file" }

Video

Social Media Platform

You can embed videos from social media platforms with the following syntax:

1

{% include embed/{Platform}.html id='{ID}' %}

Where Platform is the lowercase of the platform name, and ID is the video ID.

The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms.

Video URL Platform ID
https://www.youtube.com/watch?v=H-B46URT4mg youtube H-B46URT4mg
https://www.twitch.tv/videos/1634779211 twitch 1634779211
https://www.bilibili.com/video/BV1Q44y1B7Wf bilibili BV1Q44y1B7Wf

Video Files

If you want to embed a video file directly, use the following syntax:

1

{% include embed/video.html src='{URL}' %}

Where URL is a URL to a video file e.g. /path/to/sample/video.mp4.

You can also specify additional attributes for the embedded video file. Here is a full list of attributes allowed.

  • poster='/path/to/poster.png' — poster image for a video that is shown while video is downloading
  • title='Text' — title for a video that appears below the video and looks same as for images
  • autoplay=true — video automatically begins to play back as soon as it can
  • loop=true — automatically seek back to the start upon reaching the end of the video
  • muted=true — audio will be initially silenced
  • types — specify the extensions of additional video formats separated by |. Ensure these files exist in the same directory as your primary video file.

Consider an example using all of the above:

1
2
3
4
5
6
7
8
9
10

{%
  include embed/video.html
  src='/path/to/video.mp4'
  types='ogg|mov'
  poster='poster.png'
  title='Demo video'
  autoplay=true
  loop=true
  muted=true
%}

Audios

If you want to embed an audio file directly, use the following syntax:

1

{% include embed/audio.html src='{URL}' %}

Where URL is a URL to an audio file e.g. /path/to/audio.mp3.

You can also specify additional attributes for the embedded audio file. Here is a full list of attributes allowed.

  • title='Text' — title for an audio that appears below the audio and looks same as for images
  • types — specify the extensions of additional audio formats separated by |. Ensure these files exist in the same directory as your primary audio file.

Consider an example using all of the above:

1
2
3
4
5
6

{%
  include embed/audio.html
  src='/path/to/audio.mp3'
  types='ogg|wav|aac'
  title='Demo audio'
%}

固定投稿

ホームページの上部に1つまたは複数の投稿を固定（ピン留め）することができ、固定された投稿はリリース日に従って逆順でソートされます。有効にするには：

1
2
3

---
pin: true
---

記法例:

1
2
3
4
5
6
7

---
title: 重要なお知らせ
pin: true
date: 2024-01-15 10:00:00 +0900
---

# 複数の投稿を固定する場合、新しい日付の投稿が上位に表示されます

プロンプト

プロンプトにはいくつかのタイプがあります：tip、info、warning、danger。これらは引用ブロックにprompt-{type}クラスを追加することで生成できます。例えば、infoタイプのプロンプトを以下のように定義します：

1
2

> Example line for prompt.
{: .prompt-info }

記法例:

1
2
3
4
5
6
7
8
9
10
11

> これはヒントです。
{: .prompt-tip }

> これは情報です。
{: .prompt-info }

> これは警告です。
{: .prompt-warning }

> これは危険な情報です。
{: .prompt-danger }

構文

インラインコード

1

`inline code part`

記法例:

1

この`console.log("Hello World")`はインラインコードです。

ファイルパスハイライト

1

`/path/to/a/file.extend`{: .filepath}

記法例:

1
2

設定ファイルは`_config.yml`{: .filepath}にあります。
スタイルは`/assets/css/style.css`{: .filepath}で管理しています。

Code Block

Markdown symbols ``` can easily create a code block as follows:

1
2
3

```
This is a plaintext code snippet.
```

Specifying Language

Using ```{language} you will get a code block with syntax highlight:

1
2
3

```yaml
key: value
```

The Jekyll tag {% highlight %} is not compatible with this theme.

Line Number

By default, all languages except plaintext, console, and terminal will display line numbers. When you want to hide the line number of a code block, add the class nolineno to it:

1
2
3
4

```shell
echo 'No more line numbers!'
```
{: .nolineno }

Specifying the Filename

You may have noticed that the code language will be displayed at the top of the code block. If you want to replace it with the file name, you can add the attribute file to achieve this:

1
2
3
4

```shell
# content
```
{: file="path/to/file" }

Liquid Codes

If you want to display the Liquid snippet, surround the liquid code with {% raw %} and {% endraw %}:

1
2
3
4
5
6
7

{% raw %}
```liquid
{% if product.title contains 'Pack' %}
  This product's title contains the word Pack.
{% endif %}
```
{% endraw %}

Or adding render_with_liquid: false (Requires Jekyll 4.0 or higher) to the post’s YAML block.

数学

数学の生成にはMathJaxを使用します。ウェブサイトのパフォーマンス上の理由から、数学機能はデフォルトでは読み込まれません。しかし、以下のように有効にできます：

1
2
3

---
math: true
---

数学機能を有効にした後、以下の構文で数学式を追加できます：

  • ブロック数学は$$ math $$で追加し、$$の前後に必須の空行を入れます
    • 数式番号の挿入は$$\begin{equation} math \end{equation}$$で追加します
    • 数式番号の参照は、数式ブロック内で\label{eq:label_name}、テキストインラインで\eqref{eq:label_name}を使用します（以下の例を参照）
  • インライン数学（行内）は$$ math $$で追加し、$$の前後に空行は入れません
  • インライン数学（リスト内）は\$$ math $$で追加します
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- ブロック数学、すべての空行を保持 -->

$$
LaTeX_math_expression
$$

<!-- 数式番号、すべての空行を保持 -->

$$
\begin{equation}
  LaTeX_math_expression
  \label{eq:label_name}
\end{equation}
$$

\eqref{eq:label_name}として参照できます。

<!-- 行内インライン数学、空行なし -->

"この文章には $$ LaTeX_math_expression $$ 数式が含まれています。"

<!-- リスト内インライン数学、最初の`$`をエスケープ -->

1. \$$ LaTeX_math_expression $$
2. \$$ LaTeX_math_expression $$
3. \$$ LaTeX_math_expression $$

実際の記法例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

---
title: 数学の例
math: true
---

# 二次方程式の解

$$
\begin{equation}
  x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}
  \label{eq:quadratic}
\end{equation}
$$

上記の\eqref{eq:quadratic}は二次方程式の解の公式です。

変数 $$ a \neq 0 $$ の場合に適用できます。

リストでの使用例：
1. \$$ E = mc^2 $$
2. \$$ \pi \approx 3.14159 $$
3. \$$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$

Starting with v7.0.0, configuration options for MathJax have been moved to file assets/js/data/mathjax.js, and you can change the options as needed, such as adding extensions.
If you are building the site via chirpy-starter, copy that file from the gem installation directory (check with command bundle info --path jekyll-theme-chirpy) to the same directory in your repository.

Mermaid

Mermaidは優秀な図表生成ツールです。投稿で有効にするには、YAMLブロックに以下を追加します：

1
2
3

---
mermaid: true
---

その後、他のMarkdown言語と同じように使用できます：グラフコードを```mermaidと```で囲みます。

記法例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

---
title: フローチャートの例
mermaid: true
---

```mermaid
flowchart TD
    A[開始] --> B{条件判定}
    B -->|Yes| C[処理A]
    B -->|No| D[処理B]
    C --> E[終了]
    D --> E
```

```mermaid
gantt
    title プロジェクトスケジュール
    dateFormat  YYYY-MM-DD
    section 設計
    要件定義           :done,    des1, 2024-01-01, 2024-01-05
    システム設計       :active,  des2, 2024-01-06, 3d
    section 開発
    コーディング         :         dev1, after des2, 1w
    テスト             :         test1, after dev1, 3d
```

さらに学ぶ

Jekyll投稿についてさらに学ぶには、Jekyll Docs: Postsをご覧ください。

ブログ, チュートリアル
書き方
This post is licensed under CC BY 4.0 by the author.

© taroru. Some rights reserved.

Using the Chirpy theme for Jekyll.