avel のホームページ

このコメント欄を他のテーマでも使う

2026-06-06T00:00:00+00:00

avel のコメント欄は、テーマのデザインとは独立した部品で構成されています。Zola であれば他のテーマを使っているサイトにも導入できます。</p>

avel を使っている場合はコメント欄の設定</a>の記事に書いた通りにすれば動きます。この記事は「avel 以外のテーマを使っているが同じコメント欄を付けたい」というケースのレシピです。</p>

この記事自体にもコメント欄が付いているので、動いているようすを一番下で確認できます。</p>

前提</h2>
Nostalgic</a> は無料で、アカウント登録も不要です。8〜16 文字の文字列を自分でトークンとして決めるだけで使い始められます。</p>

ステップ 1 — スクリプトを置く</h2>

このリポジトリの scripts/sync-nostalgic-bbs.mjs</code> を自分のサイトの scripts/</code> ディレクトリにコピーします。</p>

ビルドコマンドをスクリプト実行後に zola build</code> を呼ぶ形に変えます。</p>

node</span> scripts/sync-nostalgic-bbs.mjs</span> &&</span> zola</span> build</span></span></code></pre>
Cloudflare Pages など CI 環境のビルドコマンドも同様に変更します。</p>
スクリプトは既定で content/posts/</code> を走査します。記事が別のディレクトリにある場合は NOSTALGIC_CONTENT_DIR</code> 環境変数で指定します。</p>
NOSTALGIC_CONTENT_DIR</span>=</span>content/articles</span> node</span> scripts/sync-nostalgic-bbs.mjs</span> &&</span> zola</span> build</span></span></code></pre>ステップ 2 — トークンを環境変数に置く</h2>
スクリプトは process.env.NOSTALGIC_TOKEN</code> を読みます。トークンはリポジトリにコミットしません。</strong></p>
ローカルではシェルで設定します。</p>
export</span> NOSTALGIC_TOKEN</span>=</span>your-token-here</span></span></code></pre>
Cloudflare Pages などの CI 環境では、プロジェクトの環境変数設定画面で NOSTALGIC_TOKEN</code> を追加します。</p>
NOSTALGIC_TOKEN</code> が設定されていない場合、スクリプトは既存の ID を保持したまま終了します。新しい記事の BBS 作成はスキップされますが、既に ID がある記事のコメント欄は引き続き表示されます。</p>
ステップ 3 — config.toml に設定を追加</h2>
必須は nostalgic_bbs = true</code> の 1 行だけです。残り 4 つはテンプレート側に既定値があるため省略可能です。</p>
[</span>extra</span>]</span></span>
nostalgic_bbs</span> =</span> true</span></span>
nostalgic_bbs_limit</span> =</span> 3</span>          # 画像に表示する最新コメント数（省略可、既定値 3）</span></span>
nostalgic_bbs_width</span> =</span> 760</span>        # SVG の描画幅（px）（省略可、既定値 760）</span></span>
nostalgic_bbs_label</span> = "</span>Comments</span>"</span> # 画像の上に出る見出し（省略可、既定値 "Comments"）</span></span>
nostalgic_bbs_hint</span> = "</span>クリックで書き込めます</span>"</span>  # 画像の下のキャプション（省略可、既定値 "Click to comment"）</span></span></code></pre>ステップ 4 — テンプレートに数行追加</h2>
サイトルートに templates/page.html</code> を作成（またはテーマのファイルを上書き）し、記事本文の後ろに次のスニペットを追加します。テーマ本体のファイルを直接変更する必要はありません。</p>

