[Obsidian]Markdown用のCSSを頑張って作ってみた[随時更新]

はじめに

普段のメモはObsidianを使っています。
Markdownサイコー！なんですけど、HTMLに出力する際にはやはりCSSを適用しておかないと読みづらいので、Obsidian用のCSSを作成しました。

基本的にはWeb上のどこかから拾ってきたやつの寄せ集めです。

この記事は随時更新していく予定です。

ObsidianでのCSSスニペット設定方法

CSSを作成するついでに、ObsidianでのCSSスニペット設定方法についても併せて記載しておきます。

1. 設定(歯車アイコン)をクリック
2. [オプション]の[外観]を選択
3. [CSSスニペット]-[style]のチェックをONにする
4. [CSSスニペット]の右側にあるフォルダアイコンをクリックし、snippetsフォルダを開く
5. 準備した「style.css」を保存する

CSSをつくってみた

以下、作ってみたCSSです。
CSSは得意ではないので、フォーマットとかは目をつぶってください。
コメントは気が向いたら追記していこうと思います。

style.css

/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */ 
  h1 {
    /*文字の上下 左右の余白*/
    padding: 0.4em 0.5em;
    /*文字色*/
    color: #494949;
    /*背景色*/
    background: #f4f4f4;
    /*左線*/
    border-left: solid 5px #7db4e6;
    /*下線*/
    border-bottom: solid 3px #d7d7d7;
  }

  h2 {
    position: relative;
    padding: 0.5em;
    background: #7db4e6;
    color: white;
  }

  h2::before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px rgb(149, 158, 155);
  }

  h3 {
    color: #494949;
    padding: .5em .75em;
    border-bottom: 2px solid #7db4e6;
  }

  h5 {
    display: inline-block;
    position: relative;
    z-index: 8;
    margin: 0;
    padding: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    background-color: #5a6165;
  }

  .div h5 {
    margin-top: -30px;
    padding-top: 56px;

  }

  /* テーブル */
  table {
    border-collapse: collapse;
    border: 1px solid #CCC;
  }
  th, td {
    padding: 5px 10px;
    border: 1px solid #CCC;
  }
  th {
    background: #EEE;
  }

  /* 数字付き箇条書き */
  ol
  {
      counter-reset: section;
      list-style-type: none;
  }
  ol li:before
  {
      counter-increment: section;
      content: counters(section, "-") ". ";
  }
  

  /* https://logicalbeat.jp/blog/3769/ */
  /**
  * codeタグ（コードテキスト）
  */
  code {
    font-family: "Meiryo", Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
  }

  /**
  * preタグ（整形済みテキスト）
  */
  pre {
    font-family: "Meiryo", Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
  }

  /**
  * blockquoteタグ（引用）
  */
  blockquote {
    border-color: #ea5219;
  }

参考

• 【ドキュメント】Markdownドキュメントのデザインをロジカルビート風にしてみた