Markdown ショーケース

2026-05-10T00:00:00+00:00

このページはテーマの表示確認用サンプルです。</p>

見出し</h2>

h3 見出し</h3>

h4 見出し</h4>

テキスト</h2>
通常のテキストです。太字</strong>、イタリック</em>、取り消し線</del>、`インラインコード</code> が使えます。</p>`

リスト</h2> りんご</li> みかん</li> ぶどう巨峰</li> マスカット</li> </ul> </li> </ul> 番号付きリスト：</p> 第一に</li> 第二に</li> 第三に</li> </ol> 引用</h2> 吾輩は猫である。名前はまだない。</p> </blockquote> コードブロック</h2> fn main() { println!("Hello, world!"); } </code></pre> [extra] name = "avel demo" font = "serif" </code></pre> 表</h2> テーマ</th> JS</th> CSS</th> 特徴</th></tr></thead> avel</td> ゼロ</td> 最小限</td> 阿部寛風</td></tr> その他</td> 多め</td> 重め</td> 普通</td></tr> </tbody></table> 水平線</h2> リンク</h2> GitHub</a></p> avel の趣旨 2025-11-15T00:00:00+00:00 Web は複雑になりすぎた。</p> ページを開くたびに何十もの外部スクリプトが走り、トラッキングされ、フレームワークが初期化される。ブログを書くだけなのになぜこれほど重いのか。</p> avel はその問いへの答えだ。</p> 書いたことが伝われば十分。JS もアニメーションもリアルタイム更新も要らない。テキストと最低限の構造と読めるフォントがあれば、ブログは成立する。</p> Zola は Rust 製の静的サイトジェネレーター。ビルドが速く、依存関係がなく、生成される HTML はシンプルだ。avel はその Zola の上に何も足さない方向で作ってある。</p> 引き算の美学。</p> 阿部寛のホームページへのリスペクト 2025-11-01T00:00:00+00:00 阿部寛のホームページ</a> を知っているか。</p> 俳優・阿部寛の公式ホームページだ。テーブルレイアウト、青いリンク、薄紫のサイドバー、小さなフォント。1990年代後半の Web デザインそのままで、今日も変わらず存在している。</p> 話題になる理由は速さだ。世界中のどのサイトと比べても最速クラスに入る。演出もアニメーションも追跡スクリプトも何もない。ただ情報だけがある。</p> avel はそのデザイン哲学をテーマとして再現したものだ。見た目の古さは意図的。速さと潔さへのリスペクトだ。</p> むちゃくちゃ速い 2025-10-15T00:00:00+00:00 avel で作ったページは速い。</p> JS がないのでパース・実行コストがゼロ。外部リソースがないので DNS 解決も追加リクエストも発生しない。CSS はインラインなので別ファイルを取りに行かない。</p> HTML 1 ファイルをダウンロードすれば即表示される。</p> Lighthouse の Performance・Accessibility・Best Practices・SEO はすべて満点近くを記録する。低速回線でも古いスマートフォンでも遅いとは感じないはずだ。</p> 阿部寛のホームページが速いのも同じ理由。余計なものが何もない。</p> getzola.org/themes への登録 2025-10-01T00:00:00+00:00 avel は getzola.org/themes</a> に登録されています。</p> Zola テーマの登録は、公式リポジトリへの PR で行います。theme.toml</code> に必要な情報を記載し、デモ URL とスクリーンショットを添えます。</p> avel の theme.toml</code>:</p> name = "avel" description = "A minimal, no-JS Zola theme. Inspired by Abe Hiroshi's homepage." license = "MIT" homepage = "https://github.com/kako-jun/avel" min_version = "0.19.0" demo = "https://avel.llll-ll.com" tags = ["blog", "minimal", "no-js"] </code></pre> 画像の埋め込み 2025-09-15T00:00:00+00:00 static/</code> に画像を置いて Markdown で参照する。</p> ![説明文](/sample.svg) </code></pre> Markdown で書いた画像には自動的に loading="lazy"</code> が付く（config.toml</code> の lazy_async_image = true</code> による）。</p> 実際の表示：</p> </p> HTML で直書きする場合は手動で指定する。CLS 防止のため width</code>・height</code> も両方書く。</p> <img src="/sample.svg" width="320" height="120" alt="sample image" loading="lazy"> </code></pre> Atom フィード 2025-09-01T00:00:00+00:00 avel は Atom フィードを自動生成します。サイドバー下部の「Atom」リンクから購読できます。</p> config.toml</code> で有効化します（デフォルトで有効）。</p> generate_feeds = true feed_filenames = ["atom.xml"] </code></pre> フィードは /atom.xml</code> で配信されます。RSS リーダーにこの URL を登録してください。</p> ページネーションの設定 2025-08-15T00:00:00+00:00 content/posts/_index.md</code> に paginate_by</code> を追加する。</p> +++ title = "Posts" sort_by = "date" paginate_by = 10 +++ </code></pre> ページが複数になると記事一覧の下に前後リンクが出る。</p> トップ（/</code>）は最新 5 件のみ表示。記事一覧（/posts/</code>）はページネーション付きの全件表示。</p> タグの使い方 2025-08-01T00:00:00+00:00 config.toml</code> に taxonomy を追加する。</p> [[taxonomies]] name = "tags" url = "tags" feed = false lang = "ja" </code></pre> 記事のフロントマターにタグを書く。</p> +++ title = "記事タイトル" date = 2025-08-01 [taxonomies] tags = ["foo", "bar"] +++ </code></pre> /tags/</code> にタグ一覧、/tags/{name}/</code> にタグ別記事一覧が生成される。</p> リンク色の変更 2025-07-20T00:00:00+00:00 デフォルト値は古典的なブラウザのデフォルトに合わせてある。</p> キー</th> デフォルト</th> 用途</th></tr></thead> link_color</code></td> #0000cc</code></td> 未訪問リンク</td></tr> link_visited</code></td> #551a8b</code></td> 訪問済みリンク</td></tr> </tbody></table> [extra] link_color = "#cc0000" link_visited = "#880000" </code></pre> リンクはデフォルトで下線付き。これも意図的。</p> 背景画像の設定 2025-07-10T00:00:00+00:00 このサイトの背景は SVG ファイルをタイル表示したもの。</p> [extra] background_image = "bg.svg" </code></pre> static/</code> に置いた画像ファイルを指定する。小さい画像は自動的にタイル表示される。</p> 背景色のみ</h2> [extra] body_bg = "#fffff0" </code></pre> フォントの変更 2025-07-01T00:00:00+00:00 デフォルトは sans-serif</code>（システムのゴシック体）。</p> システムフォント</h2> [extra] font = "serif" font_family = "Georgia" font_size = "14px" </code></pre> 外部リクエストなしで完結する。</p> Google Fonts</h2> [extra] google_fonts_url = "https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" font_family = "Noto Serif JP" font = "serif" </code></pre> 初回だけ Google のサーバーへリクエストが発生する。</p> ナビゲーションのカスタマイズ 2025-06-15T00:00:00+00:00 サイドバーのリンクは config.extra.nav</code> で定義する。</p> [extra] nav = [ { label = "トップ", url = "/" }, { label = "記事一覧", url = "/posts/" }, { label = "タグ一覧", url = "/tags/" }, { label = "GitHub", url = "https://github.com/yourname" }, ] </code></pre> nav</code> を設定しない場合はデフォルトのナビ（トップ・記事一覧）が表示される。</p> 箇条書き記号</h2> [extra] nav_bullet = "■" # ■ ● ▶ など </code></pre> プロフィール画像の設定 2025-06-10T00:00:00+00:00 サイドバーにプロフィール画像と名前を出す。</p> [extra] name = "Your Name" profile_image = "me.webp" profile_width = "120" profile_height = "120" </code></pre> 画像は static/</code> に置く。width</code>・height</code> を指定しないとデフォルト値 120</code> が使われる。CLS 防止のため両方指定しておくのが無難。</p> インストール方法 2025-06-05T00:00:00+00:00 git submodule で追加する。</p> cd your-zola-site git submodule add https://github.com/kako-jun/avel themes/avel </code></pre> config.toml</code> にテーマを指定する。</p> theme = "avel" </code></pre> content/posts/_index.md</code> を作る。</p> +++ title = "Posts" sort_by = "date" paginate_by = 10 +++ </code></pre> zola serve</code> で確認して完了。</p> avel とは 2025-06-01T00:00:00+00:00 阿部寛のホームページ</a> にインスパイアされた JS ゼロの Zola</a> テーマ。</p> JavaScript ゼロ</li> 外部リソースなし（デフォルト設定）</li> CSS はインライン</li> config.toml</code> だけで全スタイルを制御</li> </ul> なぜ JS ゼロか</h2> 速い。プライベート。壊れない。</p> JS がなければトラッキングスクリプトは入らない。外部リソースがなければ CDN 障害の影響を受けない。シンプルなものは長持ちする。</p> 阿部寛のホームページが何年も変わらず存在し続けているのはシンプルだからだ。</p>

