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プラグイン使用時のプロパティなどの表示位置を調整する。

ObsidianでNotionみたいなバナー（上部の画像）を設定する

/* 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スニペット。

Dashboard++ — a simple organization and navigation method for Obsidian Vaults

/* 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の版上げが落ち着けばまた変わるかもしれません(・ω・)つ旦