Chillarin Blog - ギミック編：見た目・遊び・コメント -

本章の内容

前回（6章）は チンチラのライブ映像（Nest Cam × go2rtc）という「機能としてのギミック」をまとめました。この章（7章）は、ブログの体験を「自分の城」っぽくする 見た目・遊び・コミュニケーション寄りの話です。

ただし最後に1つだけ、ギミックとは別枠で 「自分の実装が至らなくてハマった」トラブルシュート備忘録も置きます。（記事数が増えた時のレイアウト崩れは、完全にその類です…）

この章でやること（ゴールと完成イメージ）

トップページのヒーローに YouTube 限定公開（Unlisted）動画を"さりげなく"差し込む
**背景チンチラ（roamer）**を「遊び」として成立させる（目立ちすぎ防止 / 動作設計）
記事ページにだけ コメント（Remark42） を導入する
（おまけ）記事数でレイアウトがズレる問題を潰した時の記録（display: contents / grid固定配置）

1. トップページの差し込み動画（YouTube 限定公開（Unlisted）を"飾り"として置く）

前章のライブ配信ほど大掛かりではないですが、トップページのヒーロー右下に「リンちゃんの動画」を置いています。構成としてはシンプルです。

動画は YouTube の限定公開（Unlisted） にアップ
ブログ側は iframe で埋め込み（＝仕組みはシンプル）
見せ方として「ヒーロー右下に重なる」配置にして、主張しすぎないようにする

ここで、iframe による動画再生の動作をざっくり説明します。

ユーザがブログ（chillablog…）を開く。ブログのHTML内に <iframe src="https://www.youtube..."> が含まれている
ブラウザは iframe を"別のページ枠"として扱い、その src（YouTube）に対して別途リクエストを出す
返ってきた YouTube 側のプレイヤー（HTML/JS）が iframe の中で動き、動画データも YouTube からユーザ端末へ直接配信される

見た目としては「ブログ上で再生」ですが、ネットワーク的には YouTube ⇄ ユーザ端末 が主経路です。ブログ側はあくまで「ページ内にプレイヤーを配置しているだけ」で、動画の配信自体を中継しているわけではありません。

1.1 実装方針（配置の考え方）

ポイントは「ヒーローを position: relative にして、動画を absolute で重ねる」です。（ヒーロー画像がレスポンシブでも、右下に追従しやすい）

例：ヒーロー内に差し込む（テンプレート側）

html

<!-- 例：layouts/partials/hero.html など -->
<div class="hero">
  <!-- 既存のヒーロー要素（タイトル、説明、背景など） -->

  <div class="hero-video" aria-label="Chinchilla Rin video">
    <iframe
      src="https://www.youtube-nocookie.com/embed/TODO_VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=TODO_VIDEO_ID&controls=0&modestbranding=1&rel=0&playsinline=1"
      title="Chinchilla Rin"
      loading="lazy"
      allow="autoplay; encrypted-media; picture-in-picture"
      referrerpolicy="strict-origin-when-cross-origin"
      allowfullscreen
    ></iframe>
  </div>
</div>

autoplay を使うなら mute がほぼ必須（ブラウザの自動再生制限対策）
loop=1 を埋め込みで機能させるには playlist=動画ID（同じIDを入れる）が必須
youtube-nocookie.com は “Cookieを極力抑える” 目的（気持ちの問題も含め）

例：CSS（右下に重ねる）

css

.hero {
  position: relative;
}

/* 右下に"重ねる" */
.hero-video {
  position: absolute;
  right: 24px;
  bottom: 24px;

  width: min(420px, 36vw);
  aspect-ratio: 16 / 9;

  border-radius: 14px;
  overflow: hidden;

  /* 既存デザインに合わせて、白フチ/光/影などは好みで */
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(2px);
}

.hero-video iframe {
  width: 100%;
  height: 100%;
  display: block;
}

モバイルで「重ねると邪魔」なら、メディアクエリで 下に回すのが安全です。

css

@media (max-width: 820px) {
  .hero-video {
    position: static;
    width: 100%;
    margin-top: 16px;
  }
}

1.2 動画編集について（DaVinci Resolve 20）

動画自体は凝ったことはできていません。自分は動画編集はほぼ素人なので、正直"下手"です。でも、やってみたら思ったより大変で、ちゃんと学びがありました。

編集ソフト：DaVinci Resolve 20（無料版）
やったこと：カット、軽いテロップ、色味の調整、書き出し（YouTube向け）
目的：ブログのヒーローに置いても破綻しない、短めで見やすい素材を作る

「ブログは文章」だけじゃなく、少しでも"体験"が入ると一気に愛着が湧きます。

2. 背景チンチラ（roamer）を"遊び"として成立させる

背景でチンチラが走り回るのは、やりすぎると鬱陶しくなります。なので roamer は “存在はするけど邪魔しない” を最優先にしています。

2.1 方針（目立ちすぎ防止）