avel のホームページ

Markdown ショーケース

見出し</h2>

h3 見出し</h3>

h4 見出し</h4>

テキスト</h2>
通常のテキストです。太字</strong>、イタリック</em>、取り消し線</del>、`インラインコード</code> が使えます。</p>`

水平線</h2>

avel の趣旨

阿部寛のホームページへのリスペクト

むちゃくちゃ速い

getzola.org/themes への登録

画像の埋め込み

Atom フィード

ページネーションの設定

タグの使い方

リンク色の変更

背景画像の設定

`背景色のみ</h2> [extra] body_bg = "#fffff0" </code></pre>`

フォントの変更

Google Fonts</h2>
`[extra] google_fonts_url = "https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" font_family = "Noto Serif JP" font = "serif" </code></pre> 初回だけ Google のサーバーへリクエストが発生する。</p>`

ナビゲーションのカスタマイズ

`箇条書き記号</h2> [extra] nav_bullet = "■" # ■ ● ▶ など </code></pre>`

プロフィール画像の設定

インストール方法

avel とは

avel のホームページ

Markdown ショーケース

見出し</h2>

h3 見出し</h3>

h4 見出し</h4>

テキスト</h2> 通常のテキストです。太字</strong>、イタリック</em>、取り消し線</del>、インラインコード</code> が使えます。</p>

