ブログ運営 PR

【WordPress】スクロールバー付きボックスを作る方法(ブロックエディタ)

【WordPress】スクロールバー付きボックスを作る方法(ブロックエディタ)
記事内に商品プロモーションを含む場合があります

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

スクロールバー

スクロールバーの導入イメージ

 

今回は、ブロックエディタでスクロールバー付きボックスを作る方法をご紹介します。

※プラグインを使わず、追加CSSで記述する方法です。

\アドセンス以外のクリック型広告を紹介/他社広告 >>無料で受け取る

スクロールバー付きボックスをWordPressで作る方法(ブロックエディタ)

スクロールバー付きボックスを作る手順は3つです。

  1. 管理画面から追加CSSを登録する
  2. 個別記事に追加CSSを設定する
  3. 下書き保存後、プレビューで表示確認する

 

管理画面から追加CSSを登録する

まずは、WordPressのダッシュボード「外観」→「カスタマイズ」→「追加CSS」から、以下のコードを記述します。

追加CSS
.scroll{
overflow: auto;
height: 200px;
width: 100%;
}
ユミ
ユミ
上のコードをコピペで貼り付けると間違いないですよ。

記述したら、忘れずに「公開」を押しておきましょう。

個別記事に追加CSSを設定する

次に、スクロールバーを設置したい個別記事のブロックを選択し、右画面の設定画面下部の「高度な設定」を展開します。

「追加CSSクラス」に、「scroll」と入力します。

高度な設定
ユミ
ユミ
「追加CSS」の欄と間違えないようにしよう。

 

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

スクロールボックスの出現

 

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

項目の入力
改行は、Shift + Enter でできます。

 

下書き保存後、プレビューで表示確認する

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

プレビュー画面
行数が少ないと、スクロールバーが出現しません。その場合は、行数を増やしてチェックしてください。

スクロールバー付きボックスのカスタマイズ色々

文字色や背景色を変える

スクロールバー内の文字の色や背景色を変えたい場合は、スクロールバーを選択した状態で、「ブロック」内の

・文字色
・背景色

を変更しましょう。

文字色と背景色の設定

 

文字の一部を太文字にする

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

色の一部を変更する

 

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

太文字

 

文字の一部に色を付ける

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

文字色を変える
使用するテーマによって、若干やり方が異なる場合があります。

あとがき

今回は、ブロックエディタでスクロールバー付きボックスを入れる方法についてでした!

他にも細かな変更はできますが、今回は「これだけ覚えておけばOK」という基本的な操作のみを解説しました。

参考になれば嬉しいです。

 


メルマガのバックナンバーを読む>>



【期間限定】ブログで月100万を叶えたノウハウを受取る

他にも…
◆ 本当に稼げる他社広告5選
◆ 図解付き!ブログの
開設マニュアル


これらを無料でプレゼント中!

つい数年前まで普通のOLだった私が、たった一つのブログを始めたことで人生が変わりました。

初心者から始めたブログで、4ヶ月で月100万円の収入を叶え、今では時間や場所に縛られない自由なフリーランスとして働いています。

  • 好きな場所、好きな時に働きたい
  • 自宅やカフェで、PC一台で仕事をすることに憧れがある
  • 文章を書く仕事で、月20万円以上を稼ぎたい
  • お金を気にせずに旅行したり、経済的な不安から解放されたい

そんなあなたらしい人生を叶えるために、未経験からブログで収入を得る方法を解説したマニュアルを無料で配布しています。

初めて挑戦される方でも、安心してブログを開設できるよう、図解付きの手順書も併せてプレゼント中!

メルマガ登録者さん限定で、期間限定で配布していますが、いつ有料化するかわかりませんので、今のうちにお受け取りください。

ボタンをクリックして、登録フォームに「名前」と「メールアドレス」を入力したら、プレゼントが手に入ります。


今すぐ無料プレゼントを受け取る

ABOUT ME
ユミ
初心者向けのブログ術&アドセンスの収益化をメインに発信中/2019年に複数のクリック型広告を組み合わせる「他社広告戦略」を開発/これまでに約50種類の広告を試し、同じアクセス数でもブログの収益性を2倍以上に改善した事例多数/月収10~420万円の収入を得るコンサル生さんを輩出中/ブログで収入を得たい初心者の方へ、無料のメールマガジンを配信しています
未経験からブログで月収10万円を叶える方法▶
見てみる
未経験からブログで月収10万円を叶える方法▶
見てみる