Obsidianカスタマイズほぼ完成
今週から使い始めた、他機能ノートツールの”Obsidian”ですが、今日もカスタマイズを行った結果、使いたい機能や見た目のカスタマイズがほぼ完成しました。
先日のラベルに加えて、今日はCSSで見た目のカスタマイズを行いました。視認性が向上したのに加えて、アウトライナーとしては行間が詰まっていて見づらかったので行間を空けました。色もデフォルトだと寂しかったので、差し色をこのブログを同じ緑にして俺色に染めてやりました。
カスタマイズの結果が下のスクリーンショットです。コーチングのフィードバック用の内容ですが、本番のものは守秘義務があって使えないので、大体こんな感じで使えたらという思いも込めてサンプルを作ってみました。
以前から使いたかったコーチングのフィードバック用ツールとしては、これで機能としてほぼ完成したと言って良いのではないかと思います。また質問に太字を使うことで、視認性もさらに上がったので、とりあえずこの方法でやってみようと思います。
パッと見違和感がある、アンダーラインの黄色を緑にするか目下検討中です。
行間の設定
昨日までは行間が詰まりすぎて見にくかったので、改善できたのが大きいです。下のスクリーンショットが改善前の行間で、上のスクショと同じ内容ですがアウトライナーとしてはかなり窮屈で見づらいですね。
行間を設定するCSSの場所はわかっていたんですが、どうもうまく設定できなかったので色々試した結果、下の書き方でうまくいきました。
.cm-line{
padding-top: 4px !important;
padding-bottom: 4px !important;
}
行間は通常”line-height”で設定するところですが、折り返しの行間も空いてしまうため、paddingの上下で設定しています。また、!importantがないと適用されないのでご注意ください。
コーチングなどの比較的短い文を書く場合はそれほど気になりませんが、ブログの下書きや読書の写経などは一文が長くなるので、そのような場合も想定して汎用性の高い方法でカスタマイズしました。
テーマ”Atom”の色をカスタマイズ
テーマですがフォントサイズを変更できて、インデントの線が表示されるので”Atom”のライトテーマを使っていて、色をカスタマイズしました。
最初いろんな方のブログ記事で直接CSSを設定していましたが、全然ダメだったので開発者モード(Ctrl+Shift+i)でテーマのCSSを確認したところ、設定値に変数を使っていることがわかりました。
これでは直接値を設定しても反映されませんよね。
ダークテーマの場合は”.theme-dark”です。
弄ってみてわかったところはコメントしてありますので、ご参考にどうぞ。
.theme-light {
--background-primary: #fafafa; /* 編集画面 */
--background-primary-alt: #eaeaeb; /* 境界線 */
--background-secondary: #eaeaeb;
--background-secondary-alt: #DCE5D0; /* 外枠と吹き出し */
--background-accent: #fff;
--background-modifier-border: #dbdbdc;
--background-modifier-form-field: #fff;
--background-modifier-form-field-highlighted: #fff;
--background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
--background-modifier-success: #608E23;
--background-modifier-error: #e68787;
--background-modifier-error-rgb: 230, 135, 135;
--background-modifier-error-hover: #FF9494;
--background-modifier-cover: rgba(0, 0, 0, 0.8);
--text-accent: #7FD31F; /* 外枠の文字hover */
--text-accent-hover: #6AAF1A;
--text-normal: #383a42; /* 編集画面 */
--text-muted: #666; /* サイドメニュー */
--text-faint: #444; /* 左の枠 */
--text-error: #e75545;
--text-error-hover: #f86959;
--text-highlight-bg: rgba(255, 255, 0, 0.4);
--text-selection: rgba(138, 209, 52, 0.15); /* 文字列選択時のハイライト */
--text-on-accent: #f2f2f2;
--interactive-normal: #eaeaeb;
--interactive-hover: #dbdbdc;
--interactive-accent-rgb: 21, 146, 255;
--interactive-accent: #71AD2B; /* 選択時のアクセント */
--interactive-accent-hover: #8AD134;
--scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2);
--scrollbar-bg: rgba(0, 0, 0, 0.05);
--scrollbar-thumb-bg: rgba(0, 0, 0, 0.1);
--panel-border-color: #dbdbdc;
--gray-1: #383a42;
--gray-2: #383a42;
--red: #e75545;
--green: #4ea24c;
--blue: #3d74f6;
--purple: #a625a4;
--aqua: #0084bc;
--yellow: #e35649;
--orange: #986800;
}
現在、俺色に染まってない部分が確認できているだけで3箇所あるので、これから調べたり試したりして近日中に全部染め上げてしまう予定です。
コメント