見出し画像

Obsidianの今使ってるCSSスニペットをまとめてみた。

a-natsuki

Image by AI素材.com
追記：2023年8月15日
追加したり削除したりしました(・ω・)つ旦


picture-caption.css:画像の下に注釈を追加する。

📗Reading viewやObsidian Publishで画像の下に注釈を載せたい - Minerva

span[alt="example-image"] ~ em {
  /* 中央寄せ */
  display: flex;
  justify-content: center;
  /* 横幅が足りない場合、複数のDOMが含まれるとそれぞれが改行されるのを防ぐため */
  flex-wrap: wrap;
  /* 利用しているCSSによる. 画像のすぐ下に配置されるよう要調整 */
  margin-top: 0rem;
  /* 個人的にオススメなサイズ */
  font-size: 0.875rem;
}

remove-strike-from-checked.css:チェックボックスのチェックしたときの「打ち消し線」を表示しなくする。

ObsidianのCSSスニペットを書いた

:is(.markdown-preview-view,.markdown-rendered)  ul>li.task-list-item.is-checked, 
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task] {
  text-decoration: none;
}

Tab_Active.css:アクティブタブの文字色を目立たせる。自作。

ObsidianのCSSスニペットを書いた

:root
{
 --yellow_x: 255,255,0;
 --yellow: rgb(var(--yellow_x));
}
.theme-dark
{
  --tab-text-color-focused-active-current: var(--yellow);

Table of Contents.css:目次をつくるプラグイン [[Table of Contents]] にて入れ子のリストカウント（1.1、1.2…みたいな）を実現する。

GitHub - hipstersmoothie/obsidian-plugin-toc: Create a tables of contents for a note.

ol {
  counter-reset: item;
}

ol li {
  display: block;
}

ol li:before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  padding-right: 5px;
}

border-headings.css:見出しに下線をつける。

ObsidianのCSSスニペットを書いた

body {
  --border-header-color: var(--background-primary, black);
}

.HyperMD-header-1,
.markdown-preview-view h1 {
  border-bottom: solid 1px var(--h1-color);
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, var(--h1-color), var(--border-header-color), var(--border-header-color), var(--border-header-color));
}

.HyperMD-header-2,
.markdown-preview-view h2 {
  border-bottom: solid 1px var(--h2-color);
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, var(--h2-color), var(--border-header-color), var(--border-header-color), var(--border-header-color));
}

.HyperMD-header-3,
.markdown-preview-view h3 {
  border-bottom: solid 1px var(--h3-color);
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, var(--h3-color), var(--border-header-color), var(--border-header-color), var(--border-header-color));
}

.HyperMD-header-4,
.markdown-preview-view h4 {
  border-bottom: solid 1px var(--h4-color);
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, var(--h4-color), var(--border-header-color), var(--border-header-color), var(--border-header-color));
}

.HyperMD-header-5,
.markdown-preview-view h5 {
  border-bottom: solid 1px var(--h5-color);
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, var(--h5-color), var(--border-header-color), var(--border-header-color), var(--border-header-color));
}

.HyperMD-header-6,
.markdown-preview-view h6 {
  border-bottom: solid 1px var(--h6-color);
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, var(--h6-color), var(--border-header-color), var(--border-header-color), var(--border-header-color));
}

colorful-headings_default.css:見出しに色をつけます。

ObsidianのCSSスニペットを書いた

body {
  --h1-color: var(--color-red, var(--red, red));
  --h2-color: var(--color-orange, var(--orange, orange));
  --h3-color: var(--color-yellow, var(--yellow, yellow));
  --h4-color: var(--color-green, var(--green, green));
  --h5-color: var(--color-blue, var(--blue, blue));
  --h6-color: var(--color-purple, var(--purple, purple));
}

.markdown-preview-section h1,
.cm-header-1 {
  color: var(--h1-color) !important;
}

.markdown-preview-section h2,
.cm-header-2 {
  color: var(--h2-color) !important;
}

.markdown-preview-section h3,
.cm-header-3 {
  color: var(--h3-color) !important;
}

.markdown-preview-section h4,
.cm-header-4 {
  color: var(--h4-color) !important;
}

.markdown-preview-section h5,
.cm-header-5 {
  color: var(--h5-color) !important;
}

.markdown-preview-section h6,
.cm-header-6 {
  color: var(--h6-color) !important;
}

colorful-inline-code.css:どのテーマでも、 `インラインコード` を同じ色で固定できます。

ObsidianのCSSスニペットを書いた

body {
  --color-inline-code: hsl(60, 60%, 60%);
  --color-inline-code-background: hsl(120, 20%, 20%);
}

.markdown-source-view.mod-cm6 .cm-inline-code {
  color: var(--color-inline-code) !important;
  background-color: var(--color-inline-code-background) !important;
}

.cm-s-obsidian span.cm-inline-code {
  color: var(--color-inline-code);
  background-color: var(--color-inline-code-background);
}

Day of Week.css:曜日タグをアイコン表示に置き換える。ほぼ自作。

ObsidianのDailyNoteを少しだけリッチにする
My Obsidian Daily Note Template | Dann Berg: blog, newsletter, shop, and more

.tag[href="#曜日/0日"]::before {
 font-size: x-large;
 content: '🌞 ';
}
.tag[href^="#曜日/0日"] {
 font-size: 0;
 content: none;
}

.tag[href="#曜日/1月"]::before {
 font-size: x-large;
 content: '🌜 ';
}
.tag[href^="#曜日/1月"] {
 font-size: 0;
 content: none;
}

.tag[href="#曜日/2火"]::before {
 font-size: x-large;
 content: '🔥 ';
}
.tag[href^="#曜日/2火"] {
 font-size: 0;
 content: none;
}

.tag[href="#曜日/3水"]::before {
 font-size: x-large;
 content: '💧 ';
}
.tag[href^="#曜日/3水"] {
 font-size: 0;
 content: none;
}

.tag[href="#曜日/4木"]::before {
 font-size: x-large;
 content: '🌳 ';
}
.tag[href^="#曜日/4木"] {
 font-size: 0;
 content: none;
}

.tag[href="#曜日/5金"]::before {
 font-size: x-large;
 content: '💴 ';
}
.tag[href^="#曜日/5金"] {
 font-size: 0;
 content: none;
}

.tag[href="#曜日/6土"]::before {
 font-size: x-large;
 content: '⛰️ ';
}
.tag[href^="#曜日/6土"] {
 font-size: 0;
 content: none;
}


この記事が気に入ったらサポートをしてみませんか？