サイトのアイコンとロゴ

Theme は、色・タイポグラフィ・余白・レイアウトなど、Riebeckite サイトの見た目を決めます。一方で、サイトをそのサイトらしくするアイコン・ヘッダーのロゴ・リンクプレビュー画像は Theme の外側にあります。このガイドでは、これらのアセットを差し替えます。サイト全体の見た目を変えたい場合は最初の Theme を変えるを参照してください。

サイトアイコン

生成されたサイトには public/favicon.ico が含まれ、app/routes/_renderer.tsx から参照されています。

<link rel="icon" href="/favicon.ico" />

この構成のまま使う場合は、public/favicon.ico を同じ名前の ICO ファイルで置き換えます。コードの変更は不要です。

PNG や SVG を使う場合は、ファイルを public/ に置き、href を変更します。URL から形式が分からない場合は type も指定します。

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

ヘッダーのロゴ

starter と showcase の preset ではヘッダーが表示されます。app/components/site-header.tsx は、28×28 のロゴの隣にサイト名を表示します。

<img src="/riebeckite-logo.png" alt="" class="site-header__logo" width="28" height="28" />

public/riebeckite-logo.png を自分の画像に置き換えます。正方形で背景が透明な PNG がレイアウトになじみます。ファイル名を変える場合は src も合わせて変更します。

empty と minimal の preset にはヘッダーがないため、置き換えるロゴもありません。

リンクプレビュー画像

リンクプレビュー（Open Graph 画像）には、フォールバックとして site.defaultOgImage が使われます。riebeckite.config.ts の site に追加します。

site: {
  title: "My Blog",
  baseUrl: "https://example.com",
  defaultOgImage: "/ogp.png",
},

ファイルは public/ に置きます（この例では public/ogp.png が /ogp.png で配信されます）。1200×630 の PNG または JPEG が一般的なサイズです。site.baseUrl を実際の公開 URL に設定しておくと、生成されるメタデータの画像 URL が正しくなります。

ページごとに画像を上書きすることもできます。SEO Plugin は frontmatter の image / ogImage を読み取り、なければ site.defaultOgImage を使います。

タイトルと説明

site.title はサイト名、site.description は SEO や Feed で使われる説明です。サイト設定を確認するで一度だけ設定します。site ブロックの全体は Configuration を参照してください。

確認

開発サーバーを起動し、ブラウザのタブとヘッダーを確認します。

npm exec riebeckite dev

続けてビルドし、アセットが dist/ にコピーされることを確認します。

npm exec riebeckite build

History

1 changesCollapseExpand

From To

	1	`+ # サイトのアイコンとロゴ`
	2	`+`
	3	+ Theme は、色・タイポグラフィ・余白・レイアウトなど、Riebeckite サイトの見た目を決めます。一方で、サイトをそのサイトらしくするアイコン・ヘッダーのロゴ・リンクプレビュー画像は Theme の外側にあります。このガイドでは、これらのアセットを差し替えます。サイト全体の見た目を変えたい場合は [最初の Theme を変える](../getting-started/first-theme.ja.md) を参照してください。
	4	`+`
	5	`+ ## サイトアイコン`
	6	`+`
	7	+ 生成されたサイトには `public/favicon.ico` が含まれ、`app/routes/_renderer.tsx` から参照されています。
	8	`+`
	9	+ ```tsx
	10	`+ <link rel="icon" href="/favicon.ico" />`
	11	+ ```
	12	`+`
	13	+ この構成のまま使う場合は、`public/favicon.ico` を同じ名前の ICO ファイルで置き換えます。コードの変更は不要です。
	14	`+`
	15	+ PNG や SVG を使う場合は、ファイルを `public/` に置き、`href` を変更します。URL から形式が分からない場合は `type` も指定します。
	16	`+`
	17	+ ```tsx
	18	`+ <link rel="icon" href="/favicon.svg" type="image/svg+xml" />`
	19	+ ```
	20	`+`
	21	`+ ## ヘッダーのロゴ`
	22	`+`
	23	+ `starter` と `showcase` の preset ではヘッダーが表示されます。`app/components/site-header.tsx` は、28×28 のロゴの隣にサイト名を表示します。
	24	`+`
	25	+ ```tsx
	26	`+ <img src="/riebeckite-logo.png" alt="" class="site-header__logo" width="28" height="28" />`
	27	+ ```
	28	`+`
	29	+ `public/riebeckite-logo.png` を自分の画像に置き換えます。正方形で背景が透明な PNG がレイアウトになじみます。ファイル名を変える場合は `src` も合わせて変更します。
	30	`+`
	31	+ `empty` と `minimal` の preset にはヘッダーがないため、置き換えるロゴもありません。
	32	`+`
	33	`+ ## リンクプレビュー画像`
	34	`+`
	35	+ リンクプレビュー（Open Graph 画像）には、フォールバックとして `site.defaultOgImage` が使われます。`riebeckite.config.ts` の `site` に追加します。
	36	`+`
	37	+ ```ts
	38	`+ site: {`
	39	`+ title: "My Blog",`
	40	`+ baseUrl: "https://example.com",`
	41	`+ defaultOgImage: "/ogp.png",`
	42	`+ },`
	43	+ ```
	44	`+`
	45	+ ファイルは `public/` に置きます（この例では `public/ogp.png` が `/ogp.png` で配信されます）。1200×630 の PNG または JPEG が一般的なサイズです。`site.baseUrl` を実際の公開 URL に設定しておくと、生成されるメタデータの画像 URL が正しくなります。
	46	`+`
	47	+ ページごとに画像を上書きすることもできます。[SEO Plugin](../plugins/seo.ja.md) は frontmatter の `image` / `ogImage` を読み取り、なければ `site.defaultOgImage` を使います。
	48	`+`
	49	`+ ## タイトルと説明`
	50	`+`
	51	+ `site.title` はサイト名、`site.description` は SEO や Feed で使われる説明です。[サイト設定を確認する](../getting-started/installation.ja.md#サイト設定を確認する) で一度だけ設定します。`site` ブロックの全体は [Configuration](../reference/configuration.ja.md) を参照してください。
	52	`+`
	53	`+ ## 確認`
	54	`+`
	55	`+ 開発サーバーを起動し、ブラウザのタブとヘッダーを確認します。`
	56	`+`
	57	+ ```bash
	58	`+ npm exec riebeckite dev`
	59	+ ```
	60	`+`
	61	+ 続けてビルドし、アセットが `dist/` にコピーされることを確認します。
	62	`+`
	63	+ ```bash
	64	`+ npm exec riebeckite build`
	65	+ ```
	66	`+`