背景レイヤーに固定（本文やリンク操作を邪魔しない）
prefers-reduced-motion を尊重（動きが苦手な人への配慮）
速度・個体数は控えめ（負荷と主張を抑える）
たまに「毛づくろい」などの遊びを入れる（ずっと走ってるだけより自然）

2.2 DOM の置き場所（baseof.html）

html

<!-- 例：layouts/_default/baseof.html の body 直下など -->
<div class="bg-chinchilla" aria-hidden="true"></div>

2.3 CSS（背面固定、クリックを邪魔しない）

css

.bg-chinchilla {
  position: fixed;
  inset: 0;
  z-index: 0;              /* 背面に置く */
  pointer-events: none;    /* クリックを邪魔しない */
  overflow: hidden;
}

/* 本文側は roamer より前面へ（例） */
main, header, footer {
  position: relative;
  z-index: 1;
}

/* roamer のスプライト（div背景に画像を貼る方式） */
.bg-chinchilla-sprite {
  position: absolute;
  width: var(--chinchilla-size, 64px);
  height: var(--chinchilla-size, 64px);
  background-repeat: no-repeat;
  background-size: contain;

  /* "白い光の枠"は画像に依存させず、CSSで一律に乗せると崩れにくい */
  filter: drop-shadow(0 0 8px rgba(255,255,255,.55));
  opacity: .18; /* 目立ちすぎ防止：ここは好みで調整 */
}

※「毛づくろい中だけ白い光の枠が消える」問題は、画像側に依存せず filter: drop-shadow() のように 要素側に一律で付けるほうが安定します。

2.4 JavaScript（roamer の考え方）

roamer の JS は基本 “やりすぎない” ための設計です。

prefers-reduced-motion: reduce なら 動かさない
スプライトは translate3d で動かす（軽量）
たまに groom（毛づくろい）に遷移する
さらにイベントとして「2匹がぶつかったら、毛づくろい（ペア）」を挟む…なども可能

（本体コードは static/js/chinchilla-roamer.js を参照）

3. 記事ページにだけコメント（Remark42）を導入する

コメントは「全ページ」に入れると重くなりがちなので、記事ページだけに限定しました。読む人にとっても、書く人にとっても、そのほうが自然です。

3.1 Remark42 って何？

Remark42 は、Docker で動かせる軽量なコメントシステムです。外部SaaSに寄せずに 自分の環境でコメント欄を持てるのが良いところ。

3.2 Hugo 側：partial（remark42.html）

現行実装は、Hugo の partial テンプレートとして embed.js を読み込む構成になっています。やっていることは「hugo.toml の設定値を読んで、Remark42 の embed.js に渡すグローバル変数を組み立てる」だけです。

📦 この設定ファイルの全量は有料コンテンツ: 自宅サーバ構築シリーズに含まれています。

3.3 Hugo 側：記事ページだけに出す（single.html）

single.html でコメント欄を出すかどうかの判定をしています。考え方はシンプルで、「.Type が posts のときだけ partial を呼ぶ」です。

📦 この設定ファイルの全量は有料コンテンツ: 自宅サーバ構築シリーズに含まれています。

「この条件は .Type で良いのか？」は好みが出ます。将来 tech など別のセクションにもコメントを出したくなったら、ここを if 条件で広げればOKです。

3.4 Hugo 側：設定（hugo.toml）

hugo.toml に Remark42 の接続先やテーマ設定を書きます。設定キーとしては host（Remark42 の公開URL）、site_id、theme、locale あたりが基本です。

📦 この設定ファイルの全量は有料コンテンツ: 自宅サーバ構築シリーズに含まれています。

3.5 インフラ側：docker-compose（/opt/chirarin-blog-infra/docker-compose.yml）

docker-compose では Remark42 コンテナの環境変数として、公開URL・サイトID・認証方式などを設定します。今回は匿名コメント（AUTH_ANON=true）を有効にしています。

📦 この設定ファイルの全量は有料コンテンツ: 自宅サーバ構築シリーズに含まれています。

4. （おまけ）記事数でレイアウトがズレる問題を潰した話（トラブルシュート備忘録）

ここはギミックじゃなくて、完全に「自分がハマった話」です。でも後から同じ罠に落ちた時のために、残しておきます。

4.1 何が起きていたか（症状）

記事が少ないうちはそれっぽく見える
記事が増えると、あるカテゴリ/一覧ページで サイドバーが下に落ちる
あるいは、余白が妙に増えて「間延び」して見える

サイドバーが下にズレる現象 — 【現象】サイドバーが下にズレる（記事増加で顕在化）

4.2 どうやって原因を見たか（DevTools の見方）

最短ルートはブラウザの DevTools で、

Grid のオーバーレイ（レイアウト線）を見る
どの要素が grid item 扱いになっているか確認する
grid-auto-flow や “暗黙の配置” が発生していないかを見る

ここで「想定していない要素が grid の子として扱われている」「自動配置が暴れている」みたいな状態が見えると、一気に原因が絞れます。

