2024-03-19 18:20:22 -05:00
|
|
|
---
|
2024-12-22 01:11:02 -06:00
|
|
|
title: "サムネイル"
|
2024-06-19 11:53:52 -05:00
|
|
|
weight: 10
|
2024-03-19 18:20:22 -05:00
|
|
|
draft: false
|
2024-12-22 01:11:02 -06:00
|
|
|
description: "記事にサムネイル画像を設定する。"
|
2024-03-19 18:20:22 -05:00
|
|
|
slug: "thumbnails"
|
|
|
|
tags: ["thumbnail", "config", "docs"]
|
|
|
|
series: ["Documentation"]
|
|
|
|
series_order: 6
|
|
|
|
---
|
|
|
|
|
2024-12-22 01:11:02 -06:00
|
|
|
## サムネイル
|
2024-03-19 18:20:22 -05:00
|
|
|
|
2024-12-22 01:11:02 -06:00
|
|
|
Blowfish は、記事に視覚的な要素を簡単に追加できるように改良されました。サムネイル画像を設定するには、以下の例のように、記事のメインディレクトリ内に `feature*` で始まる画像ファイル (ほとんどすべての形式がサポートされていますが、`.png` または `.jpg` を推奨) を配置するだけです。
|
2024-03-19 18:20:22 -05:00
|
|
|
|
|
|
|
```shell
|
|
|
|
content
|
|
|
|
└── awesome_article
|
|
|
|
├── index.md
|
|
|
|
└── featured.png
|
|
|
|
```
|
|
|
|
|
2024-12-22 01:11:02 -06:00
|
|
|
このように配置することで、Blowfish は記事にサムネイル画像があることを認識し、ウェブサイト全体でサムネイルとして使用したり、ソーシャルプラットフォームで共有する際の <a target="_blank" href="https://oembed.com/">oEmbed</a> カード用画像として使用したりできます。
|
2024-03-19 18:20:22 -05:00
|
|
|
|
2024-12-22 01:11:02 -06:00
|
|
|
## フォルダ構成
|
2024-03-19 18:20:22 -05:00
|
|
|
|
2024-12-22 01:11:02 -06:00
|
|
|
記事を単一の `.md` ファイルで管理していて、次のようなファイル構成になっている場合:
|
2024-03-19 18:20:22 -05:00
|
|
|
|
|
|
|
```shell
|
|
|
|
content
|
|
|
|
└── awesome_article.md
|
|
|
|
```
|
|
|
|
|
2024-12-22 01:11:02 -06:00
|
|
|
単一の Markdown ファイルからフォルダ形式に変更する必要があります。記事と同じ名前のディレクトリを作成し、その中に `index.md` ファイルを作成します。以下のような構成になります。
|
2024-03-19 18:20:22 -05:00
|
|
|
|
|
|
|
```shell
|
|
|
|
content
|
|
|
|
└── awesome_article
|
|
|
|
└── index.md
|
|
|
|
```
|
|
|
|
|
2024-12-22 01:11:02 -06:00
|
|
|
あとは、前述のように画像を追加するだけです。設定例を確認したい場合は、[こちらのサンプル]({{< ref "thumbnail_sample" >}}) をご覧ください。
|
2024-03-19 18:20:22 -05:00
|
|
|
|
2024-12-22 01:11:02 -06:00
|
|
|
## ヒーロー画像
|
2024-03-19 18:20:22 -05:00
|
|
|
|
2024-12-22 01:11:02 -06:00
|
|
|
サムネイル画像は、デフォルトで各記事のヒーロー画像としても使用されます。サイト全体、または特定の記事ごとにこの機能を設定するには、`config/_default/params.toml` 内の `article.showHero`、または各記事のフロントマターパラメータ `showHero` を使用します。ヒーロー画像のスタイルを変更したい場合は、`./layouts/partials/` に `hero.html` というファイルを作成することで、テーマの元のパーシャルを上書きできます。
|