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でスクロールボックスを作るのは、デザインされたカスタマイズ枠を作りたい人向けです。
まとめ
初心者の私でも、コードをコピペするだけでスクロールボックスを作ることが出来ました。
ブログで、すごく長い引用文がある時など、使っていこうと思います。
|