楽天市場｜今日のタイムセールはコレ！
スポンサーリンク
お役立ち

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

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

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

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

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

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

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

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

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

あ
あ
あ
あ
あ
あ
あ
あ
あ
あ
あ

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

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

初心者でも簡単ですよ！

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

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

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

（アイコンが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>

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

スポンサードリンク

失敗例：HTMLとして編集ではエラーが起こる

ブロックのメニューに「HTMLとして編集」というのがあります。

一見「これでタグ入れればいいじゃん！」と思うのですが、試すとこうなります。

▼「HTMLとして編集」ではうまくいかない

WordPress（バージョン5.8.2）では、現状のことろ「クラシック版ブロックで作る」のが最適でした。

スポンサードリンク

スクロールボックス内の文字装飾

太字
naname
背景色
  • リスト1
  • リスト2

スクロールボックス内の文字も装飾できます。

装飾は、ソースコード入力→OK、のあとの方が、実際の装飾を見ながら出来て便利です。

WordPressなら、HTMLタグを知っていなくてもボタン1つで装飾できます。

ビュー画面で文字を増やす（入力する）時、改行にエンターキーは使えません。
改行するときは「シフト＋エンター」を使います。
（エンターだけだと、スクロールボックスを増やすことになります）

スポンサードリンク

スクロールボックスはHTMLの枠（ボックススクロール）

スクロールボックスは別名「ボックススクロール」とも言います。

HTMLでサイトを作る際はCSSを使って作るのが一般的です。

（ウィンドウの中にウィンドウを作るイメージです）

スクロールボックスを作るのにCSSは不要！HTMLコードでできる

ディブタグ<div>を使えばCSS無しで作ることが出来ます。

CSSでスクロールボックスを作るのは、デザインされたカスタマイズ枠を作りたい人向けです。

スポンサードリンク

まとめ

初心者の私でも、コードをコピペするだけでスクロールボックスを作ることが出来ました。

ブログで、すごく長い引用文がある時など、使っていこうと思います。

WordPress
ふるさと納税で蟹をお得に手に入れる！