ワードプレスにスクロールできるボックスを簡単に作る方法！プラグイン不要！

ワードプレスで、スクロールできるボックスって初心者でも作れるの？

スクロールできるボックスを作るために、プラグインが必要なの？

という疑問を、この記事でサクッと解決いたします♪

「スクロールできるボックス」
というはコレのことです↓

一見、作るのが難しそうなスクロールできるボックスですが、ワードプレス初心者さんでも簡単に作れる方法があります♪

しかも、プラグインなしで♪

ここからは、具体的な作り方を図解付きでご紹介していきます♪

◎ご確認ください◎
横にスクロールする方法を知りたい方は、こちらの記事をどうぞ♪
→「横スクロールする方法」

スポンサーリンク

ワードプレスにスクロールできるボックスを作ろう（プラグイン不要）

ワードプレスに元々の備わっていない、スクロールできるボックスを作るって大変なんじゃ…と身構えてしまうかもしれませんが、ご安心ください♪

スクロールできるボックスをワードプレスに作るのは、とても簡単です！

プラグインを使わなくても作れます！

sayaka

コピーとペースト（貼り付け）ができれば、初心者さんでも簡単に作れます

ワードプレスにスクロールできるボックスを作る手順

スクロールできるボックスの作り方は、たったの３ステップです。

1. コードをコピーする
2. ワードプレスに貼り付ける
3. ボックスに入れたい文章を入力する

だけ！！！

では、具体的に見ていきましょう♪

ステップ①スクロールできるボックスのコードをコピーする

スクロールできるボックスのコードをコピーします。

下記のコードをコピーしてください。

<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>

くるみ

コード全てをコピーするわん♪
三角カッコを忘れないよう注意するわんよ

ステップ②コピーしたコードを挿入したい部分に貼り付ける

スクロールできるボックスのコードをコピーしたら、挿入したい部分に貼り付けます。

この時、必ずテキストモードに切り替えてから貼り付けましょう！

ステップ③ボックスの中に入れたい文章を入力する

コードの中の「（ここに文章を入力します）」を消して、ボックスの中に入れたい文章を入力します。

以上で完成です♪

／
パチパチパチパチー♪
＼

スクロールできるボックスをカスタマイズして自分好みに

スクロールできるボックスを、自分のワードプレスサイトの色に合わせたデザインにしたい！という場合は、コードをカスタマイズすることで、あなた好みに変えることができます。

↓ 基本のコード

<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>

フレームの色を変えたい場合→
「solid（カラーコードを半角で入れる）」で好きな色にする。
基本コードは「#ccc」で設定しています。

背景の色を変えたい場合→
「background-color:（カラーコードを半角で入れる）」で好きな色にする。
基本コードは「#fffcfc」で設定しています。

横幅を変えたい場合→
「width」の文字の後ろの数字を変える。
「（半角数字）%」で好きな幅にする。
基本コードは80%で設定しています。

高さを変えいた場合→
「height」の文字の後ろの数字を変える。
「（半角数字）px」で好きな高さにする。
基本コードは200pxで設定しています。

sayaka

コードをコピーして、挿入したい箇所に貼り付けてから、テキストモードのままでカスタマイズ（好きな色や高さ、幅に変更）をしてくださいね。

ワードプレスにスクロールできるボックスを入れると何が良いの？

内容が長くなると、下にどんどん文章が伸びてしまいます。

本文であれば問題ありませんが、申し込みボタンの直前／直後に設置する「規約」や「注意事項」などは、長々と文章を載せると、本文以上に目立ってしまって嫌だ！という場合もありますね。

それを解決するのが、スクロールできるボックスです。

①通常の表示と②スクロールできるボックスでの表示を見比べてみてください。

①通常の表示

②スクロールできるボックスで表示

見比べていただくと、コンパクトにまとまっているのが分かりますよね。

文章が長くなる場合、そのまま文章全文を載せるのが良いのか？スクロールできるボックスを使って載せるのが良いのか？を考えてくださいね。

sayaka

文章が長くなる＝スクロールできるボックスを使うのがベスト！というわけではありませんよ^^場合場合に応じて考えてくださいね

あなたがその文章をどのように位置付けているのか？と、読者さんにとって読み進めやすいのか？の両方の目線から考えて、表示方法を決めてくださいね。

 

くるみ

この記事がためになった♪楽しかった♪という方は

sayaka

公式LINEのご登録をお願いします♪

 

北海道、石川、大阪…全国からご相談いただけて
新規の方に数ヶ月お待ちいただいている状況になれた方法をLINEでこっそりお伝えしています♪

 

▶︎「集客につながるホームページの秘密」が届くLINEを受け取る