• MENU ●●●●
  • シリウスにスクロールバーがついているカラー枠ボックスの設置手順


    シリウスカスタマイズ 記事一覧を記事中段へ移動して情報を解り易く明示しましょう グーグル検索で好評かを得られるかも?

    スポンサー広告

    当該サイトコンテンツ関連記事

    スクロールバーがついているカラー枠作成手順 モバイル対応

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

     

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

     

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

     

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

     

     

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

     


     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

     

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

     

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

     


     

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

     

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

     

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     


     

    横サイズ200PX 縦サイズ130で作成

     

    参考例

     

     

    ここに記事
    テキストmmmmmm6テキストmmmmmm6
    mmmmmmmmmmmm7
    hhhhhhhhh
    hhhhhhhhhhhhhh

     

     

     

     

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

     

    <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;">

     

    ここに記事 記事は削除する
    テキストmmmmmm6テキストmmmmmm6
    mmmmmmmmmmmm7
    hhhhhhhhh
    hhhhhhhhhhhhhh

     

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

     

     


     

    横サイズを100%指定例

     

     

    ここに記事
    テキストmmmmmm6テキストmmmmmm6
    mmmmmmmmmmmm7
    hhhhhhhhh
    hhhhhhhhhhhhhh

     

     

     

     

     

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

     

    <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;">

     

    ここに記事
    テキストmmmmmm6テキストmmmmmm6
    mmmmmmmmmmmm7
    hhhhhhhhh
    hhhhhhhhhhhhhh

     

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

     

     

     

     

     


     

    スポンサーリンク

     

     

     

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

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト