スクロールバーをスタイルシートで表示する

 スタイルシートでスクロールバーを表示させて見よう。

 スタイルシートだけでスクロールバーつきのボックスが作れるようなのでちょっと試してみたい。

スタイルシートでスクロールバーを表示する

外部スタイルシートの記述

.scrollbox {
  overflow: scroll;   /* スクロール表示 */
  width: 90%;
  height: 100px;
  background-color: #ffffcc;
  color: #000000;
 border-style: solid; border-color: #D3D3D3;
}

HTML部分の記載

<DIV class="scrollbox">
縦100px、横90%。テキストがこの範囲を超えた場合は、自動的にスクロールバーが表示されます。背景色は#ffffcc;、文字の色は#000000、boxの境界は#D3D3D3
</DIV>

HTMLとスタイルシートを一緒に書くと

<DIV style="overflow: scroll; width: 90%; height: 100px; background-color: #ffffcc; color: #000000;border-style: solid; border-color:#D3D3D3;"></DIV>

PHPを表示してみた

 上のスタイルシートを利用してWordpressのテーマのfunction.phpの一部を表示してみた。

 //クイックタグテキストボタン
function add_my_quicktag() {
?>
<script type="text/javascript">
//QTags.addButton('ID', 'ボタンのラベル', '開始タグ', '終了タグ');
QTags.addButton('before','beforeコード','<div style="color: #000000;background-color: #e4e4e4 ">','</div>');
QTags.addButton('after','afterコード','<div style="color: #000000;background-color: #d2d2ff ">','</div>');
 QTags.addButton('pre', 'pre', '<pre>', '</pre>');
</script>
<?php
}
add_action('admin_print_footer_scripts','add_my_quicktag');
?>

 なんかちょっといい感じ?

 クイックタグに登録してみようかな?

コメントを残す




*

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

関連記事

wordpressテーマSTINGER3のサイドバーのカテゴリー一覧とNEW ENTRYに背景色をつけてブロック分け
一番初めにWordPressの自動整形機能を止めるプラグインを入れよう
description次第で検索順位が変わる・訪問者が増える
Googleアドセンスをシーサーブログのタグページに表示させないようにする・2カラムテンプレートサイドカラム編
スタイルシートにコメントを入れるには?
Googleアドセンスの新しい管理画面は、解析能力が優秀
コードを収得して、サイトにGoogleアドセンスの広告を貼り付けよう
wordpressは半角のダブルクォーテーションが勝手に全角に変換されて表示される
シーサーブログの記事の直下に広告やブログランキングなどを貼り付ける・コンテンツHTMLを編集する
noimage
プラグインのCSS(スタイルシート)を縮小してブログの表示速度を早くしよう
FC2ブログの全記事リストを表示する時のHTMLタグと注意点
コメントを入れる<!--/-->・<!--//-->・<!---->の使い方を覚えよう
JavaScriptを使った文字数チェッカー-全角半角共1文字と数える
WordPressテーマPrincipleで更新日を表示する

Menu

HOME

 TOP