080-Obsidian CSS Snippets

080
Obsidian CSS Snippets

▶︎

all

running...

📘 行幅設定
📘 セル内の余白調整
📘 セル内改行
📘 HTML の行幅は？

注記：本記事はGPT-4o期の対話ログをもとにしています。

📘 行幅設定

🙂 タケ：
通常のObsidianのmdファイルのライブプレビューの１行の幅はどう設定するの？

🤖 チャットさん：
Obsidianの「ライブプレビュー」モードでの1行の表示幅（テキストの最大行幅）は、テーマのCSS設定によって制御されています。
以下の方法でカスタマイズ可能です。

✅ 方法1：カスタムCSSで最大行幅を変更する

🔧 手順（自作の obsidian.css を使う方法）

Obsidianの保管庫（Vault）を開く
.obsidian フォルダと同じ階層（Vaultの直下）に obsidian.css を作成
以下のようなCSSを追加：

.markdown-preview-view,
.markdown-source-view.mod-cm6 .cm-content {
  max-width: 1000px;  /* お好みの幅に変更可能 */
  margin: 0 auto;
}

Obsidianの設定から「外観」→「カスタムCSSの再読み込み」を実行（なければ再起動）

✅ 方法2：コミュニティテーマを使って設定する

もしサードパーティ製のテーマを使っている場合は：

設定 → 外観 → テーマ から使用中のテーマを確認
設定 → 外観 → テーマの詳細設定 に「読みやすさ」や「最大行幅」の設定がある場合は、そこから調整可能
　例：Minimal や Blue Topaz などはUIから行幅調整可能なテーマです

✅ 方法3：CSS Snippets（スニペット）で対応

テーマに影響を与えず変更したいなら：

.obsidian/snippets/ フォルダを作成（なければ）
その中に custom-width.css などを作って以下を記入：

.markdown-preview-view,
.markdown-source-view.mod-cm6 .cm-content {
  max-width: 800px;
  margin: 0 auto;
}

Obsidianの「設定 → 外観 → CSSスニペット」で有効化

📌 補足

.cm-content → ソース表示モード（Live Preview含む）
.markdown-preview-view → リーディングモード（読み取り専用ビュー）

🙂 タケ：
ソースモード（編集）の幅は画面いっぱいで、リーディングモードとライブプレビューが同じ幅 700px にしたいんだけど、できる？

🤖 チャットさん：
はい、できます！
以下のCSSスニペットを使えば、あなたの要望：

✅ 要望まとめ

ソースモード（編集）：幅は画面いっぱい
ライブプレビュー＆リーディングモード：幅700pxに制限（中央揃え）

✅ 実現するCSSスニペット：

/* リーディングモードとライブプレビューは幅700pxに制限 */
.markdown-preview-view,
.markdown-source-view.mod-cm6.is-live-preview .cm-content {
  max-width: 700px;
  margin: 0 auto;
}

/* ソースモード（通常の編集モード）は幅制限なし */
.markdown-source-view.mod-cm6:not(.is-live-preview) .cm-content {
  max-width: none;
}

✅ 設定手順：

ObsidianのVault内に .obsidian/snippets/ フォルダを作成（なければ）
custom-width.css などの名前で上記CSSを保存
Obsidian →「設定」→「外観」→「CSSスニペット」から有効化
必要に応じて再起動 or 外観の再読み込み（コマンドパレットで 外観: 再読み込み）

🔍 確認方法

「ソースモード」：行幅がウィンドウいっぱいになる
「ライブプレビュー」および「リーディングモード」：最大幅700pxに中央寄せで表示される

🙂 タケ：
もう一度お願い。「ソースモード」は行幅がウィンドウいっぱい、「ライブプレビュー」は650px、「リーディングモード」は700pxで。

🤖 チャットさん：
了解です！以下のCSSスニペットを使えば、以下の設定が実現できます：

✅ 要望まとめ（再掲）

モード	最大幅
ソースモード（編集）	画面いっぱい（制限なし）
ライブプレビュー	650px
リーディングモード（読み取り）	700px

✅ CSSスニペット：

/* 🔵 リーディングモード（読み取りビュー）：700px幅に中央寄せ */
.markdown-preview-view {
  max-width: 700px;
  margin: 0 auto;
}

/* 🟢 ライブプレビュー：650px幅に中央寄せ */
.markdown-source-view.mod-cm6.is-live-preview .cm-content {
  max-width: 650px;
  margin: 0 auto;
}

/* 🟡 ソースモード（通常の編集モード）：幅制限なし */
.markdown-source-view.mod-cm6:not(.is-live-preview) .cm-content {
  max-width: none;
}

✅ 設定手順：

Obsidianで使っているVaultフォルダを開く
.obsidian/snippets/ フォルダがなければ作成
中に custom-width.css という名前で上記のCSSを保存
Obsidianのメニュー →「設定」→「外観」→「CSSスニペット」でスニペットを有効化
有効化後、再起動または「外観: 再読み込み」で反映

📘 セル内の余白調整

🙂 タケ：
Obsidianの表のセル内の余白って調整できるの？

