縦スクロールボックスの作り方｜WordPressブロックエディタ｜コピペで簡単プラグイン不要！

WordPressでブログを書いていて、とても長い文章（規約など）を入れる時、困りますよね。

本文が埋め尽くされてしまう！

「スクロールできるボックス」を作れば問題解消できます！

▼こういうボックスです▼

スクロールボックスです。

右側にスクロールバーが付いています。

スクロールバーは、マウスで操作します。

あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ

スマホでも長文が読みやすくなります。

プラグインは不要で、ソースコードをコピー＆ペーストするだけ。

初心者でも簡単ですよ！

読みたい場所へジャンプ

1 スクロールボックスを作るにはクラシック版の段落を使う
2 失敗例：HTMLとして編集ではエラーが起こる
3 スクロールボックス内の文字装飾
4 スクロールボックスはHTMLの枠（ボックススクロール）
- 4.1 スクロールボックスを作るのにCSSは不要！HTMLコードでできる
5 まとめ

スクロールボックスを作るにはクラシック版の段落を使う

スクロールボックスを作るにはクラシック版の段落を使います。

ボックスを新規作成し、クラシック版の段落を選んでください。

（アイコンが2つありますが、同じものです。）

全体はブロックエディタだけど、一部だけクラシックエディタにすることができます。

▼ツールから「ソースコード」を選択します。

こんな画面が開きます。

ここにコードを入力します。

入れるソースコードはこちら。

＼コピー＆ペーストでOK!／

<div style="border: 1px solid #ccc; height: 200px; overflow: auto; width: 80%; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #fffcfc; margin: auto; padding: 10px;">
（ここに文章を入力します）
</div>

このコードを「ソースコード」入力欄にコピペするだけで完了です！

スポンサードリンク