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


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

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

     スポンサーリンク

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

    スクロールバーがついているカラー枠をコンテンツ内に配置することで
    読者に対して訴えたいメッセージに気付てもらう

     

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

     

    と 興味を持ち見てくれる配置構成ならよいかも

     

    また アクセントとして 配置すると良いかもしれません

     

    モバイル対応情報をエントリーページで追加しております

     

    2015 0328更新
    シリウスカスタマイズテーマ スクロールバーボックス枠

     

     

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

     

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

     

    作動状況は 右コンテンツを枠以上に長くなると横スクロールバーが
    現れます

     

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

     

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

     

    以下参考例の 2番目は 画像入り
    サイズ以上の画像を入れてみました

     

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

     

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

     

     

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

     

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

     

    カスタマイズ

     

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

     

    サイズ変更は200PX数値変更で可能

     

    枠線の太さは数値変更

     

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

     

    背景カラー変更
    background-color:#000000

     

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

     


     

     

     

    ここからの解説は PC版 iPhone機能モバイル版を含めて進めます

     

     

    PC専用で公開する

     

     

    iPhone機能モバイル版は非対応とする?場合の手順

     

    ご注意ごと
    200PX以上にサイズ指定は可能ですが スマホ モバイル画面で
    はみ出た場合 グーグル検索では閲覧者のユーザビリティに適合しないと
    判断され 検索順位が下降してしまいますことをお知らせします

     

     

     

    横サイズ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>

     

    カラーコード変更で背景など切り替えできます

     

    表示横サイズは200PXのサイズにしております
    サイズは拡張できますが200PX以上ですと モバイルで閲覧した際
    途中切れしてしまいます

     

     

     

    次にPC版 モバイル版切り替え表示対応の解説

     

    PCで閲覧時はPCに合わせたサイズで表示

     

    スマホ モバイルではその小さな画面サイズで表示される
    という 解説ですすめます

     

    どういう設定をするかというと 

     

    二つのスクロール枠を並べてサイト内に置きます

     

    そして 一つはPCで見えるもの

     

    もう一つはスマホ モバイルで見えるものと 指定します

     

    と するので 二つのスクロール枠をおいても 閲覧状況でどちらかが
    見える 表示されるということです

     

    閲覧状況により どちらかが表示されることになりますが
    非表示の際 記事欄での記載スペースは認識されない場合
    公開画面では ないものとしてスペースは空きません

     

     

    以下枠はPCでは認識できても スマホでは表示されません

     

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

     

     

     

    まず PC版で通常表示する指定として
    以下の指定記述でスクロール枠を囲みます
    <pcc>

     

    </pcc>
    コードで囲んだ場合 スマホ モバイルでは表示されません

     

     

    <pcc>
    <div style="margin:0px;padding:0px;" align="center"><div style="margin:0px;padding:0px;line-height:1.3;width:300px;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

     

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

     


     

    スマホ モバイルで表示するには

     

    次の解説は スマホでは認識できる指定

     

    PC画面では 認識できない
    表示されないということ

     

    スマホ モバイルでのみ表示させる記述で囲む

     

    記述
    <ipc>
    記事
    </ipc>

     

    以下の枠は画像です

     


    ここにスクロール枠をおいてますが スマホでは認識できるものの
    PCでは表示すらされません
    ここにあるんですが ソースでは見えます

     

     

    スマホ モバイル用記述

     

    <ipc>
    <div style="margin:0px;padding:0px;" align="center"><div style="margin:0px;padding:0px;line-height:1.3;width:250px;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;">

     

    テキストmmmmmm
    mmmmmmmmmmmm7
    hhhhhhhhh
    hhhhhhhhhhhhhh

     

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

     


     

    その他 記述コードを参考にしてください

     

    PC スマホモバイルとも どちらでも認識できるさいずとして
    サイズは200PXにしております

     

    以下コード テキストの m hは省いてください

     

     

     

    テキスト
    mmmmhhhhh

     

     

     

     

    上記サイズ記述
    以下コード テキストの m hは省いてください

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

     

    テキスト
    mmmmhhhhh

     

     

     

     

     

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

     

     

     


     

     

    参考例2

     

    画像入り

     

    横幅200指定

     


    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    mmmmmmmmmmmmm
    hhhhhhhhhhhhhhhhhhhhhhh

     

     

     

    記述コード

    <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:330px;">

     

    テキストmmmmmmm
    mmmmmmmmmmmmm
    hhhhhhhhhhhhhhhhhhhhhhh

     

     

     

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

     

     

     

     


     

     

    参考例3

     

    カラー背景

     

     

     

     

     

    テキスト

     

     

     

     

     

     

     

     

     

     

    記述コード

    <div style="margin:0px;padding:0px;" align="center"><div style="margin:0px;padding:0px;line-height:1.3;width:200px;background-color:#834EFF;"><div style="margin:0px;padding:10px;line-height:1.3;overflow:auto;border: 3px groove #FF0AF3;color:#ffffff;text-align:left;height:200px;">

     

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

     

     


     

    スポンサーリンク

     

     

     

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

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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