yakataの情報奮闘記

プログラミングの話をします

Obsidian（Markdown）で画像を左右に並べる方法（CSS)

CSS Markdown Obsidian

まえがき

こんにちは、yakata66です。 最近Obsidianというものにハマっています。ObsidianはMarkdownを使ったメモアプリです。 形式張らずに書くことができる手軽さと、検索性を兼ね備えているのが売りです。 良くも悪くもすべてをMarkdown形式で保存しているため、最悪Obsidianのサービスが終了したとしても、メモが保存されるという安心感もあります。

Markdownなので、基本的には上から下にしかかけません。しかし、文字列の横に画像を置きたいことは結構あると思います。今回はそれを実現しました

本題。画像を横に置く方法

ObsidianではCSSを使うことが出来ます。本来はテーマ（背景の色や文字の色など）のために導入されていますが、CSSはもっと色々とできるので、今回はこれを使って画像の回り込みをやってみます。 （正直分かる人にとってはCSS使えるの時点で帰って大丈夫です）

結論から書くと、以下のコードをcssの最後に貼った上で、画像のソースの最後に"#float"と書くだけです。 ex. [IMAGE](./path/to/image.jpg#float)

div[src$='#float'] {
  float:right;
  margin: 10px;
  width: 30%;
}

コードの解説

css3になってから、属性に書いてある内容をセレクタにすることができるようになったようです。上のコードではdivタグでsrc属性が"#float"で終わるようなものを選ぶセレクタを指定してます。 後はそれに対してfloat:right;をしているだけですね。大きさやmarginは趣味です。

おわりに

今回はObsidianで画像を横に置く方法について解説しました。属性をユーザーが追加で付けられないという制約があるので、なんでもできるわけではありませんが、結構応用が効くと思いますので、色々カスタマイズして遊んでみてください。最後に参考文献を載せておきます。