これは貼り付け用の最小断片です。avel 本体の templates/page.html</code> は CSS クラス等が付いた完全版なので、デザインを揃えたい場合はそちらを参照してください。</p>
</blockquote>
{% if config.extra.nostalgic_bbs | default(value=false) %}</span></span>
{% set_global nostalgic_bbs_public_id = "" %}</span></span>
{% set nostalgic_bbs = load_data(path="data/nostalgic_bbs.toml", required=false) %}</span></span>
{% if nostalgic_bbs and nostalgic_bbs.posts %}</span></span>
  {% for post_path, post_bbs_id in nostalgic_bbs.posts %}</span></span>
    {% if post_path == current_path %}</span></span>
      {% set_global nostalgic_bbs_public_id = post_bbs_id %}</span></span>
    {% endif %}</span></span>
  {% endfor %}</span></span>
{% endif %}</span></span>
{% if nostalgic_bbs_public_id %}</span></span>
  {% set limit = config.extra.nostalgic_bbs_limit | default(value=3) %}</span></span>
  {% set width = config.extra.nostalgic_bbs_width | default(value=760) %}</span></span>
  {% set label = config.extra.nostalgic_bbs_label | default(value="Comments") %}</span></span>
  {% set hint  = config.extra.nostalgic_bbs_hint  | default(value="Click to comment") %}</span></span>
  <div</span> class</span>="</span>nostalgic-bbs</span>"</span>></span></span>
    <p></span>{{ label }}</span></p></span></span>
    <a</span> href</span>="</span>https://nostalgic.llll-ll.com/bbs?id={{ nostalgic_bbs_public_id | urlencode }}</span>"</span></span>
       target</span>="</span>_blank</span>"</span> rel</span>="</span>noopener noreferrer</span>"</span>></span></span>
      <img</span> src</span>="</span>https://api.nostalgic.llll-ll.com/bbs?action=get&id={{ nostalgic_bbs_public_id | urlencode }}&format=image&limit={{ limit }}&width={{ width }}</span>"</span></span>
           alt</span>="</span>{{ label }} for {{ page.title }}</span>"</span></span>
           loading</span>="</span>lazy</span>"</span> decoding</span>="</span>async</span>"</span>></span></span>
    </a></span></span>
    <p></span>{{ hint }}</span></p></span></span>
  </div></span></span>
{% endif %}</span></span>
{% endif %}</span></span></code></pre>JS 不要の設計</h2>
コメントの表示は Nostalgic API が返す SVG 画像を <img></code> タグで埋め込むだけです。クリックすると Nostalgic の掲示板ページに移動し、そこで書き込めます。この設計により、記事ページにはコメント欄のための JavaScript が一切入りません。ブラウザで JavaScript を無効にしていても表示されます。</p>
Web Component を使わないため、追加の <script></code> タグも不要です。</p>


コメント欄の設定
2026-06-04T00:00:00+00:00
avel は、記事の末尾に Nostalgic BBS</a> の画像コメント欄を表示できます。記事ページには JavaScript を入れず、最新の書き込みを SVG 画像として表示します。画像をクリックすると Nostalgic の掲示板ページへ移動し、そこで書き込めます。</p>
有効にするには config.toml</code> に次のように書きます。</p>
[</span>extra</span>]</span></span>
nostalgic_bbs</span> =</span> true</span></span>
nostalgic_bbs_limit</span> =</span> 3</span></span>
nostalgic_bbs_width</span> =</span> 760</span></span>
nostalgic_bbs_label</span> = "</span>Comments</span>"</span></span>
nostalgic_bbs_hint</span> = "</span>クリックで書き込めます</span>"</span></span></code></pre>
画像は nostalgic_bbs_width</code> の幅で生成されますが、ページ上では画面幅に合わせて縮むため横スクロールは出ません。nostalgic_bbs_label</code> は画像の上、nostalgic_bbs_hint</code> は画像の下に表示されます。</p>
記事ごとの BBS は、ビルド前に同期スクリプトを実行して用意します。</p>
npm</span> run sync:nostalgic-bbs</span></span>
zola</span> build</span></span></code></pre>
同期スクリプトは base_url</code> と記事パスから記事の最終 URL を作り、Nostalgic BBS を検索または作成します。返ってきた公開 ID は data/nostalgic_bbs.toml</code> に保存されます。このファイルは記事の URL path をキーにした生成マップです。</p>
[</span>posts</span>]</span></span>
"</span>/posts/my-post/</span>"</span> = "</span>my-post-bbs-id</span>"</span></span></code></pre>
既に ID がある記事は再利用されるので、毎回すべての記事を Nostalgic に問い合わせるわけではありません。新しい記事だけ、完成後の permalink URL をまとめて batchLookup</code> で検索し、見つからなければ Comments</code> という名前で作成します。batchLookup</code> は 1 回に最大 1000 URL を受け付け、Nostalgic 側が DB の内部分割を処理します。</p>
NOSTALGIC_TOKEN</code> はビルド環境の環境変数に置いてください。front matter やテンプレート、生成された HTML に token を書く必要はありません。既存 BBS を手動で固定したい場合は、記事 Markdown ではなく data/nostalgic_bbs.toml</code> を直接編集します。</p>


