Obsidianの今使ってるCSSスニペットをまとめてみた2023夏(なとぅ)
Image by AI素材.com
今年の3月に下記のような記事を書いて見ました
あれから新しいプロパティなど様々な変化がありそうな事がありましたので、一旦あれからの変化と追加分をまとめてみます。
(ただし殆どが特定のプラグインについているものです)
新しいcssスニペット
S-Checkboxes.css
複数種のチェックボックスを表現するcssスニペット。スニペットですがCheckboxの種類を増やすことができます。またStyle Settings Pluginを使用することにより取り消し線やその他の設定もできるようになります。
https://gist.github.com/OliverBalfour/b87459fd55cf1f5832a2e0996a6f45a0
(編集もしているけど行数が多いので割愛)
プラグインに付属するcssスニペット
banner-bug.css
bannerプラグイン使用時のプロパティなどの表示位置を調整する。
/* Deals with the editor view */
div.cm-editor:has(.has-banner) .inline-title
{
margin-top: calc(var(--banner-height) + 0rem);
margin-left: 0rem;
margin-bottom: 0rem;
position: static;
}
div.cm-editor:has(.has-banner) div.obsidian-banner-spacer {
position: absolute;
}
div.cm-editor:has(.has-banner) .obsidian-banner-icon {
position: absolute;
top: calc(var(--banner-height) + 0px);
}
/* Deals with the markdown view */
div.markdown-reading-view:has(.obsidian-banner-wrapper) .inline-title
{
margin-top: calc(var(--banner-height) + 2.9rem);
margin-bottom: 2rem;
position: static;
}
div.markdown-reading-view:has(.obsidian-banner-wrapper) div.obsidian-banner-spacer {
position: absolute;
}
div.markdown-reading-view:has(.obsidian-banner-wrapper) div.obsidian-banner-wrapper {
margin-top: 0;
}
div.markdown-reading-view:has(.obsidian-banner-wrapper) .obsidian-banner-icon {
position: absolute;
top: calc(var(--banner-height) + 10px);
}
supercharged-links-gen.css
「Supercharged Links」プラグインを使用するときに「Style Settings」プラグインで設定するときに使用できるCSSスニペット。
ここに記載しているもの自体は「#Obsidian/Plugin」というタグを含むノートの表示色を変更するもの。
/* WARNING: This file will be overwritten by the plugin.
Do not edit this file directly! First copy this file and rename it if you want to edit things. */
:root {
--dff8-8675-color: #2FAB63;
--dff8-8675-weight: initial;
--dff8-8675-before: '';
--dff8-8675-after: '';
--dff8-8675-background-color: #ffffff;
--dff8-8675-decoration: initial;
}
div[data-id="dff8-8675"] div.setting-item-description,
[data-link-tags*="Obsidian/Plugin" i] {
color: var(--dff8-8675-color) !important;
font-weight: var(--dff8-8675-weight);
}
.c-dff8-8675-use-background div[data-id="dff8-8675"] div.setting-item-description,
.c-dff8-8675-use-background .data-link-text[data-link-tags*="Obsidian/Plugin" i] {
background-color: var(--dff8-8675-background-color) !important;
border-radius: 5px;
padding-left: 2px;
padding-right: 2px;
text-decoration: var(--dff8-8675-decoration) !important;
}
div[data-id="dff8-8675"] div.setting-item-description::before,
.data-link-icon[data-link-tags*="Obsidian/Plugin" i]::before {
content: var(--dff8-8675-before);
}
div[data-id="dff8-8675"] div.setting-item-description::after,
.data-link-icon-after[data-link-tags*="Obsidian/Plugin" i]::after {
content: var(--dff8-8675-after);
}
/* @settings
name: Supercharged Links
id: supercharged-links
settings:
-
id: dff8-8675
title: tag is Obsidian/Plugin
description: Example note
type: heading
collapsed: true
level: 3
-
id: dff8-8675-color
title: Link color
type: variable-color
format: hex
default: '#2FAB63'
-
id: dff8-8675-weight
title: Font weight
type: variable-select
default: initial
options:
- initial
- lighter
- normal
- bold
- bolder
-
id: dff8-8675-decoration
title: Font decoration
type: variable-select
default: initial
options:
- initial
- underline
- overline
- line-through
-
id: dff8-8675-before
title: Prepend text
description: Add some text, such as an emoji, before the links.
type: variable-text
default: ''
quotes: true
-
id: dff8-8675-after
title: Append text
description: Add some text, such as an emoji, after the links.
type: variable-text
default: ''
quotes: true
-
id: c-dff8-8675-use-background
title: Use background color
description: Adds a background color to the link. This can look buggy in live preview.
type: class-toggle
-
id: dff8-8675-background-color
title: Background color
type: variable-color
format: hex
default: '#ffffff'
*/
dashboard.css
「Homepage」プラグインのためのCSSスニペット。
/* Updated 2022-02-28 */
.dashboard {
padding-left: 25px !important;
padding-right: 25px !important;
padding-top: 20px !important;
}
.dashboard .markdown-preview-section {
max-width: 100%;
}
/* Title at top of the document */
.dashboard .markdown-preview-section .title {
top: 60px;
position: absolute;
font-size: 26pt !important;
font-weight: bolder;
letter-spacing: 8px;
}
.dashboard h1 {
border-bottom-style: dotted !important;
border-width: 1px !important;
padding-bottom: 3px !important;
}
.dashboard div > ul {
list-style: none;
display: flex;
column-gap: 50px;
flex-flow: row wrap;
}
.dashboard div > ul > li {
min-width: 300px;
width: 15%;
}
dashboard-ReadLineLength.css
上記の追加cssスロペット。「Readable line length」設定を強制化する。
*
Optional css that can be added to make dashboards use wide margin
if "Readable line length" is enabled in Editor
Updated 2022-02-28
*/
.dashboard .markdown-preview-section {
width: 100% !important;
max-width: 100% !important;
}
使用をやめたcssスニペット
remove-strike-from-checked.css
チェックボックスのチェックしたときの「打ち消し線」を表示しなくする。
上記のS-Checkboxes.cssで可能になったので使用終了。
Day of Week.css
曜日タグをアイコン表示に置き換える。ほぼ自作。
アイコン自体に曜日にぴったりなものがなかったのと、いよいよ曜日がどうでもいいほど忙しさがくっちゃくちゃになったのと、地味にリソースを食ってそうだったので使用終了。
現状のObsidianの版上げが落ち着けばまた変わるかもしれません(・ω・)つ旦
この記事が気に入ったらサポートをしてみませんか?