水平線</h2>

avel の趣旨

阿部寛のホームページへのリスペクト

むちゃくちゃ速い

getzola.org/themes への登録

画像の埋め込み

Atom フィード

ページネーションの設定

タグの使い方

リンク色の変更

背景画像の設定

背景色のみ</h2> [extra] body_bg = "#fffff0" </code></pre>

フォントの変更

Google Fonts</h2> [extra] google_fonts_url = "https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" font_family = "Noto Serif JP" font = "serif" </code></pre> 初回だけ Google のサーバーへリクエストが発生する。</p>

ナビゲーションのカスタマイズ

箇条書き記号</h2> [extra] nav_bullet = "■" # ■ ● ▶ など </code></pre>

プロフィール画像の設定

インストール方法

avel とは

テキスト</h2>
通常のテキストです。太字</strong>、イタリック</em>、取り消し線</del>、`インラインコード</code> が使えます。</p>`

`背景色のみ</h2> [extra] body_bg = "#fffff0" </code></pre>`

Google Fonts</h2>
`[extra] google_fonts_url = "https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" font_family = "Noto Serif JP" font = "serif" </code></pre> 初回だけ Google のサーバーへリクエストが発生する。</p>`

`箇条書き記号</h2> [extra] nav_bullet = "■" # ■ ● ▶ など </code></pre>`