![見出し画像](https://assets.st-note.com/production/uploads/images/91489109/rectangle_large_type_2_0bcc078be8093f56ef069c18f6314ef7.png?width=800)
noteで吹き出し的な表現を試してみた
おはようございます。noteで吹き出し的な表現を試してみます。
960 x 200 (px)で吹き出し(上)にあたる画像を作って、
960 x 20 (px)で吹き出し(下)にあたる画像を作成。
画像の中にテキスト部分を作る作戦です。
やってみたのがこちら!!↓↓
![](https://assets.st-note.com/img/1668809009163-mi5Cew57KO.png?width=800)
こうなるのか
![](https://assets.st-note.com/img/1668809084791-koimh5lKoQ.png?width=800)
キャプション入力欄がちょっと邪魔ですね…。文字が下になってしまう。
![](https://assets.st-note.com/img/1668809361260-2iDJICBgsj.png?width=800)
そんなこと言ったって仕方ないやろ。プラットフォームに合わせろや。
![](https://assets.st-note.com/img/1668809084791-koimh5lKoQ.png?width=800)
![](https://assets.st-note.com/img/1668809009163-mi5Cew57KO.png?width=800)
画像は一度貼り付ければコピペできるからラクだなあ。
スマホで見たらどうなるんだろう?
![](https://assets.st-note.com/img/1668809084791-koimh5lKoQ.png?width=800)
![](https://assets.st-note.com/img/1668809361260-2iDJICBgsj.png?width=800)
iPhoneとAndroidで見てみてチェックしてみよう。
![](https://assets.st-note.com/img/1668809084791-koimh5lKoQ.png?width=800)
自作吹き出しがどうなるのかスマホで見てみた!
iPhoneで見てみた結果がこちらです↓↓ 横幅のサイズ感が良いですね。
![](https://assets.st-note.com/img/1668810282285-mLfb4AKVfQ.png?width=800)
自作吹き出しをやってみた感想!
![](https://assets.st-note.com/img/1668810406233-wxt0FdSDyU.png?width=800)
充電12%てヤバいだろ。
キャプションで喋るとこうなる。
結構書けるな。
何行でもいけるのか?
中央揃えを逆手に取った画像を用意すれば
ワンチャンあるかも知れん。
![](https://assets.st-note.com/img/1668809084791-koimh5lKoQ.png?width=800)
![](https://assets.st-note.com/img/1668810581437-0AhD8ZzqOD.png?width=800)
お、おい!お前、小さい文字で色々喋るなよ!喋りすぎだぞ!
![](https://assets.st-note.com/img/1668809084791-koimh5lKoQ.png?width=800)
ということで今度から、色々な場面で吹き出し表現を使ってみたいと思います!
【追記】キャプション欄は邪魔なんかじゃなかった!
編集中の画面では、「キャプション欄のやつ、ちょっと邪魔じゃあないか?」なーんて思ってしまいましたが、投稿してみると、使われてないキャプション欄はナリを潜めてくれたようで、スッキリした見た目になりました。最高です!
こんな感じ↓
![](https://assets.st-note.com/img/1668811719700-DbnDW66hgl.png?width=800)
![](https://assets.st-note.com/img/1668809009163-mi5Cew57KO.png?width=800)
さすがnoteのUIは凄いなあ!
![](https://assets.st-note.com/img/1668809084791-koimh5lKoQ.png?width=800)
この記事が気に入ったらサポートをしてみませんか?