• MENU●●●●
  • 3カラムテンプレート レスポンシブウェブデザイン追加方法


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

    スポンサー広告

    関連記事


    デフォルト3カラム レスポンシブウェブデザイン追加方法

    シリウス3カラムテンプレートのレスポンシブ機能追加が完了致しました

     

    当初 スマホ閲覧が主流となる現状で 今後は1.2カラムがメインだろう
    との
    ネット情報に影響され3カラムは不要だろうと判断しておりましたが
    ECサイトみたいな大手サイトでは 3カラムでメニューてんこ盛りの賑やか
    サイトでガンガン攻め込んでいる様子

     

    3カラム不要は 誤判断でしたね

     

    大量の情報を発信するには やはり3カラムも必要とされております

     

    スポンサーリンク

     

     

    そんなわけで
    今回は 3カラムテンプレートをレスポンシブウェブデザインへとの
    カスタマイズを追加する方法の手順をご案内します

     

    テンプレート切り替えではなく 今あるサイトをそのままで
    レスポンシブ機能を追加します

     

    作動状況のご確認は 当サイトのPC画面をマウス操作で
    徐々に狭めてみてください

     

    狭めるにつれて メニューが下方へ移動済ます

     

    記事も途中でサイズに合わせて折り返します

     

    画像も狭まります

     

     

    ipadで閲覧した際は 縦横どちらからでもみてください

     

    その閲覧デバイスで反映がご確認いただけます

     

     

     

    設定解説はデフォルトテンプレートで進めますがビジネステンプレートでも
    対応は可能です

     

    サイトメニューをデフォルトの左として フリースペースを右位置とします

     

     

    設定手順

     

    工程は2つ

     

    一つ目

     

    HTMLテンプレートへ viewportを張り付けます
    <head>;内
    meta位置に張り付ける

     

    </head>
    下へ

     

    <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
    <link rel="stylesheet" media="all" type="text/css" href="../styles.css" />

     

     

     

    HTMLトップページ カテゴリーページ エントリー以降すべての
    HTML内に貼り付けてください

     

     

    二つ目

     

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

     

    保存して 次にプレビューで確認すれば作動が反映されます

     

     

     

    @media(max-width:698px){

     

    body {
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: #333333;  /*フ ォントカラー */
    font-size: 0.9em; /*フ ォントサイズ */
    line-height: 140%;
    background-color: #F5F5F5;
    <% backgroundImage %>
    <% backgroundDisplay %>
    <% backgroundColor %>
    <% bodyFontSize %>
    background-attachment:fixed;
    }

     

     

    #container{
    width: 100%;
    }

     

    #contents {
    padding-right: 3%;
    padding-left: 5%;
    }

     

     

    #main {
    width:100%;
    padding:1% 1%;
    }
    #sidebar{
    width:30%;
    }
    img{
    max-width: 100%;
    height: 100%;
    width: auto;
      display:block;
    }
    h3{
    max-width: 98%;
    height: 100%;
    width: 95%;
    }

     

    #threebox {
    float: left;
    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;
    }

     

    #header h2 a, #header h2 a:visited,#header .title a,#header .title a:visited {
    color: #DE7E14;
    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;
    }

     

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

     

    #rmenu {
    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(max-width:698px){

     

    max-width:698px
    698pxサイズ以上でのモニター画面ではPCサイト
    以下のサイズでは レスポンシブウェブデザイン化サイトになりますが
    数値の指定は 私の勝手な判断で決めていることで 全般的とは
    言い切れません

     

    お知らせごと

     

    ネット上で言われている
    640pxの場合 アイフォン6では横画面がPC画面のまま 
    不作動でしたので698pxにしました

     

    数値基準は
    他のサイト情報も参考に自己判断で願います

     

    width: 100%;の場合 レスポンシブ化縮小の際 記事カラム右に
    スペースが空きませんが わずかのスペースを空けるなら
    数値を98とかに変更してください

     

    BOX枠を表示させるとスペースが確認いただけます

     

     

     

    スマホでフォントサイズを変更する場合は以下書き換え

     

    body {
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: #333333;  /*フ ォントカラー */
    font-size: 0.9em; /*フ ォントサイズ */
    line-height: 140%;
    background-color: #F5F5F5;
    <% backgroundImage %>
    <% backgroundDisplay %>
    <% backgroundColor %>
    <% bodyFontSize %>
    background-attachment:fixed;
    }

     

     

     

    #container{
    width: 100%;
    }

     

     

     

    #main {
     width:100%;
    padding:1% 1%;
    }
    記事カラム幅を伸縮指定
    main内をいじりすぎるとスタイルシートのレイアウト崩れを
    引き起こす現象が何度もありました
    デフォルトに戻すでも解消されず
    スタイルシート記載をすべて入れ直すことになります

     

     

     

     

    #sidebar{
    width:30%;
    }
    不要に見えるsidebarですが必要

     

     

     

    img{
    max-width: 100%;
    height: 100%;
    width: auto;
      display:block;
    }
    画像の伸縮

     

    h3{
    max-width: 96%;
    height: 100%;
    width: 95%;
    }
    見出し背景 テキスト折り返し伸縮

     

     

    #threebox {
    float: left;
    width: 100%;
    }
    threeboxでカラム内伸縮
    記事の折り返し画像の伸縮をカバーしてます

     

     

     

     

    #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: #DE7E14;
    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;
    }
    グローバルメニューの伸縮

     

     

     

     

    #menu {
    float: left;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    }
    サイトメニューの移動と伸縮
    width: 100%;は  width: auto;でも作動します

     

    サイト巻末 フッター以降に憑依される
    横幅を縮小したい場合は 数値を狭める

     

     

     

    #rmenu {
    float: left;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    }
    フリースペースの移動と伸縮
    サイトに状況によりサイトメニューと横サイズが 異なる台は
    数値合わせで調整します

     

    #rmenuの記述をよく見てください
    menuではなく rmenuです 念のためのお知らせ

     

     

    #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;
    }
    検索ボックスの横ずれ移動

     

    } しめ

     

    検索ボックスは伸縮せず 右位置から左へ枠内で移動します

     

    検索ボックスを非表示にしている場合でも 後あとのため
    記載は削除せずが良いかと思います

     


     

    フッターテキストは伸縮されますが デフォルトのホワイト台紙の場合
    フォントも白なので折り返し以降のフォントが認識できません

     

    フッターテキストカラーを変えるか 背景が色図けされた際は
    認識可能です

     

    エントリーページ一カラム設定の際の調整

     

     

     

     

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

     

     

    #container{
    width: 1000px;
    }

     

     

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

     

     

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

     

     

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

     

     

    h3{
    height: 100%;
    width:950px;
    }

     

     

    #threebox {
    float: left;
    width: 980px;
    }

     

     

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

     

     

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

     

     

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

     

     

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

     

     

    #main {
    float: left;
    width:100%;
    }

     

     

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

     

     

    h3{
    height: 100%;
    width: auto;
    }

     

     

    #threebox {
    float: left;
    width: 100%;
    }

     

     

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

     

     

    #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: #DE7E14;
    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;

     

    }
    }

     


     

    念のための解説

     

    サポートへ質問がありました

     

    当関連解説の シリウストップは3カラム 下層は2カラムスタイルへ
    超カスタマイズ
    参考サイト
    では 

     

    以下の記述を変更して スタイルシートに記載していますが
    当該コンテンツでは 同じ3カラムでありながら記載がありません

     

    記載ミスでしょうか?
    ということでした

     

     

    p {
    width: auto;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    }

     

    記述は シリウスデフォルトに記載されてるものですね

     

    シリウストップは3カラム 下層は2カラムスタイル解説では
    この記載は重要で 記事列のレスポンシブ縮小を指定しています

     

     

     

    然し
    当該コンテンツで採用すると 逆に記事列が縮小しない

     

    となるのです

     

     

    ということで 私も何度も検証作業として記載したものの記事列
    その他が不作動の結果に至り 採用はせずとしたのです

     

     


     

     

    スタイルシートに貼り付けましたら保存をお忘れなく

     

    もし お気に召さなければ記述を削除してください 

     

    元に戻ります

     

     


     

    今回の記述は 未完成かもしれません

     

    他のサイトでも 正常に反映されてはおりますが 
    今後も精度を上げるよう勤めておりますので
    後々当サイトへ再訪いただければと願います

     

    3カラムテンプレート レスポンシブウェブデザイン追加方法
    SIRIUS シリウスレスポンシブデザインテンプレート公開
    シリウスカスタマイズ

     

    3カラムテンプレート レスポンシブウェブデザイン追加方法関連解説
    サイトをレスポンシブウェブ化カスタマイズする今事情
    SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
    レスポンシブウェブデザイン設定事情を理解しよう
    シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にCSSを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
    レスポンシブウェブデザイン変更前の説明
    SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
    レスポンシブウェブデザインカスタマイズのレイアウト変更値
    シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をcss指定値カスタマイズを含めて複数解説します
    ヘッダー画像をレスポンシブウェブ構造で作動させる方法
    シリウスへレスポンシブウェブデザインを追加構築してもヘッダー画像だけがレスポンシブ化作動不能という場合は こちらのサイト解説を参考にしてください 取り合えずは伸縮致します
    ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
    シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
    デフォルト一カラムレスポンシブウェブデザイン設定
    シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
    2カラムテンプレート レスポンシブデザイン設定方法
    SIRIUS シリウス2テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
    2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ
    SIRIUS シリウスサイト2カラムをトップページとカテゴリー以下でレイアウトサイズを異なるスタイルで表現する2段階表示のレスポンシブデザインのカスタマイズの解説です
    トップページのみをレイアウト替えした際のカスタマイズ色々
    シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
    レスポンシブサイトの見出しメニューを調整するカスタマイズ
    シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
    レスポンシブウェブデザイン公開では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配色ツールまとめサイト