表示を速くする仕組み
2026-05-20T00:00:00+00:00
avel は、軽さを保ったまま体感速度を上げるために、ブラウザ標準の仕組みをいくつか使っています。いずれも既定で有効ですが、config.toml</code> で切り替えられます。</p>
ページ遷移をなめらかに（View Transitions）</h2>
ページを移動するときに、CSS だけで画面を軽くフェードさせます。JavaScript は使いません。無効にしたい場合は次のように書きます。</p>
[</span>extra</span>]</span></span>
view_transitions</span> =</span> true</span>   # 既定で有効</span></span></code></pre>リンクの先読み（Speculation Rules）</h2>
サイト内のリンクにカーソルを合わせた時点で、次のページをあらかじめ用意します。クリックしたときには、ほとんど待ち時間がありません。</p>
[</span>extra</span>]</span></span>
speculation_rules</span> =</span> true</span>   # 既定で有効</span></span></code></pre>
外部リンクとフィード（/atom.xml</code>）は対象外です。この機能のために、宣言的な <script type="speculationrules"></code> が 1 つ入ります（SEO 用の JSON-LD とは別物です）。どちらも動作するコードではなく、ブラウザへの指示書きやデータにあたります。</p>
画面外の描画を後回しに（content-visibility）</h2>
記事一覧のように縦に長くなる部分は、画面に入るまで描画を後回しにします。画面内の文字はこれまでどおりすぐ表示されるので、最初の表示はかえって速くなります。この挙動は CSS だけで実現しており、設定は必要ありません。</p>


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</span> main</span>() {</span></span>
    println!</span>("</span>Hello, world!</span>");</span></span>
}</span></span></code></pre>[</span>extra</span>]</span></span>
name</span> = "</span>avel demo</span>"</span></span>
font</span> = "</span>serif</span>"</span></span></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>
avel は、その問いへのひとつの答えです。書いたことが伝われば十分で、過剰な演出やリアルタイム更新がなくても、テキストと最低限の構造と読みやすいフォントがあればブログは成り立ちます。</p>
Zola は Rust 製の静的サイトジェネレーターです。ビルドが速く、依存関係も少なく、生成される HTML もシンプルです。avel はその Zola の上に、余計なものを重ねない方向で作っています。</p>
ただし「何も足さない」ことだけを目的にはしていません。ランタイムの JavaScript は足しませんが、表示を速く感じてもらうために、ブラウザ標準の宣言的な仕組み（CSS の View Transitions やリンクの先読み）は取り入れています。重さを増やさずに速さだけを足す、という引き算と足し算の両立を目指しています。</p>


阿部寛のホームページへのリスペクト
2025-11-01T00:00:00+00:00
阿部寛のホームページ</a> をご存じでしょうか。俳優・阿部寛さんの公式ホームページです。テーブルレイアウト、青いリンク、薄紫のサイドバー、小さめのフォントと、1990 年代後半の Web デザインの趣をそのままに、今日も変わらず公開されています。</p>
よく話題になるのは、その表示の速さです。演出もアニメーションも追跡スクリプトもなく、必要な情報だけが置かれているため、世界でも最速クラスと呼ばれることがあります。</p>
avel は、このデザイン哲学をテーマとして再現したものです。見た目の懐かしさは意図したもので、既定のフォント（ゴシック体）、薄紫のサイドバー、項目ごとに色を変える「●」も本家に倣っています。速さと潔さへのリスペクトを込めています。</p>


