スポンサーリンク
お役立ち

縦スクロールボックスの作り方|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でスクロールボックスを作るのは、デザインされたカスタマイズ枠を作りたい人向けです。

スポンサードリンク

まとめ

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

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

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