スクロールバーがついているちょっと変わったカラー枠（ボックスを記事内に
配置することで読者に対して訴えたい趣旨に気付てもらう...

 

この中には一体何があるんだろう？　

 

と...興味を持ち見てくれる配置構成ならよいかもしれません？

 

また、アクセントとして配置すると良いでしょう...

 

 

2015 0328更新 　2018 　5月28日再更新
シリウスカスタマイズテーマ　スクロールバーボックス枠

 

---

 

ただ単にカラー枠だけの場合より遙かに効果はあり...その後の
メニュー追加に際しても構成がやりやすいと思います..

 

スクロールバーがあれば...枠内に見える以上のコンテンツを
盛り込む事が可能....

 

作動状況は、横幅を指定すると右コンテンツを枠以上に長くなるので
隠れた箇所を確認するため横のスクロールバーが現れます

 

ご注意ごと
テキストの構成によっては、横スクロールバーが現れないことがあります

 

その際は一度サイズ以上の画像でも入れて面積を増やし無理作動させて
みてください

 

縦コンテンツが縦の指定数値より長くなると縦移動のスクロールバーが
現れます

 

縦横とも枠内に収めた場合はスクロールバーが現れません..

 

 

以下はテキストを省いてコピーしてコンテンツ内に張り付ければ
そのままご利用頂けます..

 

貼り付けてから数値や背景カラーをサイトに合わせて変更してください..

 

---

 

カスタマイズ...レスポンシブ作動

 

サイズ変更は２００PX数値変更で可能なのですが、スマートフォン閲覧では
ボックス枠が縮小しないので全体が確認できない　枠の一部の隠れてしまう..
すみません..ここまではレスポンシブテンプレート全盛以前？の記事なの
で、スマートフォンではレイアウトが固定されたまま...
レスポンシブ作動しない...なんです。

 

 

以下に今状況に合わせて記事改行...

 

対応策...
ノンレスポンシブの際は、横幅を数値指定..
スマートフォンでも枠が隠れないサイズ以上を指定する際は、widthを
ｐｘ処理ではなく100%で記載してください..
記事スペース最大幅で表示されるということですね
スマートフォンサイズでは、縮小されます理由で...
縦は数値を書き換えない限り固定されています...

 

背景カラーはカラーコードで指定変更できます

 

枠線の太さは数値変更...

 

枠線カラーは　カラーコードで変更
1px solid #696969

 

背景カラー変更...DEMOソースは　000000　黒ですが、白台紙　FFFへ
書き換えてください,,,
原本　　　background-color:#000000

 

他メニューも同様に変更が可能です

 

---

 

横サイズ２００PX　縦サイズ１３０で作成

 

参考例

 

 

 

 

記述コード　コピーしてお使いください

 

<div style="margin:0px;padding:0px;" align="center"><div style="margin:0px;padding:0px;line-height:1.3;width:200px;background-color:#000000;"><div style="margin:0px;padding:10px;line-height:1.3;overflow:auto;border: 1px solid #696969;color:#ffffff;text-align:left;height:130px;">

 

ここに記事　記事は削除する
テキストｍｍｍｍｍｍ６テキストｍｍｍｍｍｍ６
ｍｍｍｍｍｍｍｍｍｍｍｍ７
hhhhhhhhh
hhhhhhhhhhhhhh

 

</div></div></div>

 

 

---

 

横サイズを100%指定例

 

 

 

こちらもコピーしてお使いください...

 

<div style="margin:0px;padding:0px;" align="center"><div style="margin:0px;padding:0px;line-height:1.3;width:100%;background-color:#000000;"><div style="margin:0px;padding:10px;line-height:1.3;overflow:auto;border: 1px solid #696969;color:#ffffff;text-align:left;height:130px;">

 

ここに記事
テキストｍｍｍｍｍｍ６テキストｍｍｍｍｍｍ６
ｍｍｍｍｍｍｍｍｍｍｍｍ７
hhhhhhhhh
hhhhhhhhhhhhhh

 

</div></div></div>

 

 

 

 

 

---

 

スポンサーリンク

 

 

 

スクロールバーがついているカラー枠
シリウスカスタマイズ