とにかく表示が速い
2025-10-15T00:00:00+00:00
avel で作ったページは、とても速く表示されます。ランタイムの JavaScript がないのでパースや実行のコストがかからず、外部リソースもないので追加のリクエストや DNS 解決も発生しません。CSS はインラインなので、別ファイルを取りに行く待ち時間もありません。</p>
HTML はブラウザに届いたそばから、上から順に描画されていきます。内容をすべて読み込み終えるまで最初の文字が出ない、ということが起きないように作っています。</p>
Lighthouse のスコアは、Performance・Accessibility・Best Practices・SEO のいずれも 100 を目標にしています。低速な回線でも古い端末でも、待たされる感覚は少ないはずです。</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</span> = "</span>avel</span>"</span></span>
description</span> = "</span>The fastest-rendering, no-JS Zola blog theme. A modern, responsive homage to Abe Hiroshi's homepage.</span>"</span></span>
license</span> = "</span>MIT</span>"</span></span>
homepage</span> = "</span>https://github.com/kako-jun/avel</span>"</span></span>
min_version</span> = "</span>0.19.0</span>"</span></span>
demo</span> = "</span>https://avel.llll-ll.com</span>"</span></span>
tags</span> = ["</span>blog</span>", "</span>minimal</span>", "</span>no-js</span>"]</span></span></code></pre>


画像の埋め込み
2025-09-15T00:00:00+00:00
static/</code> に画像を置いて、Markdown から参照します。</p>
![</span>説明文</span>](</span>/sample.svg</span>)</span></span></code></pre>
Markdown で書いた画像には、自動的に loading="lazy"</code> が付きます（config.toml</code> の lazy_async_image = true</code> によるものです）。画面に入るまで読み込みを後回しにできるので、表示の速さを保てます。</p>
たとえば、avel で作ったページの Lighthouse スコアはこのようになります。画像は自動で遅延読み込みされます。</p>

HTML で直接書く場合は、自分で指定します。表示のずれ（CLS）を防ぐため、width</code>・height</code> も両方書いておくとよいでしょう。</p>
<img</span> src</span>="</span>/sample.svg</span>"</span> width</span>="</span>320</span>"</span> height</span>="</span>120</span>"</span> alt</span>="</span>sample image</span>"</span> loading</span>="</span>lazy</span>"</span>></span></span></code></pre>


Atom フィード
2025-09-01T00:00:00+00:00
avel は Atom フィードを自動生成します。サイドバー下部の「Atom」リンクから購読できます。</p>
config.toml</code> で有効化します（デフォルトで有効）。</p>
generate_feeds</span> =</span> true</span></span>
feed_filenames</span> = ["</span>atom.xml</span>"]</span></span></code></pre>
フィードは /atom.xml</code> で配信されます。RSS リーダーにこの URL を登録してください。</p>


ページネーションの設定
2025-08-15T00:00:00+00:00
content/posts/_index.md</code> に paginate_by</code> を追加します。</p>
+++</span></span>
title</span> = "</span>Posts</span>"</span></span>
sort_by</span> = "</span>date</span>"</span></span>
paginate_by</span> =</span> 20</span></span>
+++</span></span></code></pre>
ページが複数になると、記事一覧の下にページ番号と前後の矢印が表示されます。</p>
トップ（/</code>）には最新 5 件だけが並びます。記事一覧（/posts/</code>）は、ページネーション付きですべての記事を表示します。</p>


タグの使い方
2025-08-01T00:00:00+00:00
config.toml</code> に taxonomy を追加します。</p>
[[</span>taxonomies</span>]]</span></span>
name</span> = "</span>tags</span>"</span></span>
url</span> = "</span>tags</span>"</span></span>
feed</span> =</span> false</span></span>
lang</span> = "</span>ja</span>"</span></span></code></pre>
記事のフロントマターにタグを書きます。</p>
+++</span></span>
title</span> = "</span>記事タイトル</span>"</span></span>
date</span> =</span> 2025-08-01</span></span>
</span>
[</span>taxonomies</span>]</span></span>
tags</span> = ["</span>foo</span>", "</span>bar</span>"]</span></span>
+++</span></span></code></pre>
これで /tags/</code> にタグ一覧が、/tags/{name}/</code> にタグ別の記事一覧が生成されます。</p>


