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

急上昇中!
ブログランキングがんばってます^^
詳細はコチラから!!

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

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

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

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

ワードプレス

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

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

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

 

見本、ここから。

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

ここまで。

ソースは、

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

 

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

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

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

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

 

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

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

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

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

 

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

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

 



 メールアドレス 

なお、資産ウェブ構築メルマガはこちらです。 

管理人オススメ教材&ツール

コメントを残す