サイトのトップページなどに「新着情報」を表示するのに便利なのが、スクロールバーです。
![スクロールバー](https://ym-life.com/wp-content/uploads/2023/05/d82b0d0af6c5727937395af92d407e04-1.jpg)
今回は、ブロックエディタでスクロールバー付きボックスを作る方法をご紹介します。
※プラグインを使わず、追加CSSで記述する方法です。
スクロールバー付きボックスをWordPressで作る方法(ブロックエディタ)
スクロールバー付きボックスを作る手順は3つです。
- 管理画面から追加CSSを登録する
- 個別記事に追加CSSを設定する
- 下書き保存後、プレビューで表示確認する
管理画面から追加CSSを登録する
まずは、WordPressのダッシュボード「外観」→「カスタマイズ」→「追加CSS」から、以下のコードを記述します。
![追加CSS](https://ym-life.com/wp-content/uploads/2023/05/478a4fa043da319da194a33061319166.jpg)
.scroll{ overflow: auto; height: 200px; width: 100%; }
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ1(丸)-150x150.png)
上のコードをコピペで貼り付けると間違いないですよ。
記述したら、忘れずに「公開」を押しておきましょう。
個別記事に追加CSSを設定する
次に、スクロールバーを設置したい個別記事のブロックを選択し、右画面の設定画面下部の「高度な設定」を展開します。
「追加CSSクラス」に、「scroll」と入力します。
![高度な設定](https://ym-life.com/wp-content/uploads/2023/05/8e7034d675bede766751ee9d239a2a24.jpg)
![高度な設定](https://ym-life.com/wp-content/uploads/2023/05/8e7034d675bede766751ee9d239a2a24.jpg)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ3(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ3(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ3(丸)-150x150.png)
「追加CSS」の欄と間違えないようにしよう。
そうすると、スクロールボックスが出現します。
![スクロールボックスの出現](https://ym-life.com/wp-content/uploads/2023/05/e49a0a78135434f0391737115ddcc5ed.jpg)
![スクロールボックスの出現](https://ym-life.com/wp-content/uploads/2023/05/e49a0a78135434f0391737115ddcc5ed.jpg)
ここに、項目を入力していきましょう。
![項目の入力](https://ym-life.com/wp-content/uploads/2023/05/1c6870067ace88f5528152c20b8d0d0f.jpg)
![項目の入力](https://ym-life.com/wp-content/uploads/2023/05/1c6870067ace88f5528152c20b8d0d0f.jpg)
下書き保存後、プレビューで表示確認する
入力できたら、下書き保存し、プレビューでスクロールバーが表示されるか確認しよう。
![プレビュー画面](https://ym-life.com/wp-content/uploads/2023/05/0fde86f01c61648b6f21435398b7c63f.jpg)
![プレビュー画面](https://ym-life.com/wp-content/uploads/2023/05/0fde86f01c61648b6f21435398b7c63f.jpg)
行数が少ないと、スクロールバーが出現しません。その場合は、行数を増やしてチェックしてください。
スクロールバー付きボックスのカスタマイズ色々
文字色や背景色を変える
スクロールバー内の文字の色や背景色を変えたい場合は、スクロールバーを選択した状態で、「ブロック」内の
- 文字色
- 背景色
を変更しましょう。
![文字色と背景色の設定](https://ym-life.com/wp-content/uploads/2023/05/05c56d57909114e19ccfc4f3c0d63f98-1.jpg)
![文字色と背景色の設定](https://ym-life.com/wp-content/uploads/2023/05/05c56d57909114e19ccfc4f3c0d63f98-1.jpg)
文字の一部を太文字にする
上の方法では、文字全てに設定が反映されてしまうので、一部を変更したい場合は以下のバーを使用します。
![色の一部を変更する](https://ym-life.com/wp-content/uploads/2023/05/1fcc388c15d6f62b780eb0fd3a5f78ad.jpg)
![色の一部を変更する](https://ym-life.com/wp-content/uploads/2023/05/1fcc388c15d6f62b780eb0fd3a5f78ad.jpg)
太文字にするには、文字を選択した状態で「B」を押します。
![太文字](https://ym-life.com/wp-content/uploads/2023/05/9929e33628c440024979554127025629.jpg)
![太文字](https://ym-life.com/wp-content/uploads/2023/05/9929e33628c440024979554127025629.jpg)
文字の一部に色を付ける
こちらで、一部の文字色を変更することができます↓
![文字色を変える](https://ym-life.com/wp-content/uploads/2023/05/a171004cde59c34997311442f6373105.jpg)
![文字色を変える](https://ym-life.com/wp-content/uploads/2023/05/a171004cde59c34997311442f6373105.jpg)
あとがき
今回は、ブロックエディタでスクロールバー付きボックスを入れる方法についてでした!
他にも細かな変更はできますが、今回は「これだけ覚えておけばOK」という基本的な操作のみを解説しました。
参考になれば嬉しいです。
コメント