文字色・リンク色の変更
2025-07-20T00:00:00+00:00
既定値は、古典的なブラウザの既定色に合わせてあります。</p>
キー</th> デフォルト</th> 用途</th></tr></thead>

text_color</code></td> #000000</code></td> 本文の文字色</td></tr>
link_color</code></td> #0000ee</code></td> 未訪問リンク</td></tr>
link_visited</code></td> #551a8b</code></td> 訪問済みリンク</td></tr>
</tbody></table>
色を変えたい場合は config.toml</code> で上書きします。</p>
[</span>extra</span>]</span></span>
text_color</span> = "</span>#000000</span>"</span></span>
link_color</span> = "</span>#cc0000</span>"</span></span>
link_visited</span> = "</span>#880000</span>"</span></span></code></pre>
リンクには既定で下線が付きます。これも、読みやすさを優先した意図的な設定です。</p>


背景画像の設定
2025-07-10T00:00:00+00:00
このサイトの背景は、SVG ファイルをタイル状に並べたものです。static/</code> に置いた画像ファイルを指定すると、小さい画像は自動的にタイル表示されます。</p>
[</span>extra</span>]</span></span>
background_image</span> = "</span>bg.svg</span>"</span></span></code></pre>背景色のみ</h2>
画像を使わず、単色の背景にすることもできます。</p>
[</span>extra</span>]</span></span>
body_bg</span> = "</span>#fffff0</span>"</span></span></code></pre>


フォントの変更
2025-07-01T00:00:00+00:00
既定のフォントは sans-serif</code>（ゴシック体）です。阿部寛のホームページが CSS を持たず、多くのブラウザの既定フォント（日本語ではゴシック体）で表示されるのに倣っています。明朝体にしたい場合や、別の書体を使いたい場合は config.toml</code> で変更できます。</p>
システムフォント</h2>
[</span>extra</span>]</span></span>
font</span> = "</span>serif</span>"</span></span>
font_family</span> = "</span>Georgia</span>"</span></span>
font_size</span> = "</span>14px</span>"</span></span></code></pre>
システムにある書体だけを使えば、外部へのリクエストは発生しません。表示の速さを優先するなら、この方法がおすすめです。</p>
Google Fonts</h2>
[</span>extra</span>]</span></span>
google_fonts_url</span> = "</span>https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap</span>"</span></span>
font_family</span> = "</span>Noto Serif JP</span>"</span></span>
font</span> = "</span>serif</span>"</span></span></code></pre>
この場合は、初回だけ Google のサーバーへリクエストが発生します。読み込みのぶん表示は遅くなりますので、必要なときだけ使うとよいでしょう。</p>


サイドバーのカスタマイズ
2025-06-20T00:00:00+00:00
左側のサイドバーは、幅・背景色・境界線・項目の間隔を config.toml</code> だけで調整できます。既定値は阿部寛のホームページに倣い、薄紫（#f0f0ff</code>）の背景に幅 18% としています。</p>
[</span>extra</span>]</span></span>
nav_width</span> = "</span>18%</span>"</span>        # サイドバーの幅</span></span>
nav_bg</span> = "</span>#f0f0ff</span>"</span>       # 背景色</span></span>
nav_border</span> =</span> true</span>        # 右側の境界線（フレーム枠の名残）</span></span>
nav_item_gap</span> = "</span>1.3em</span>"</span>   # 項目どうしの上下の間隔</span></span></code></pre>
リンクの追加や、箇条書き記号「●」の色の変更については、ナビゲーションのカスタマイズ</a>をご覧ください。</p>
スマートフォンなどの狭い画面では、サイドバーは自動的に上部の横並びメニューに切り替わります。こちらの設定は必要ありません。</p>


