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

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

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

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

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

スクロールできるボックスとのはこちらのことです。

長い文章の一部だけが見える状態で、
下にスルスルスル〜と進む(=スクロールする)ことで、全文を読むことができる四角いボックス。

「規約」などを表示する際に、このスクロールできるボックスを使っているホームページが多いですよね。

1度は見たことがあるのではないでしょうか?

 

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

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

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

 

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

 

スポンサーリンク

 

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

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

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

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

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

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

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

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

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

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

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

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

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

①通常の表示

【個人情報保護について】

弊社は、ご利用者様の住所、電話番号、eメールアドレス、本サービスの利用状況などの情報、相談内容(以下、「個人情報」という)を機密として保持いたします。
但し、以下の項目に該当する場合は、個人情報を開示することがあります。
予めご了承ください。

  • ご利用者様から、書面上にて情報開示の同意を得た場合
  • ご利用者様または第三者の生命が危険にさらされるおそれまたは、著しい法令違反があると当方が判断した場合
  • ご利用者様本人または第三者が虐待を受けている可能性または、虐待の危険にさらされる可能性があると当方が判断した場合
  • ご利用者様が自殺をする意思を明らかにし、実行される可能性が非常に高いと当方が判断した場合
  • 法令等により開示が求められた場合

 

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

【個人情報保護について】

弊社は、ご利用者様の住所、電話番号、eメールアドレス、本サービスの利用状況などの情報、相談内容(以下、「個人情報」という)を機密として保持いたします。
但し、以下の項目に該当する場合は、個人情報を開示することがあります。
予めご了承ください。

  • ご利用者様から、書面上にて情報開示の同意を得た場合
  • ご利用者様または第三者の生命が危険にさらされるおそれまたは、著しい法令違反があると当方が判断した場合
  • ご利用者様本人または第三者が虐待を受けている可能性または、虐待の危険にさらされる可能性があると当方が判断した場合
  • ご利用者様が自殺をする意思を明らかにし、実行される可能性が非常に高いと当方が判断した場合
  • 法令等により開示が求められた場合

 

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

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

 

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

 

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

 

くるみ
この記事がためになった♪楽しかった♪という方は
sayaka
公式LINEのご登録をお願いします♪

 

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

 

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

3 件のコメント

  • はじめまして。
    WordPressでブログを作っており、検索からここへ来ました。
    ブロックエディタでこのコードを実践しましたが、ただの文字の羅列になってしまいました。
    よろしければブロックエディタの方法もご指南ください。

  • さやかさん、連投失礼します。
    自分で方法を見つけ、解決しました。
    記事更新は不要です。
    失礼いたしました。

    • ご連絡に気づくのが遅くなってしまってすみません>< 解決できたようで、よかったです^^

  • 智美 へ返信する コメントをキャンセル

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA


    日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)