noteで「灰色の枠」を作る方法｜背景つきで強調するテクニック

noteの記事を読んでいると、
一部の文章が灰色の背景で囲まれていて、ちょっと目立っているのを見たことありませんか？

「どうやってやるんだろう？」
「自分の記事でも使えたら便利そう！」

そう思って調べてみたら、とても簡単な方法があることがわかりました。
せっかくなのでシェアしますね。

方法は2つだけ

背景つきボックスを作るには、大きく分けて2つのやり方があります。

1. 引用ブロックを使う

2. コードブロックを使う

それぞれ雰囲気が違うので、使い分けると記事が読みやすくなります。

引用ブロック（手軽に強調したいとき）

文章の先頭に「>」を入れるだけでOK。

会話っぽくしたいときや、ちょっとした補足を目立たせたいときに便利です。
操作もすごく簡単なので、初心者の人でもすぐに使えます。

コードブロック（しっかり目立たせたいとき）

もうひとつは「コードブロック」。
こちらは灰色の背景で、文章が枠に囲まれたように表示されます。

noteでは、Markdownの「```」を使っても反応しません。
代わりに エディタの左にある「＋マーク」から「コード」を選ぶ と、灰色の入力欄が出てきます。

そこに文章を書けば完成です。

この中に文章を書くと
灰色のボックスで表示されます。
複数行でもOKです。

ChatGPTのプロンプトを貼るときや、操作手順をまとめたいときなどにピッタリです。

日本語キーボードのちょっとした注意点

ネットで「1の左にあるキーを押すと出る記号を使う」と書かれていることがありますが、これは海外のキーボードの話です。
日本語キーボードでは「1」の左は 半角/全角キーになっています。

でも安心してください。
noteで背景ボックスを作るときに、このキーは使いません。
「＋ → コード」を選べばOKです。

使い分けのコツ

• 引用ブロック … ちょっとした補足や会話の表現に。

• コードブロック … プロンプト、手順、しっかり強調したい部分に。

この2つを場面ごとに使い分けると、記事がグッと読みやすくなります。

まとめ

noteで背景色つきのボックスを作るのは、とても簡単です。

• 「引用ブロック」なら「>」をつけるだけ。

• 「コードブロック」なら「＋ → コード」を選んで入力するだけ。

• 日本語キーボードでは「1の左は半角/全角キー」なので気にしなくて大丈夫。

ちょっとした工夫ですが、文章の見やすさがグッと変わります。
ぜひ次の記事から試してみてくださいね。