## 概要
> [!right-bubble] ![[minerva-face-right.webp]]
>
> こういう感じで。
> [!left-bubble] ![[claude-san-face.webp]]
>
> お互いが会話しているようなフキダシを表現したいです。ただし、以下の条件を満たすように。
>
> - [[Obsidian]]の[[Markdown]]表現を極力利用できること
> - 画像はフキダシごとに気軽に差し替え可能であること
> - PCでもモバイルでも見やすいこと
> - [[Reading view]]や[[Live Preview]]でも表示されること
> - [[Obsidian Publish]]でも表示されること
> [!right-bubble] ![[minerva-face-right.webp]]
>
> 画像とかも入れられるのよね。
> ![[minerva-minichara.webp|200x300]]
## ソリューション
[[CSS]]をカスタマイズし、[[コールアウト]]で表現します。
### CSS
> [!code]- 展開してCSSファイルをコピーし貼り付けてください
>
> ```css
> /* なくてもいいかも */
> .callout-content .markdown-preview-view {
> font-size: 100%;
> }
>
> /* 左側画像/右側フキダシのセリフ */
> .callout[data-callout="right-bubble"] {
> display: flex;
> border: none;
> padding: 0.25em 0;
> margin: 2.25em 0;
> background-color: inherit;
> font-size: 100%;
> position: relative;
> }
> .callout[data-callout="right-bubble"] > .callout-title {
> width: 160px;
> aspect-ratio: 1;
> flex-shrink: 0;
> }
> .callout[data-callout="right-bubble"] > .callout-title > .callout-icon {
> display: none;
> }
> .callout[data-callout="right-bubble"]
> .callout-title
> .callout-title-inner::before {
> content: "";
> position: absolute;
> top: 30px;
> left: 139px;
> width: 0;
> height: 0;
> border: 12px solid transparent;
> border-right: 12px solid var(--background-primary);
> z-index: 2;
> }
> .callout[data-callout="right-bubble"]
> .callout-title
> .callout-title-inner::after {
> content: "";
> position: absolute;
> top: 30px;
> left: 134px;
> margin-top: -2px;
> border: 14px solid transparent;
> border-right: 14px solid var(--text-muted);
> z-index: 1;
> }
> .callout[data-callout="right-bubble"]
> .callout-title
> .callout-title-inner
> img {
> margin: 0;
> }
> .callout[data-callout="right-bubble"] > .callout-content {
> border: solid 2px var(--text-muted);
> border-radius: 1em;
> min-height: 68px;
> height: fit-content;
> padding: 0 1em;
> }
>
> /* 右側画像/左側フキダシのセリフ */
> .callout[data-callout="left-bubble"] {
> display: flex;
> flex-direction: row-reverse;
> border: none;
> padding: 0.25em 0;
> background-color: inherit;
> font-size: 100%;
> position: relative;
> }
> .callout[data-callout="left-bubble"] > .callout-title {
> width: 160px;
> aspect-ratio: 1;
> flex-shrink: 0;
> }
> .callout[data-callout="left-bubble"] > .callout-title > .callout-icon {
> display: none;
> }
> .callout[data-callout="left-bubble"]
> .callout-title
> .callout-title-inner::before {
> content: "";
> position: absolute;
> top: 30px;
> right: 139px;
> width: 0;
> height: 0;
> border: 12px solid transparent;
> border-left: 12px solid var(--background-primary);
> z-index: 2;
> }
> .callout[data-callout="left-bubble"]
> .callout-title
> .callout-title-inner::after {
> content: "";
> position: absolute;
> top: 30px;
> right: 134px;
> margin-top: -2px;
> border: 14px solid transparent;
> border-left: 14px solid var(--text-muted);
> z-index: 1;
> }
> .callout[data-callout="left-bubble"]
> .callout-title
> .callout-title-inner
> img {
> margin: 0;
> }
> .callout[data-callout="left-bubble"] > .callout-content {
> border: solid 2px var(--text-muted);
> border-radius: 1em;
> min-height: 68px;
> height: fit-content;
> padding: 0 1em;
> }
>
> /* モバイル調整 */
> @media screen and (max-width: 800px) {
> .callout[data-callout="right-bubble"] > .callout-title {
> width: 120px;
> }
> .callout[data-callout="right-bubble"]
> > .callout-title
> > .callout-title-inner::before {
> left: 99px;
> }
> .callout[data-callout="right-bubble"]
> > .callout-title
> > .callout-title-inner::after {
> left: 94px;
> }
> .callout[data-callout="right-bubble"] > .callout-content {
> font-size: 90%;
> }
>
> .callout[data-callout="left-bubble"] .callout-title {
> width: 120px;
> }
> .callout[data-callout="left-bubble"]
> > .callout-title
> > .callout-title-inner::before {
> right: 99px;
> }
> .callout[data-callout="left-bubble"]
> > .callout-title
> > .callout-title-inner::after {
> right: 94px;
> }
> .callout[data-callout="left-bubble"] > .callout-content {
> font-size: 90%;
> }
> }
> ```
### 本文に挿入
右向きのフキダシは `right-bubble` 、左向きのフキダシは `left-bubble` という名称の[[コールアウト]]を使います。[[コールアウト]]のタイトル部分には表示したい発話者の画像を挿入します。
#### 記入例と表示例: 全4例
```markdown
> [!right-bubble] ![[minerva-face-right.webp]]
>
> **[[Minervaさん]]:**
> 右向きのフキダシを用いた例です。
```
> [!right-bubble] ![[minerva-face-right.webp]]
>
> **[[ミネルヴァ]]さん:**
> 右向きのフキダシを用いた例です。
```markdown
> [!left-bubble] ![[claude-san-face.webp]]
>
> **[[Claudeさん]]:**
> 左向きのフキダシを用いた例です。
>
> [[Callout]]なのであらゆる表現が可能です。 ↓のように画像を入れることも☺️
> ![[claude-san-minichara.webp|claude-san-minichara|240x360]]
```
> [!left-bubble] ![[claude-san-face.webp]]
>
> **[[Claudeさん]]:**
> 左向きのフキダシを用いた例です。
>
> [[コールアウト]]なのであらゆる表現が可能です。 ↓のように画像を入れることも☺️
> ![[claude-san-minichara.webp|claude-san-minichara|200x300]]
```markdown
> [!right-bubble] ![[masaharu.webp]]
>
> **[[マサハル]]:**
> 画像サイズは 160px x 160px を想定しているので気をつけるワン。サイズが足りないと余白が開いてしまうし、縦横比が違うとトリミングされるワン。
```
> [!right-bubble] ![[masaharu.webp]]
>
> **[[マサハル]]:**
> 画像サイズは 160px x 160px を想定しているので気をつけるワン。サイズが足りないと余白が開いてしまうし、縦横比が違うとトリミングされるワン。
```markdown
> [!left-bubble] ![[obsidian-chara-mini.webp|obsidian-chara-mini]]
> **[[Obsidianちゃん]]:**
> 小さいサイズにも対応してほしかったり、動作不具合などを発見したら、[[Bluesky]]で[[📕tadashi-aikawa]]まで連絡もらえると対応できるかもしれないわね。
```
> [!left-bubble] ![[obsidian-chara-mini.webp|obsidian-chara-mini]]
> **[[Obsidianちゃん]]:**
> 小さいサイズにも対応してほしかったり、動作不具合などを発見したら、[[Bluesky]]で[[📕tadashi-aikawa]]まで連絡もらえると対応できるかもしれないわね。