🤖 チャットさん：
はい、Obsidianの表セル内の余白（パディング）はCSSで調整可能です。
標準テーマやコミュニティテーマでも、CSSスニペットで上書きできます。

✅ 表のセル内余白（padding）の調整方法

🔧 CSS例：上下左右の余白を調整する

/* 表のセル全体に余白を設定 */
.markdown-preview-view table td,
.markdown-preview-view table th,
.markdown-source-view.mod-cm6 .cm-table-widget td,
.markdown-source-view.mod-cm6 .cm-table-widget th {
  padding: 4px 8px;  /* 上下4px、左右8px：お好みで調整可能 */
}

padding: 上下左右;

✅ 設定手順（スニペットで行う場合）

Vault内の .obsidian/snippets/ フォルダを開く（なければ作成）
table-padding.css などの名前で上記CSSを保存
Obsidianの「設定 → 外観 → CSSスニペット」から有効化
反映されない場合は再起動または「外観: 再読み込み」

💡 補足ポイント

td は通常のセル、th は見出しセル
ソースモード（表がウィジェット的に表示される場合）にも適用するには .cm-table-widget が必要
Obsidianのバージョンやテーマによって多少クラス名が変わる可能性あり

📘 セル内改行

🙂 タケ：
Obsidianのソースモードで特定の表内のセルについて改行禁止とか設定できるの？

🤖 チャットさん：
はい、一部の表内セルだけを「改行禁止（折り返しなし）」にすることはCSSで可能ですが、以下の条件が付きます：

❗前提条件：そのセルに特定の「HTMLタグ」や「クラス名」などで目印をつける必要がある

Markdownでは通常、セル単体にクラスやスタイルはつけられません。
しかし、HTMLを直接書く or 特定のパターンにCSSを適用することで実現可能です。

✅ 方法1：HTML表記を使って nowrap セルを作る

<table>
  <tr>
    <td>通常セル</td>
    <td style="white-space: nowrap;">改行禁止セルの中身が長いけど折り返さない</td>
  </tr>
</table>

style="white-space: nowrap;" を指定すれば、そのセルの中のテキストは改行されません。
Obsidianのライブプレビュー／リーディングモードで有効。
ソースモードではHTMLがそのまま見えるため、少し見づらくなります。

✅ 方法2：CSSで特定の文字列やパターンに適用（やや上級）

HTMLを使わず、CSSで「特定の内容を含むセル」だけにスタイルを適用することもできますが、これは内容ベースの選択が必要で、確実性は低めです。

✅ 方法3：全体を改行禁止にして、一部だけ解除（逆転発想）

/* 表全体で改行を禁止 */
.markdown-preview-view table td {
  white-space: nowrap;
}

/* 特定のtdだけ改行OK（例：「.wrap」クラスを使う） */
.markdown-preview-view table td.wrap {
  white-space: normal;
}

この場合、次のようにHTMLでラベルをつければ一部だけ解除できます：

<td class="wrap">このセルは折り返して表示されます</td>

✅ 結論

方法	改行禁止できるか	対応モード	備考
Markdown標準表	❌ できない	ソース／ライブ	セル単位の制御不可
HTML表	✅ できる	ライブ／リーディング	`style` 属性が必要
CSSカスタム	✅ 条件付き	ライブ／リーディング	クラスやパターン設定が必要

🔧 おすすめ

編集効率重視 → Markdown表（改行制限は難しい）
表示重視 → HTML表 + nowrapスタイル

🙂 タケ：
まずこの表の仕上がりわかる？👇

| 特徴 | DALL·E 3 | Sora | | ---------------- | ------------------------------------- | ---------------------------- | | 🎯 目的 | 静止画の生成 | 動画（動き＋時間経過）の生成 | | 📸 出力 | 画像（1枚） | 動画（数秒～最大約10秒） | | 🎨 得意分野 | 構図、光、物語性のある一枚絵 | モーション、カメラワーク、時間的演出 | | 🧠 構文理解力 | 非常に高く、ChatGPTと連携して正確な絵を描く | 指示文に基づいて動くが、解釈にばらつきあり | | 🖼 画質 | 高精細な静止画（1024×1024など） | 現時点では1080p未満が多く、絵は少し荒れがち | | 🧩 制御性 | かなり高い（Inpainting, image prompt対応） | 低め（プロンプト依存で、反復性も不安定） |

🤖 チャットさん：
はい、この表の仕上がりはとても良いです！
Markdownとしても適切に書かれており、以下のような点がしっかりしています：

✅ 内容面の評価

項目	評価内容
構成	両者を項目ごとに比較する「比較表」として非常に明快。
絵文字の使用	各行の特徴が視覚的にわかりやすくなっており、読者の理解を助けます。
文の簡潔さ	1セルあたりの文章が長すぎず、ポイントが明確です。
比較項目の選定	DALL·E 3 と Sora の違いを説明するのに適切な切り口です（目的・出力・得意分野・構文理解力・画質・制御性）。

✅ 技術的チェック（Markdownとして）

パイプ（|）の数と位置：揃っていて問題なし
区切り行（---）：正しい
文字化け：なし（· や絵文字もOK）
各セルの内容：整っていて表が崩れにくい