ナビゲーションのカスタマイズ
2025-06-15T00:00:00+00:00
サイドバーのリンクは config.extra.nav</code> で定義します。</p>
[</span>extra</span>]</span></span>
nav</span> = [</span></span>
  {</span> label</span> = "</span>トップ</span>",</span> url</span> = "</span>/</span>" },</span></span>
  {</span> label</span> = "</span>記事一覧</span>",</span> url</span> = "</span>/posts/</span>" },</span></span>
  {</span> label</span> = "</span>タグ一覧</span>",</span> url</span> = "</span>/tags/</span>" },</span></span>
  {</span> label</span> = "</span>GitHub</span>",</span> url</span> = "</span>https://github.com/yourname</span>" },</span></span>
]</span></span></code></pre>
nav</code> を設定しない場合は、既定のナビ（トップ・記事一覧）が表示されます。</p>
箇条書き記号</h2>
既定では「●」が、項目ごとに色を変えて表示されます。阿部寛のホームページの 7 色のメニューに倣った配色です。記号や配色を変えたい場合、また記号を消したい場合は次のように指定します。</p>
[</span>extra</span>]</span></span>
nav_bullet</span> = "</span>●</span>"</span>          # 記号を変える。"" を指定すると消える</span></span>
nav_bullet_colors</span> = ["</span>#ffcccc</span>", "</span>#00ff00</span>", "</span>#33ffff</span>", "</span>#0099ff</span>", "</span>#0000ff</span>", "</span>#333399</span>", "</span>#cc00cc</span>"]</span></span></code></pre>
記号の色は、リストの先頭から順に、指定した色を 1 つずつ使い、色を使い切ると最初に戻って循環します。</p>
前後記事ナビ</h2>
記事ページの下部には、前後の記事へのリンクが表示されます。左が過去の記事、右が未来の記事で、セクションの sort_by = "date"</code> の順に並びます。スマホ幅（600px 以下）では縦積みになります。</p>


プロフィールと連絡先の設定
2025-06-10T00:00:00+00:00
トップページは、阿部寛のホームページに倣った 2 段構成です。左側にプロフィール（画像・名前・紹介文・連絡先）が並び、右側に「★★★ 最新情報 ★★★」として最新の記事が表示されます。スマートフォンなどの狭い画面では、上下に積み重なります。</p>
プロフィール</h2>
[</span>extra</span>]</span></span>
name</span> = "</span>Your Name</span>"</span></span>
profile_image</span> = "</span>me.webp</span>"</span></span>
profile_width</span> = "</span>120</span>"</span></span>
profile_height</span> = "</span>120</span>"</span></span>
profile_text</span> = "</span>ひとことプロフィール</span>"</span></span></code></pre>
画像は static/</code> に置きます。width</code>・height</code> を指定しない場合は、既定値の 200</code> が使われます（本家の写真が大きめなのに倣っています）。表示のずれ（CLS）を防ぐため、両方を指定しておくと安心です。profile_text</code> は任意で、指定すると名前の下に短い紹介文が表示されます。</p>
連絡先（SNS アカウント）</h2>
阿部寛のホームページでは住所や電話番号が連絡先でしたが、ブログの連絡先としては SNS アカウントの一覧が自然です。social</code> に並べると、プロフィールの下に「連絡先」として表示されます。</p>
[</span>extra</span>]</span></span>
social</span> = [</span></span>
  {</span> label</span> = "</span>X</span>",</span> url</span> = "</span>https://x.com/yourname</span>" },</span></span>
  {</span> label</span> = "</span>Instagram</span>",</span> url</span> = "</span>https://instagram.com/yourname</span>" },</span></span>
  {</span> label</span> = "</span>GitHub</span>",</span> url</span> = "</span>https://github.com/yourname</span>" },</span></span>
]</span></span></code></pre>
外部リンクは自動的に別タブで開きます。label</code> の文字はそのまま表示されるので、ハンドル名を入れても構いません。</p>


