• MENU●●●●
  • 2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    トップページのみ変更の2レイアウトスタイルのレスポンシブ構造を  含む構築手順

    シリウスは通常トップページと以下の階層ではサイトレイアウトは
    2カラム 3カラムではサイトメニュー フリースペースメニューは
    左右交互に入れ替え 位置替えはできますが基本構成は
    同じですね

     

    また エントリーページでも個別に一カラムは指定できるものの
    操作機能で指定できるのはここまでとなます

     

    一つのサイトレイアウト&エントリーページでの一カラムスタイルと
    二つのサイト構成が出来るわけですが もう一つぐらいは
    表せないものかと?

     

    せめてトップページはサイトの顔ですので何とか個別なスタイルを
    表現できないものかという趣旨で 今回は2カラムのトップページのみ
    レイアウトを変えてみるというお話になります

     

    また 今時代のサイトには必ず必要であろうレスポンシブウェブデザインも
    二重レイアウトでも反映されるよう構造に加えております

     


     

    ネット上では トップページは 記事幅狭めてサイド広告との
    レイアウト比率が 4対6 または5対5程の割合の構成もおおく
    見かけられます

     

    今やネットでの流通は激戦状態で トップページでは読者の興味を
    得られるようなサイト構成をしてるのです

     

    ヤフーサイトを見てみれば 記事とサイトメニュー広告の配置割合が
    ご確認いただけるでしょう

     

    トップページの記事位置割合は 少なめですが リンク先は
    2カラムとか 一カラムで記事コンテンツがメインの構成になりますね

     

     

    シリウスでも比率構成は 5対5にできますが 
    トップページはそれでよし としても下層ページまで同じでは 
    商品等の説明であれば記事幅が狭く 
    広告が目障りで集中できないという事態に至ります

     

     

    でも class指定を追加すればとトップページのレイアウトサイズを
    カテゴリー エントリーページと異なるサイズで表現できるのです

     

    トップページはサイトメニューと広告誘導がメインのにぎやかサイト

     

    下層はコンテンツを充分に配備した記事がメインで
    サイドメニューは標準構成

     

    カテゴリー以下では 記事に集中していただくため 記事箇所に
    割合を置くことが大事なわけです

     


     

    シリウスデフォルト2カラム対応の解説

     

     

    今回は デフォルト2カラムのトップページは1000PX幅サイトとして
    記事カラムを5 広告スペースを5のレイアウト

     

    アメーバブログにあるような構成ですか?

     

     

    カテゴリー以下は
    記事カラムを8 広告スペースを2の割合でレイアウト表現する解説と
    なりデフォルトテンプレート対応で進めますます

     

    一つのサイトで2重のレイアウトを指定するということで
    レスポンシブ指定も2重に行います

     

    説明の趣旨違いですが エントリーページで個別に一カラムを設定する際は
    スタイルシート改行が影響してか?反映が正常に行われませんので
    スタイルシートではなく シリウス機能 スタイルの割り込みでの
    手動設定となります

     

    以下に 追加解説として記載あり

     


     

     

    class指定とは何ぞや?
    ですが 
    説明が長くなりますのでここでの詳細は省かせていただきます

     

     

    では進めましょう

     

    カテゴリー以下のレイアウトはデフォルトとのまましますが サイドバーを
    300pxとかにする際は 操作画面よりテンプレートの横幅設定で
    サイズ指定してください

     

    ここでの解説はトップページのみをレイアウト変更としますので
    基本的にカテゴリー以下はいじりません

     

    ただし
    レスポンシブ構造を追加する際は カテゴリー以下階層へ指示を
    するため 全てのhtmlテンプレートへ記述を追加する必要があります

     

     

     

    ステップ1 トップページテンプレートclass指定

     

    class指定を行います

     

    トップページテンプレートを開きます

     

    </head>の下方にに<body>の記載がありますね

     

    <body>をclass指定するため記載を書き換えます

     

     

    <% googleSitemapTag %>
    <% mobileLinkDiscovery %>
    </head>

     

     

    <body> ここです
    <div id="container">
    <!-- ★ヘッダーここから★ -->
    <% pageTopic %>
    ここまで

     

    以下にclassを指定します

     

    <body class="toppage">

     

    toppageは 任意ですので他の記載でも良いです

     

    html巻末の</body>は 改行しません そのまま

     

     

    書き換え指定は トップページのみでレイアウトを反映させるわけです
    で...ここだけで完了...します

     


     

    次は スタイルシートで改行します

     

    サイト幅を1000pxとして

     

    サイドメニュー幅を5の割合ですと 500ですが サイト両サイドに
    スペースがありますので485px
    記事カラムも同様に485px
    とします

     

    この箇所へ到達してください

     

    /* レイアウト差分 */

     

    #contents {
    padding-right: 10px;
    padding-left: 15px;
    }

     

     

    ここです
    #main {
    float: left;
    width: 650px
    }

     

    mainが記事カラムの横幅を指定してます
    ここにmainのclassを指定します

     

     

    次の記載 ここでも追加します

     

    #menu {
    float: right;
    width: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
    }

     

    ここはmenuのclassを指定する
    width: 200px;は デフォルトのメニュー幅

     

     

     

    上記記述は いじらずそのままで コード上にclassを指定する
    コードを追加します

     

    classを指定する事でトップページでのみレイアウトが切り替わるのです

     

    読み込みを支持する
    body.toppageを記述の上に追加します

     

    サイト幅をwidth:485px;にします

     

     

    以下 追加

     

    body.toppage
    #main {
    float: left;
    width:485px;

     

    }

     

     

     

    body.toppage
    #menu {
    float: right;
    width: 485px;
    padding-top: 10px;
    padding-bottom: 10px;
    }

     

     

     

     

    body.toppage指定がトップページでは優先され 指定なしは
    通常のカテゴリー以降の階層で読み込まれ反映されるわけです

     

    並び順を確認下さい

     

     

     

    #contents {
    padding-right: 10px;
    padding-left: 15px;
    }

     

    ここから

     

    #main {
    float: left;
    width: 650px
    }

     

    body.toppage
    #main {
    float: left;
        width:485px;
    }

     

     

     

    #menu {
    float: right;
    width: 200px;
    padding-top: 10px;
    padding-bottom: 10px;
    }

     

     

    body.toppage
    #menu {
    float: right;
    width: 485px;
    padding-top: 10px;
    padding-bottom: 10px;
    }

     

    ここまで

     

    classを指定
    直下にデフォルト記述 各要素を置くのです

     

     

    記載完了後は 保存をしましょう

     

    これで トップページのレイアウト切り換えはは完了します

     


     

     

    ステップ2 レスポンシブ化の2重指定

     

    ここからの解説は 通常のシリウスサイトをレスポンシブ対応にする
    手順とは異なり2重指定となります

     

    classを指定しているトップページは
    body.toppageで読み込み指定をしなければなりません

     

    他の指定は bodyなのですが body記載はしなくとも
    通常指定で読み込まれます

     


     

    手順1viewport配置

     

    もう一度HTMLテンプレートを開いてください

     

    サイトがレスポンシブウェブデザイン構造であることをグーグルさんが
    認識し レスポンシブウェブ化されたサイトとしてモバイル関連で
    表示されるよう
    viewport を全てのテンプレート内の metaの箇所に張り付けます
    トップページから リンク集まですべて

     

    グーグルクロールの際 viewport記述をHTMLテンプレート内に
    置かないとレスポンシブウェブサイトとは認識されず 
    PCサイトの画面で表示されてしまう? 
    ....と...いうことみたいです

     

    と...グーグルさん解説にありました

     

    以下にviewportを含む解説ありです
    https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/responsive-design?hl=ja

     

     

     

    viewport記述の置く位置は<head>の下あたりで 
    metaの並びに置く で良いと思われます

     

    以下コピーして貼り付け
    <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
    <link rel="stylesheet" media="all" type="text/css" href="<% pageDepth %>/styles.css" />

     

    HTMLテンプレート記載はここで終了

     

     

    スポンサーリンク

     

     


     

     

    手順2 レスポンシブ構造コードの2重配置

     

    レスポンシブ構造コードは以下に記載しており

     

    正常作動を確認済みなのですぐ使えます

     

    二つの指定記載
    body.toppageはclassを指定した記載です

     

    スタイルシートを開いて 一番下に以下行をコピーして貼り付けます

     

     

    ここから body.toppage のclassを指定

     

    @media screen and (max-width: 1000px) {
    body.toppage
    #container{
    width:100%;
    }

     

    body.toppage
    #contents {
    padding-right: 0px;
    padding-left: 0px;
    }

     

    body.toppage
    #main {
    width:100%;
    padding:1% 1%;
    }

     

     

    body.toppage
    #sidebar{
    width:30%;
    }
    body.toppage
    img{
    max-width: 100%;
    height: 100%;
    width: auto;
      display:block;
    }
    body.toppage
    h3{
    max-width: 98%;
    height: 100%;
    width: auto;
    }

     

     

     

     

    body.toppage
    #header {
    height: <% headerHeight %>;
    background-image: url(img/header.jpg);
    overflow:hidden;
    background-repeat: no-repeat;
    background-position: left top;
    width:100%;
    border-bottom:solid 1px #EBEBEB;

     

    }

     

    body.toppage
    #header h2 ,#header .title {
    width: 95%;
    font-size: 26px;
    line-height: 36px;
    position: relative;
    left: 2%;
    top: 60px;
    }

     

    body.toppage
    #topmenu {
    background-repeat: repeat-x;
    height: 48px;
    line-height: 42px;
    width: 100%;
    position: absolute;
    margin: 0px;
    padding: 0px;
    background-image: url(img/topmenu.jpg);
    background-position: left top;
    font-size: 13px;
    }

     

    body.toppage
    #menu {
    float: left;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    }

     

    body.toppage
    #menu {
    float: left;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    }

     

    body.toppage
    #searchbox {
    position: absolute;
    top: 33px;
    width: 100%;
    padding-right: 5px;
    padding-left: 5px;
    text-align: right;
    line-height: 20px;
    height: 20px;
    font-size:12px;
    padding-top: 4px;
    }
    }
    ここまで

     

     

    以下はカテゴリーエントリーでの作動指定

     

    @media screen and (max-width: 1000px) {
    #container{
    width:100%
    }

     

    #contents {
    padding-right: 0px;
    padding-left: 0px;
    }

     

    #main {
    width:100%;
    padding:1% 1%;
    }

     

    #sidebar{
    width:30%;
    }

     

    img{
    max-width: 100%;
    height: 100%;
    width: auto;
      display:block;
    }
    h3{
    max-width: 100%;
    height: 100%;
    width: 100%;
    }

     

    #header {
    height: <% headerHeight %>;
    background-image: url(img/header.jpg);
    overflow:hidden;
    background-repeat: no-repeat;
    background-position: left top;
    width:100%;
    border-bottom:solid 1px #EBEBEB;

     

    }

     

    #header h2 ,#header .title {
    width: 95%;
    font-size: 26px;
    line-height: 36px;
    position: relative;
    left: 2%;
    top: 60px;
    }

     

    #topmenu {
    background-repeat: repeat-x;
    height: 48px;
    line-height: 42px;
    width: 100%;
    position: absolute;
    margin: 0px;
    padding: 0px;
    background-image: url(img/topmenu.jpg);
    background-position: left top;
    font-size: 13px;
    }

     

    #menu {
    float: left;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    }

     

    #menu {
    float: left;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    }

     

    #searchbox {
    position: absolute;
    top: 33px;
    width: 100%;
    padding-right: 5px;
    padding-left: 5px;
    text-align: right;
    line-height: 20px;
    height: 20px;
    font-size:12px;
    padding-top: 4px;
    }
    }

     

    ここまで

     

    二つの読み込みコードをスタイルシートに置くということです

     

    貼り付け後 記述途中の以下行はサイト表示に支障を
    きたしますので削除してください

     

    削除記事
    ここまで
    以下はカテゴリーエントリーでの作動指定

     

    以上でレスポンシブ構造は追加されました

     

     

    @media screen and (max-width: 1000px) { で記載される
    1000px数値は この数値以下ではレスポンシブ構造が反映される
    起点ですが 648とか798とか サイト運営者様の環境により
    選択値は様々で どれが一番ベスト化は私には測りかねません
    数値指定は自己判断でお願いします

     

    念のため
    960とか1024指定のサイトもあります

     


     

    エントリーページ一カラム指定でのご注意ごと

     

    エントリーページも これまでの手順で進めていれば 通常に
    レスポンシブ構造は反映されますが

     

    シリウスにはエントリーページのみ一カラムで表示する機能がありますね
    ですが そこに問題ありなんです

     

    一カラムは ヘッダー画像以下 グローバルメニュー横幅サイズ に比べ
    記事幅が10~15PX程短めに構成されています

     

    サイトの両サイドの隙間があるということなんですが この隙が
    スマートフォンで閲覧した際影響するのです

     

    PCやタブレットに比べスマートフォンは小さな画面の短い記事列が 
    短くなるのですが 隙間があるためさら短文となり何とも
    読みずらいのですね

     

    そこで一カラムにする際は 上級者設定メニューを開いて
    スタイルの割り込み指定で優先的に記事幅を横幅いっぱいに
    表示されるようCSS指定をします

     

    ここで大変申し訳ないことですが エントリーのレスポンシブ構造を 
    追加するには エントリーhtmlテンプレート内で

     

    <body> を class指定することになります
    でないと動いてくれません

     

    <body class="entory">

     

    スタイルの割り込みで使用する記述は以下になります
    body.entory

     

    ではスタイルの割り込みに記載する記述へと進めます

     

    記載の注意ごと
    用意した記述を張り付ければレイアウト調整は完了しますが
    一カラムレイアウトに合わせているため デフォルトを指定すると
    2カラムではレイアウト崩れになります

     

    事情により2カラムに変更する際は記述を削除してください

     

     

    以下記述は検証済みですが
    @media(max-width:1000px){内の数値は自己判断で
    書き換えてください

     

     

     

    ここから

     

    body.entory
    #contents {
    padding-right: 2px;
    padding-left: 2px;
    }

     

    body.entory
    #container{
    width: 1000px;
    }

     

    body.entory
    #main {
    float: left;
    width: 1000px;
    padding:1% 1%;
    }

     

    body.entory
    #main {
    float: left;
    width: 1000px;
    }

     

    body.entory
    img{
    max-width: width:950px;
    height: 100%;
    width: auto;
      display:block;
    }

     

    body.entory
    h3{
    max-width: width:950px;
    height: 100%;
    width:950px;
    }

     

    body.entory
    #threebox {
    float: left;
    width: 980px;
    }

     

    body.entory
    p {
    width:950px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    }

     

     

    @media(max-width:1000px){
    body.entory
    #container{
    width: 100%;
    }

     

    body.entory
    #contents {
    padding-right: 1%;
    padding-left: 1%;
    }

     

    body.entory
    #main {
    float: left;
    width:100%;
    padding:1% 1%;
    }

     

    body.entory
    #main {
    float: left;
    width:100%;
    }

     

    body.entory
    img{
    max-width: 100%;
    height: 100%;
    width: auto;
      display:block;
    }

     

    body.entory
    h3{
    height: 100%;
    width: auto;
    }

     

    body.entory
    #threebox {
    float: left;
    width: 100%;
    }

     

    body.entory
    p {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    }

     

    body.entory
    #header {
    height: <% headerHeight %>;
    background-image: url(img/header.jpg);
    overflow:hidden;
    background-repeat: no-repeat;
    background-position: left top;
    width:100%;
    border-bottom:solid 1px #EBEBEB;
    }

     

    #header h2 ,#header .title {
    width: 95%;
    font-size: 26px;
    line-height: 36px;
    position: relative;
    left: 2%;
    top: 60px;
    }

     

    #header h2 a, #header h2 a:visited,#header .title a,#header .title a:visited {
    color: #FF0A0A;
    text-decoration: none;
    <% pageTitleColor %>
    width:100%;
    }

     

    #headertext {
    text-align: left;
    font-size: 11px;
    line-height: 130%;
    width:100%;
    position: relative;
    left: 30px;
    top: 60px;
    <% pageDescFontSize %>
    <% pageDescPlace %>
    <% pageDescColor %>
    }

     

    #topmenu {
    background-repeat: repeat-x;
    height: 48px;
    line-height: 42px;
    width: 100%;
    position: absolute;
    margin: 0px;
    padding: 0px;
    background-image: url(img/topmenu.jpg);
    background-position: left top;
    font-size: 13px;
    }

     

    #topmenu {
    background-repeat: repeat-x;
    height: 48px;
    line-height: 42px;
    width: 100%;
    position: absolute;
    margin: 0px;
    padding: 0px;
    background-image: url(img/topmenu.jpg);
    background-position: left top;
    font-size: 13px;
    }

     

    #searchbox {
    position: absolute;
    top: 33px;
    width: 100%;
    padding-right: 5px;
    padding-left: 5px;
    text-align: right;
    line-height: 20px;
    height: 20px;
    font-size:12px;
    padding-top: 4px;
    }
    }

     

    ここまでを張り付けましたら必ず保存をしてください

     

     

     

     

     

     

    まだまだ終わりません
    重要

     

     

    これでレイアウトの違いは表現できるわけですが 問題があります

     

    トップページの横幅の大きいフリースペースに合わせた画像は
    下層ではサイズが合わないとなるのですね

     

    テキストは 折り返されますが 画像およびバナー広告は
    縮小しません

     

    又逆に 下層のフリースペースサイズの画像も トップページでは
    小さすぎとなります

     

    解消するための手段としては 2カラムではデフォルトでフリースペースは
    h3 h4までの二つですが 3カラム同様
    h5 h6を追加してメニュー枠を増やします

     

    トップページのみフリースペースのh3か h4で表示させ

     

    カテゴリー以下では h3か h4枠サイズのフリースペースは
    非表示として指定し

     

    h5 h6を使用する...とします

     

     

     

    h5 h6の追加方法は いたって簡単

     

    HTMLテンプレートを開いて 以下の箇所で

     

    <!-- ★メインコンテンツここまで★ -->

     

    <!-- ★サイドメニューここから★ -->
    <div id="menu">
    <% freeSpace3 %>

     

    <% siteMenu %>
    <% subMenu %>

     

    <% freeSpace4 %>
    </div>
    <!-- ★サイドメニューここまで★ -->
    上記の下に

     

    以下記載をカテゴリーエントリー HTML内テンプレ-トに
    張り付ければ完了します

     

    確認は 保存選択後フリースペースメニューで追加が確認できます

     

    以下を コピーして貼り付けてください
    <!-- ★サブメニューここから★ -->
    <div id="rmenu">
    <% freeSpace5 %>

     

    <% subMenu %>

     

    <% freeSpace6 %>
    </div>
    <!-- ★サブメニューここまで★ -->

     

    必ず トップページに置いたフリースペースは 
    カテゴリー エントリーページでは非表示としてください

     

     

     

    ここで一つ

     

    2カラムスタイルシートでは なぜか?

     

    #space5, #space6が 記載されておりますので
    スタイルシートは弄らずで良いです

     

     

    もし何らかの事情で#space5, #space6が見当たらない場合は
    追加してください

     

    ここですね
    /* フリースペース */

     

    #space3, #space4, #space5, #space6 {
    background-color: #FFFFFF;
    text-align: center;
    line-height: 120%;
    font-size: 12px;
    padding: 8px;
    }

     

     

    ここまで

     

    以上で解説は終了します

     

     

     

     

    トップページとカテゴリー以下のレイアウトを変えたレスポンシブ
    SIRIUS シリウスレスポンシブデザインテンプレート公開
    シリウスカスタマイズ

    2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ関連解説
    サイトをレスポンシブウェブ化カスタマイズする今事情
    SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
    レスポンシブウェブデザイン設定事情を理解しよう
    シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にCSSを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
    レスポンシブウェブデザイン変更前の説明
    SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
    レスポンシブウェブデザインカスタマイズのレイアウト変更値
    シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をcss指定値カスタマイズを含めて複数解説します
    ヘッダー画像をレスポンシブウェブ構造で作動させる方法
    シリウスへレスポンシブウェブデザインを追加構築してもヘッダー画像だけがレスポンシブ化作動不能という場合は こちらのサイト解説を参考にしてください 取り合えずは伸縮致します
    ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
    シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
    デフォルト一カラムレスポンシブウェブデザイン設定
    シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
    2カラムテンプレート レスポンシブデザイン設定方法
    SIRIUS シリウス2テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
    3カラムテンプレート レスポンシブウェブデザイン追加方法
    SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
    トップページのみをレイアウト替えした際のカスタマイズ色々
    シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
    レスポンシブサイトの見出しメニューを調整するカスタマイズ
    シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
    レスポンシブウェブデザイン公開ではiPhoneサイト設定も必要
    シリウスをレスポンシブウェブデザインとして公開するに至り iPhoneサイト設定も必要ということが判明しましたのでお知らせいたします
    レスポンシブウェブサイトにPC SP画面切り替えスイッチは不要
    SIRIUS シリウスレスポンシブウェブサイトにPC SP画面切り替えスイッチは必要か?ですが 今時代のスマートフォンではフィンガータッチで適正サイズに調整できるため不要と思われます
    レスポンシブウェブサイトへアドセンスを表示する際の注意ごと
    シリウスサイトをレスポンシブウェブデザインへと機能カスタマイズを追加した際 googleアドセンスをサイドのメニュー位置に置いたままではアドセンスのポリシーガイドラインに違反してしまうのです
    レスポンシブ構造ではサイドバーのアドセンス配置は処理が必要
    シリウスへのレスポンシブ構造追加ではサイドバーのアドセンス配置は スマホサイズでは広告が巻末に押しやられポリシー違反となります 対処法は指定処理が必要...詳細はサイトで
    レスポンシブウェブデザイン構造では画像の数値指定を必ずしましょう
    シリウスへレスポンシブウェブデザイン構造を設定したなら掲載する画像の事情により正常に表示されない場合があります 事情解説対処はこちらで.....
    パソコン スマートフォン画面でどちらも記事列を適合表示する指定
    シリウスレスポンシブ構造の記事列はパソコンと横サイズが異なるためスマートサイズだと自動で折り返されてしまいますが どちらも同様の記事列で表示することもできますが?  詳細はこちらで...
    iPhone ipadでサイト背景を固定化する仕様設定
    シリウスサイトの背景を固定化している場合でレスポンシブ化された際 iPhone ipadではサイト背景がスクロールしてしまう障害が発生します 対処法はサイトで......
    サイドメニューを押しやらない固定するレスポンシブウェブレイアウト
    シリウスへのデフォルトレスポンシブウェブレイアウトでは サイドメニューが後方へ押しやられますが 位置を動かさない または メニューのサイズを固定可変がCSS指定により可能となります
    レスポンシブウェブデザイン構造でのフォントサイズ指定
    シリウスレスポンシブウェブデザイン構造でのフォントサイズは シリウス機能で16pxを指定していた場合 iPhoneサイトでは自動で縮小されてしまいます 見やすくする対応は?
    レスポンシブウェブデザインに適合する画像サイズ
    シリウスレスポンシブウェブデザインではスマートフォン パソコンの各画面では 掲載画像がどのように変化するのか?各端末に適合するサイズは?いろんな解釈がありますね
    大きな縦サイズヘッダー画像はレスポンシブサイトでは読み込みが遅い
    シリウスレスポンシブサイトでは大きな縦画像サイズのヘッダー画像を設置している場合 スマートフォンでは出現スピードの読み込みが遅くなります
    端末により記事コンテンツを切り替え表示する
    シリウスサイトをスマートフォンサイトでは記事列を横幅内に収めて または多少のコンテンツを替えて パソコンサイトと異なるコンテンツに切り替えて表示するカスタマイズ方法の詳細
    スマートフォン PCコンテンツ切り替え時のシリウス機能操作
    SIRIUS シリウススマホ PCデバイスでの切り替えコンテンツについて 初期指定の反映スタイル 付け加えたカスタマイズ説明による反映確認の詳細です
    スマートフォン パソコンサイトで画像を切り替え表示指定する
    当サイトのシリウスレスポンシブウェブデザイン構造ではスマートフォン パソコンサイト画面で画像の表示非表示の切り替え または異なる画像を表示することが指定出来ます
    スマートフォンサイトではスライダー画像は必要か?
    SIRIUS シリウスパソコンサイトでは綺麗に表示されるスライダー画像ですがスマートフォン閲覧サイトでは表示が必要ののでしょうか?
    トップページ全体をワイドヘッダー画像で表示したい?の勘違い
    SIRIUS シリウステンプレートへトップページ全体をワイドヘッダー画像で表示したい?といわれる方がおりますが ウェブ初期時の勘違い?ではないでしょうか とりあえずの講釈はこちらで....
    レスポンシブウェブ構造でのワイドPC画面対応背景画像設定方法
    シリウスのレスポンシブサイトに編集された背景画像を配置する際は ワイドサイズのウルトラPC画面でも 自動拡張されるようclass指定で設定を追加します
    スマートフォンでは、固定のグローバルは出現させない
    SIRIUS シリウスサイトでグローバルナビゲーションのスクロール固定化を指定している場合、スマホ閲覧の際、邪魔になるので出現しないよう指示しましょう
    iphone設定からレスポンシブデザインへ移行する際の注意事
    SIRIUS シリウスのiphone設定からレスポンシブデザインへ移行する際は、指定の解除およびサーバーファイルのiphone削除が必要です
    ヘッダー画像のレスポンシブウェブデザイン構造、追加記載方法
    SIRIUS シリウスレスポンシブ導入テンプレートでは、ヘッダー画像を縮小させる、またはスマートフォンサイトでは小さな画像に切り替えるとかの考え方も合わせ含めた対処方法

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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