✅ 表示イメージ（GitHub風表示やObsidianなど）：

特徴	DALL·E 3	Sora
🎯 目的	静止画の生成	動画（動き＋時間経過）の生成
📸 出力	画像（1枚）	動画（数秒～最大約10秒）
🎨 得意分野	構図、光、物語性のある一枚絵	モーション、カメラワーク、時間的演出
🧠 構文理解力	非常に高く、ChatGPTと連携して正確な絵を描く	指示文に基づいて動くが、解釈にばらつきあり
🖼 画質	高精細な静止画（1024×1024など）	現時点では1080p未満が多く、絵は少し荒れがち
🧩 制御性	かなり高い（Inpainting, image prompt対応）	低め（プロンプト依存で、反復性も不安定）

💡補足（用途によって）

ObsidianやGitHub、VS CodeのMarkdownプレビューなどではそのまま綺麗に表示されます。
note.comなどのMarkdown非対応サービスでは、表が崩れるので注意が必要です。

🙂 タケ：
ここからなんだけど、特徴の列の項目だけは改行なしで、表の行幅625pxになるように調整できる？

🤖 チャットさん：
了解しました！
以下はMarkdown形式の表で：

表全体の最大幅を625pxに見せるための工夫
「特徴」列は改行禁止（nowrap）
表示先がObsidianやGitHubなどCSSが反映される環境を想定

✅ Markdown + CSS埋め込み対応版（HTML併用）

Markdown単体では「セル幅」や「改行禁止」を完全には制御できないため、HTML併用で目的を実現します：

<style>
table {
  max-width: 625px;
  table-layout: fixed;
  width: 100%;
}
th, td {
  padding: 4px 8px;
  word-wrap: break-word;
}
td.nowrap {
  white-space: nowrap;
}
</style>

| <span class="nowrap">特徴</span> | DALL·E 3 | Sora |
|-----------------------------|-------------------------------|-----------------------------|
| 🎯 目的                      | 静止画の生成                       | 動画（動き＋時間経過）の生成     |
| 📸 出力                      | 画像（1枚）                       | 動画（数秒～最大約10秒）         |
| 🎨 得意分野                  | 構図、光、物語性のある一枚絵       | モーション、カメラワーク、時間的演出 |
| 🧠 構文理解力                | 非常に高く、ChatGPTと連携して正確な絵を描く | 指示文に基づいて動くが、解釈にばらつきあり |
| 🖼 画質                      | 高精細な静止画（1024×1024など）    | 現時点では1080p未満が多く、絵は少し荒れがち |
| 🧩 制御性                    | かなり高い（Inpainting, image prompt対応） | 低め（プロンプト依存で、反復性も不安定） |

✅ ポイント

table-layout: fixed;：列幅を均等に配分しつつ、全体を625pxに制限
.nowrap クラス：特徴列の改行を禁止
style タグはObsidianなどで有効。noteでは反映されない可能性あり

🙂 タケ：
Markdownだけで「改行禁止」「列幅固定」はできる？

🤖 チャットさん：
いいえ、できません。
純粋なMarkdownではセル幅指定・改行抑制の制御ができないため、HTML併用が唯一の方法です。

📘 HTML の行幅は？

🙂 タケ：
001 noteの話はチャットさんから.html
このファイルの本文の行幅ってわかる？

🤖 チャットさん：
アップロードいただいたHTMLファイル（001 noteの話はチャットさんから.html）を確認したところ、本文の行幅に関しては以下のような設定になっていました。

✅ 結論：本文の最大行幅は 700px

📄 根拠：

<div class="content-body" style="max-width:700px;margin:0 auto;">

この div 要素が本文全体を囲っており、max-width: 700px で中央寄せ (margin: 0 auto) に設定されています。

💡補足

ブラウザ幅が700px未満になった場合は、それに合わせて縮まります（レスポンシブ）。
これと同じスタイルにしたい場合は、CSSで以下のように書けばOKです：

.content-body {
  max-width: 700px;
  margin: 0 auto;
}

🤖 チャットさん：
もしこの「700px」を変更したい場合や、ライブプレビューで同じ幅感にしたい場合など、他のモードへの反映もご希望でしたらお知らせください。
必要なCSS調整をご案内します。

🙂 タケ：
700pxを800pxにしたい

🤖 チャットさん：
了解です！アップロードされたHTMLファイルで本文の幅を 700px → 800px に変更するには、以下のように該当箇所を編集してください。

✅ 手順：HTML内の該当スタイルを修正

🔍 現在の該当箇所（変更前）：

<div class="content-body" style="max-width:700px;margin:0 auto;">

✏ 修正後（800pxに変更）：

<div class="content-body" style="max-width:800px;margin:0 auto;">

💡補足：CSSファイルで制御している場合（外部CSSまたは <style> タグ内）

もしこのスタイルがCSSで制御されている場合は、以下のように書き換えます：

.content-body {
  max-width: 800px;
  margin: 0 auto;
}

🔄 更新後の保存・反映

修正したHTMLファイルを保存
ブラウザで開いて、本文の幅が800pxに広がったことを確認