インストール方法
2025-06-05T00:00:00+00:00
git submodule として追加します。</p>
cd</span> your-zola-site</span></span>
git</span> submodule add https://github.com/kako-jun/avel themes/avel</span></span></code></pre>
config.toml</code> にテーマを指定します。</p>
theme</span> = "</span>avel</span>"</span></span></code></pre>
content/posts/_index.md</code> を作成します。</p>
+++</span></span>
title</span> = "</span>Posts</span>"</span></span>
sort_by</span> = "</span>date</span>"</span></span>
paginate_by</span> =</span> 20</span></span>
+++</span></span></code></pre>
あとは zola serve</code> で確認すれば完了です。</p>


avel とは
2025-06-01T00:00:00+00:00
avel は、阿部寛のホームページ</a> にインスパイアされた、ランタイム JavaScript ゼロの Zola</a> テーマです。何よりも「表示が速いこと」を大切にしています。</p>
特徴は次のとおりです。</p>

ランタイム JavaScript なし（速くするための宣言的な仕組みだけは使います）</li>
外部リソースなし（既定設定。Web フォントも CDN も読み込みません）</li>
CSS はインラインなので、別ファイルの取得を待ちません</li>
スタイルは config.toml</code> だけで調整でき、HTML や CSS を編集する必要はありません</li>
</ul>
なぜ軽さにこだわるのか</h2>
軽いページは速く表示され、壊れにくく、長く保ちやすいものです。トラッキングスクリプトを置かないので読む人のプライバシーにも配慮できますし、外部リソースに頼らないので CDN の不調にも左右されにくくなります。</p>
阿部寛のホームページが長く変わらずに公開され続けているのは、シンプルだからだと思います。avel もその姿勢を受け継いでいます。</p>


本文レイアウトの調整
2025-05-26T00:00:00+00:00
本文まわりの見え方は、いくつかの値で調整できます。</p>
[</span>extra</span>]</span></span>
max_width</span> = "</span>960px</span>"</span>      # ページ全体の最大幅（指定すると中央寄せになる）</span></span>
content_align</span> = "</span>left</span>"</span>   # 本文の文字揃え（left / center / justify）</span></span>
line_height</span> = "</span>1.5</span>"</span>      # 行間</span></span>
title_align</span> = "</span>center</span>"</span>   # ページタイトルの揃え</span></span>
main_padding</span> = "</span>1em</span>"</span>     # 本文エリアの余白</span></span></code></pre>
max_width</code> を指定すると、横長の画面でも一行が長くなりすぎず、読みやすくなります。どれも指定しなければ、既定の見た目のままです。</p>


SEO の設定
2025-05-22T00:00:00+00:00
avel は、検索エンジンや SNS に内容が正しく伝わるよう、いくつかのメタ情報を既定で出力します。canonical URL、Open Graph、Twitter Card、JSON-LD（構造化データ）、サイトマップ、フィードの自動検出が、設定なしで有効です。いずれも <head></code> 内のテキストなので、表示の速さには影響しません。</p>
なお Twitter Card という呼び名と twitter:</code> で始まるメタ名は、X（旧 Twitter）になった今もそのまま使われています。x:</code> のような名前は無いので、これが正しい指定です。</p>
SNS で共有されたときのカード画像を指定したい場合は og_image</code> を、カードの発信元アカウントを示したい場合は twitter</code> を設定します。</p>
[</span>extra</span>]</span></span>
og_image</span> = "</span>og.webp</span>"</span>        # static/ に置く</span></span>
twitter</span> = "</span>@yourhandle</span>"</span></span></code></pre>
og_image</code> を設定すると、Twitter Card は大きな画像つきのレイアウトになります。設定しなくても、テキスト中心のカードとして共有されます。</p>


フッターの設定
2025-05-18T00:00:00+00:00
ページ下部のフッターは、footer</code> に文字列を指定すると表示されます。指定しない場合は何も表示されません。</p>
[</span>extra</span>]</span></span>
footer</span> = "</span>© 2025 Your Name</span>"</span></span></code></pre>
著作権表記や、ひとことの連絡先など、全ページ共通で出しておきたい短い一文を置くのに向いています。</p>


日付の表示形式を変える
2025-05-12T00:00:00+00:00
記事の日付は、date_format</code> で表示形式を変えられます。指定しない場合は %Y年%m月%d日</code>（例: 2025年05月12日）で表示されます。</p>
[</span>extra</span>]</span></span>
date_format</span> = "</span>%Y-%m-%d</span>"</span></span></code></pre>
書式は strftime の記法に従います。たとえば %Y/%m/%d</code> なら 2025/05/12、%B %d, %Y</code> なら英語の月名で表示されます。読み手に合わせて選ぶとよいでしょう。</p>


はじめまして
2025-05-01T00:00:00+00:00
はじめまして。このブログを読みに来てくださって、ありがとうございます。</p>
ここでは、日々のちょっとした気づきや、作ったもの、考えたことなどを、気の向くままに書いていこうと思っています。あまり気負わず、長く続けられたらいいなと考えています。</p>
最初の記事なので短いですが、これからどうぞよろしくお願いします。</p>

avel のホームページ

このコメント欄を他のテーマでも使う

前提</h2>
Nostalgic</a> は無料で、アカウント登録も不要です。8〜16 文字の文字列を自分でトークンとして決めるだけで使い始められます。</p>

コメント欄の設定

表示を速くする仕組み

Markdown ショーケース

見出し</h2>

h3 見出し</h3>

h4 見出し</h4>

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

水平線</h2>

avel の趣旨

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

とにかく表示が速い

getzola.org/themes への登録

画像の埋め込み

Atom フィード

ページネーションの設定

タグの使い方

文字色・リンク色の変更

背景画像の設定

背景色のみ</h2>
画像を使わず、単色の背景にすることもできます。</p>
`[</span>extra</span>]</span></span> body_bg</span> = "</span>#fffff0</span>"</span></span></code></pre>`

フォントの変更

サイドバーのカスタマイズ

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

前後記事ナビ</h2>
記事ページの下部には、前後の記事へのリンクが表示されます。左が過去の記事、右が未来の記事で、セクションの `sort_by = "date"</code> の順に並びます。スマホ幅（600px 以下）では縦積みになります。</p>`

プロフィールと連絡先の設定

インストール方法

avel とは

本文レイアウトの調整

SEO の設定

フッターの設定

日付の表示形式を変える

はじめまして

avel のホームページ

このコメント欄を他のテーマでも使う

前提</h2> Nostalgic</a> は無料で、アカウント登録も不要です。8〜16 文字の文字列を自分でトークンとして決めるだけで使い始められます。</p>

コメント欄の設定

表示を速くする仕組み

Markdown ショーケース

見出し</h2>

h3 見出し</h3>

h4 見出し</h4>

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

水平線</h2>

avel の趣旨

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

とにかく表示が速い

getzola.org/themes への登録

画像の埋め込み

Atom フィード

ページネーションの設定

タグの使い方

文字色・リンク色の変更

背景画像の設定

背景色のみ</h2> 画像を使わず、単色の背景にすることもできます。</p> [</span>extra</span>]</span></span> body_bg</span> = "</span>#fffff0</span>"</span></span></code></pre>

フォントの変更

サイドバーのカスタマイズ

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

前後記事ナビ</h2> 記事ページの下部には、前後の記事へのリンクが表示されます。左が過去の記事、右が未来の記事で、セクションの sort_by = "date"</code> の順に並びます。スマホ幅（600px 以下）では縦積みになります。</p>

プロフィールと連絡先の設定

インストール方法

avel とは

本文レイアウトの調整

SEO の設定

フッターの設定

日付の表示形式を変える

はじめまして

前提</h2>
Nostalgic</a> は無料で、アカウント登録も不要です。8〜16 文字の文字列を自分でトークンとして決めるだけで使い始められます。</p>

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

背景色のみ</h2>
画像を使わず、単色の背景にすることもできます。</p>
`[</span>extra</span>]</span></span> body_bg</span> = "</span>#fffff0</span>"</span></span></code></pre>`

前後記事ナビ</h2>
記事ページの下部には、前後の記事へのリンクが表示されます。左が過去の記事、右が未来の記事で、セクションの `sort_by = "date"</code> の順に並びます。スマホ幅（600px 以下）では縦積みになります。</p>`