grid自動配置の副作用の証拠 — 【原因】grid自動配置の副作用（当たり判定がズレる）

4.3 典型原因：grid の"自動配置"＋ラッパ要素

「2カラムのつもり」でも、DOM のラッパ要素が増えたり、条件分岐で要素が増減したりすると、grid の自動配置が意図せず変わります。

対策の方向性はシンプルで、

2カラムを明示する
サイドバーの居場所を固定する
余計なラッパが grid を壊すなら display: contents で"無かったこと"にする

です。

4.4 対策例：grid を固定配置に寄せる

css

.main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}

.main-layout .content {
  grid-column: 1;
  min-width: 0; /* 長いコード/画像で横はみ出し対策 */
}

.main-layout .sidebar {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

もしテンプレート都合で .content の内側に無駄なラッパが居て grid の子にならないなら、ラッパ側にこれを付けると「見た目だけ消す」ことができます。

📦 display: contents を使った具体的な CSS 解決コードは有料コンテンツ: 自宅サーバ構築シリーズに含まれています。

display: contents は便利な反面、 “その要素自身の背景や padding が消える"など副作用もあるので、「grid を壊しているラッパ」限定で使うのが安全です。

4.5 “直したつもりで別カテゴリが崩れる"罠

カテゴリ固有で直すと、他カテゴリが崩れる(サイドバーが上に食い込んでしまった)ことがあります。（＝条件分岐と CSS が絡むとよく起きるやつ）

「一旦 CSS を切り戻して、狙いを絞ってから再適用」みたいな動きが必要になることもあります。

まとめ（この章の着地点）

トップの差し込み動画は、仕組みはシンプルでも"体験として強い”
roamer は「邪魔しない」が最優先。目立ちすぎると一気に台無し
コメントは記事ページだけに限定すると運用が軽い（体験も自然）
レイアウト崩れはギミックじゃない。でも、あとで自分を助けるので記録しておく価値がある

これで「Chillarin Blog 構成紹介」シリーズは一旦完結です。次は、第6章で紹介したGoogle Nest Camとgo2rtcの連携方法の手順や、Gadget/Life カテゴリの記事を書いていく予定です。

有料会員向けコンテンツ

本記事で紹介した Remark42 コメント基盤の設定ファイル一式 と トラブルシュートの具体的な解決コード は、会員限定コンテンツとして公開しています。

含まれる内容:

remark42.html - Hugo partial テンプレートの全量（embed.js 読み込み・グローバル変数組み立て・noscript対応）
hugo.toml - Remark42 の設定部分（host / site_id / theme / locale / no_footer）
docker-compose.yml - Remark42 コンテナの環境変数全量（REMARK_URL / SITE / SECRET / AUTH_ANON / AUTH_SAME_SITE 等）
single.html - コメント欄の出し分けロジック（.Type 判定による partial 呼び出し）
display: contents の CSS 解決コード - grid 崩れに対する具体的な修正（ラッパ要素の無効化・固定配置の実装）

「設計思想は分かったけど、実際の設定ファイルを見て手元で再現したい」方はこちら: 有料コンテンツ: 自宅サーバ構築シリーズ

自宅サーバ運用の全体像は自宅サーバ運用の完全ガイド — Proxmox + Cloudflare Tunnel + Docker で個人ブログを公開し続けるにまとめています。Proxmox クラスタ・公開経路・Docker 本番化・障害対応までを 1 ページで通読できる Pillar ガイドです。

· · ·

Chillarin Blog 構成紹介 - 7.ギミック：見た目・遊び・コメント（＋おまけのトラブルシュート）編 -

本章の内容

この章でやること（ゴールと完成イメージ）

1. トップページの差し込み動画（YouTube 限定公開（Unlisted）を"飾り"として置く）

1.1 実装方針（配置の考え方）

例：ヒーロー内に差し込む（テンプレート側）

例：CSS（右下に重ねる）

1.2 動画編集について（DaVinci Resolve 20）

2. 背景チンチラ（roamer）を"遊び"として成立させる

2.1 方針（目立ちすぎ防止）

2.2 DOM の置き場所（baseof.html）

2.3 CSS（背面固定、クリックを邪魔しない）

2.4 JavaScript（roamer の考え方）

3. 記事ページにだけコメント（Remark42）を導入する

3.1 Remark42 って何？

3.2 Hugo 側：partial（remark42.html）

3.3 Hugo 側：記事ページだけに出す（single.html）

3.4 Hugo 側：設定（hugo.toml）

3.5 インフラ側：docker-compose（/opt/chirarin-blog-infra/docker-compose.yml）

4. （おまけ）記事数でレイアウトがズレる問題を潰した話（トラブルシュート備忘録）

4.1 何が起きていたか（症状）

4.2 どうやって原因を見たか（DevTools の見方）

4.3 典型原因：grid の"自動配置"＋ラッパ要素

4.4 対策例：grid を固定配置に寄せる

4.5 “直したつもりで別カテゴリが崩れる"罠

まとめ（この章の着地点）

コメント