WordPressにスクロールバーを設置する方法

メルマガ移行中
現在、ブログとメルマガについてリニューアル中です!
新メルマガはこちらで配信していくので、まだ移行していない人は登録お願いします。
今すぐ購読する!!

今はこんなことに力を入れて動いています!
最近の活動について

ワードプレスにスクロールバーを設置したい!
テキストボックスを記事本文中やサイドバーに、簡単に設置できる方法です。

スクロール可能なテキストエリアの設置はインラインフレームでも対応できますが、レイアウトが崩れることが多かったので却下。

「利用規約」や「プライバシーポリシーの表示」「コピペしてほしい紹介文章の提供時」などに、テキストエリアを利用したかったのです。

以下、備忘録としてメモ。

ワードプレス

テキストボックスのスクロールバー設置方法

ワードプレス本文へ設置するなら、「ビジュアル」ではなく「テキスト」に切り替えて記述します。

投稿本文ではなくサイドバーに設置したいならば、ウィジェットの「テキスト」に記述します。

 

見本、ここから。

(最上行)
※このテキストボックスは、高さが200px以上になるとスクロールバーがつきます。このテキストボックスは、高さが200px以上になるとスクロールバーがつきます。このテキストボックスは、高さが200px以上になるとスクロールバーがつきます。このテキストボックスは、高さが200px以上になるとスクロールバーがつきます。このテキストボックスは、高さが200px以上になるとスクロールバーがつきます。このテキストボックスは、高さが200px以上になるとスクロールバーがつきます。このテキストボックスは、高さが200px以上になるとスクロールバーがつきます。このテキストボックスは、高さが200px以上になるとスクロールバーがつきます。
(最下行)

ここまで。

ソースは、

これを「テキスト」へ貼り付けるようにします。

 

※補足
なぜか上記のコードがコピーできない現象が起きています。
下記に再度コードを掲載しますのでコピペしようと思っている方は下記よりどうぞ。

<div style=”border:1px solid #ccc;height:200px;overflow:auto;width:90%;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#f7f7f7;margin:auto;padding:10px;”>
(最上行)
ここに文章を挿入します。
(最下行)
</div>

(この現象を解決する方法をご存知の方はご連絡いただけると嬉しいです)

※念のため補足の補足
さらに、下記のリンクよりテキストをコピーできるようにコードだけ載せましたので万が一補足でもダメって場合はご活用ください。
【コピペ用】こちらからコードコピーできます

 

スクロールバーの高さを変更

テキストエリアの高さを変えるには、「height:200px」の数値を変更すれば可能です。

高さは好みによってご自由に。

上記で設定した高さを超える文章量でスクロールバーが出ます。
文章量が少ない場合は、スクロールバーが付きません。

 

スクロールバーの横幅を変更

テキストエリアの横幅を調整するには、「width:90%」の数値を変更すれば可能です。

記事本文挿入なら、レスポンシブ対応を考慮すると、pxでの横幅指定より%で横幅指定するほうがベター。

サイドバーに設置するなら利用中のテーマに沿って、pxでもOKなので、うまく微調整してみてください。

 

参考:スクロールバー付きのテキストボックスをサイドバーに貼る:COMEMOさん

※COMEMOさん非常に参考になりました。ありがとうございます^^

サイト構築で困ったとき、わからないときに参考にさせてもらった記事をまとめます。同じ何回もググってしまうので自身への備忘録を兼ねてのページです。随時追加&更新...

 

管理人おすすめシステム

コメントを残す