Obsidian で プロパティを右に表示するCSS
今回はあんまり気力がないので、リュウジの虚無レシピ並みに下書き状態垂れ流しで失礼します。
以下の条件下で試しています。
- Windows11 64bit
- ノーパソ(1920×1080)
- Obsidian 1.6.5
![](https://assets.st-note.com/img/1719651058589-E5HMYckNfo.png?width=1200)
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の何がいいのか?
右にプロパティを表示してメモ代わりにできる
プロット的に使える……気がする
まとめ
いや~雑すぎてひどいですね。
もう少しスタイリッシュに誰かまとめてくれねえかな~(人任せ)
この記事が気に入ったらサポートをしてみませんか?