Obsidian で プロパティを右に表示するCSS

MaybeFix

今回はあんまり気力がないので、リュウジの虚無レシピ並みに下書き状態垂れ流しで失礼します。

以下の条件下で試しています。

- Windows11 64bit
- ノーパソ（1920×1080）
- Obsidian 1.6.5

うまくやるとこんな感じになる

CSS①　まずエディタを左にズラす

まず左にズラします。超適当に設定したんで、色々終わってるかも。不都合あればカスタマイズしてください。

.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer>.inline-title{
  margin-inline-start: 6.4% !important;
}

.markdown-source-view.mod-cm6.is-readable-line-width .cm-content, .markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer{
  padding-right: 11.6%;
}

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer{
  padding-right: 18.6%;
}

CSS②　プロパティを表示して右にもっていく

　プロパティ部分を右にもっていくついでに、以下の記事を参考にしてプロパティのフェードなど入れました。

　たぶん absolute と％表示にするのがミソ。スクロールさせても表示が動かないようにするなら fixed に設定するのが良いでしょう。

.markdown-source-view.mod-cm6.is-readable-line-width .cm-sizer>.metadata-container{
  margin-inline-start: 12% !important;
  position: absolute; /* 右横にずっと表示させたい場合は fixed を使う */
  width: 20%; /* 21.4% くらいでもいいかも */
  left: 60%; /* 65% くらいでもいい。各々ウィンドウ幅に応じて調整してください */
  padding: 10px;
  margin-block-end: 1%;
}

.metadata-container.is-collapsed {
  margin-bottom: -2em;
  padding-top: 0;
  padding-bottom: 0;
}

.metadata-properties-heading.is-collapsed:not(:hover) {
  transition: linear .3s;
  opacity: 0;
  height: 1em;
}

.metadata-properties-heading.is-collapsed {
  transition: linear .3s .2s;
  height: 1em;
}

CSS③　リーディングビューでは非表示に

　まあ見えてても編集しないもん……

body {
  --metadata-display-reading: none;
}

既知の不具合

このままの状態だと色々面倒です。

  • ウィンドウ幅によってはプロパティの部分がはみ出すっぽい

  • suggestion-container の位置が悪く、入力するときに被る

    • top と left を直書きしてるらしく、簡単に動かせない

    • 「ガハハ、俺は無敵だ」って人は、top の値を上書きすれば問題ないとは思うけど……w

CSS④ サジェストの位置を調節する

　ということで、上記の不具合を応急処置的に調整するためのいくつかのアプローチです。適宜変えてください。それぞれ一長一短あります。

/*  */
.suggestion-container{
  top: 330px !important;
  left: 1057px !important;
  width: 20%;
}

ウィンドウ幅対応型↓

  .suggestion-container{
    top: 45% !important;
    left: 75.3% !important;
    width: 20%;
  }

見た目はアレだけど左にズラしてもいいとは思う

  .suggestion-container{
    top: 35% !important;
    left: 60.3% !important;
    width: 20%;
  }

あるいは margin を指定

  .suggestion-container{
    margin-top: 5%;
    width: 20%;

いい解決法があったら教えて下さい

このCSSの何がいいのか？

  • 右にプロパティを表示してメモ代わりにできる

  • プロット的に使える……気がする

まとめ

　いや～雑すぎてひどいですね。
　もう少しスタイリッシュに誰かまとめてくれねえかな～（人任せ）

いいなと思ったら応援しよう！