サイトのトップページなどに「新着情報」を表示するのに便利なのが、スクロールバーです。

スクロールバーの導入イメージ
今回は、ブロックエディタでスクロールバー付きボックスを作る方法をご紹介します。
※プラグインを使わず、追加CSSで記述する方法です。
目次
スクロールバー付きボックスをWordPressで作る方法(ブロックエディタ)
スクロールバー付きボックスを作る手順は3つです。
- 管理画面から追加CSSを登録する
- 個別記事に追加CSSを設定する
- 下書き保存後、プレビューで表示確認する
管理画面から追加CSSを登録する
まずは、WordPressのダッシュボード「外観」→「カスタマイズ」→「追加CSS」から、以下のコードを記述します。

.scroll{ overflow: auto; height: 200px; width: 100%; }
記述したら、忘れずに「公開」を押しておきましょう。
個別記事に追加CSSを設定する
次に、スクロールバーを設置したい個別記事のブロックを選択し、右画面の設定画面下部の「高度な設定」を展開します。
「追加CSSクラス」に、「scroll」と入力します。

そうすると、スクロールボックスが出現します。

ここに、項目を入力していきましょう。

下書き保存後、プレビューで表示確認する
入力できたら、下書き保存し、プレビューでスクロールバーが表示されるか確認しよう。

スクロールバー付きボックスのカスタマイズ色々
文字色や背景色を変える
スクロールバー内の文字の色や背景色を変えたい場合は、スクロールバーを選択した状態で、「ブロック」内の
・文字色
・背景色
を変更しましょう。

文字の一部を太文字にする
上の方法では、文字全てに設定が反映されてしまうので、一部を変更したい場合は以下のバーを使用します。

太文字にするには、文字を選択した状態で「B」を押します。

文字の一部に色を付ける
こちらで、一部の文字色を変更することができます↓

あとがき
今回は、ブロックエディタでスクロールバー付きボックスを入れる方法についてでした!
他にも細かな変更はできますが、今回は「これだけ覚えておけばOK」という基本的な操作のみを解説しました。
参考になれば嬉しいです。
【期間限定】ブログで月100万を叶えたノウハウを受取る
他にも…
◆ 本当に稼げる他社広告5選
◆ 図解付き!ブログの開設マニュアル
これらを無料でプレゼント中!
つい数年前まで普通のOLだった私が、たった一つのブログを始めたことで人生が変わりました。
初心者から始めたブログで、4ヶ月で月100万円の収入を叶え、今では時間や場所に縛られない自由なフリーランスとして働いています。
- 好きな場所、好きな時に働きたい
- 自宅やカフェで、PC一台で仕事をすることに憧れがある
- 文章を書く仕事で、月20万円以上を稼ぎたい
- お金を気にせずに旅行したり、経済的な不安から解放されたい
そんなあなたらしい人生を叶えるために、未経験からブログで収入を得る方法を解説したマニュアルを無料で配布しています。
初めて挑戦される方でも、安心してブログを開設できるよう、図解付きの手順書も併せてプレゼント中!
メルマガ登録者さん限定で、期間限定で配布していますが、いつ有料化するかわかりませんので、今のうちにお受け取りください。
ボタンをクリックして、登録フォームに「名前」と「メールアドレス」を入力したら、プレゼントが手に入ります。