• MENU●●●●
  • 3カラム2カラム併用表示テンプレート追加カスタマイズ


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

    関連記事


     スポンサーリンク

    3カラム 2カラム併用スタイル レスポンシブ化を含めたカスタマイズ手順

    今回のカスタマイズは デフォルト3カラムをシリウス操作画面での
    サイト詳細設定で、カテゴリー以下階層のフリースペースの表示を
    非表示指定にして3カラムを2カラムにするデフォルト機能解説ではなく

     

    CSS指定により...
    トップページ以下のカテゴリー エントリーページをデフォルトの2カラム
    スタイルと同様の表示構成に変えるもので一サイトで
    3カラム 2カラム複合表示構成となります

     

    また,デフォルト3カラムテンプレートを主体にカスタマイズするもので
    複合構成に適合するよう指定した構築にしておりますので 

     

    ビジネステンプレートおよび他のカラムには適合しません

     

    他のカラムテンプレートでは取り付けは出来るもののCSS指定が合わず
    適切にコントロールできないため不作動があるということです
    他のカラムについては検証ごとに追記して参ります

     

    前置き
    今回のカスタマイズは、異なるレイアウトを一つのサイトで表すため、class
    指定での指示記載が置くなる理由で、些細な記載ミス行でもあれば
    レイアウトが正確に表示されません

     

    レイアウト崩れも発症します
    デフォルトTPからカスタムするとその他いろんなものをいじる必要にも迫られます

     

    そんなことで、シリウス初心者の方には意味不明な事態を招く危険もあり
    ...慣れない時期はご遠慮ください
    また、永く携わっていてもカスタマイズ慣れしていない場合も同様...

     

    ある程度の理解が可能な方だけご利用ください

     

    参考
    類似コンテンツ
    2カラムトップページと下層のレイアウトを異なるスタイルで
    表示する2元スタイルカスタマイズ
    トップページとカテゴリー以下のレイアウトを変えたレスポンシブ

     


     

    スポンサーリンク

     

     


     

    今回の構成スタイルは....

     

    トップページは3カラム カテゴリーページを含むメインメニューは左配置で
    フリースぺースを含むサイドメニューは右配置が基本で進めます

     

    カテゴリーを含む階層は2カラムでメイン サイドメニュ―とも右配置

     

    2カラムのサイドメニューはワイドサイズ可

     

    エントリーページの場合はカテゴリーページ同様右メニューの
    2カラムとして進めますがトップページ同様 3カラムでも表示は可能です 

     

    エントリー個別ページを一カラムへ変更の際はスタイルシート改行が
    影響してしまい..デフォルト一カラムのレイアウトにサイドメニュースペースが
    空いてしまう事になります

     

    正常なエントリー個別ページ一カラムを表示する対処法は手動での
    スタイルの割り込みに指定を追加しなければなりません
    巻末に説明あり

     

     

    レスポンシブウェブデザイン対応を含めた工程となりますが、事情により
    非対応を選択する際はレスポンシブ化のステップを省いてください

     

     

    HTMLの理解に不安のある方はスタイルシートのレイアウトエラーを
    防ぐため現在運営中のサイトでカスタムするのではなく
    新規サイトで
    3カラムテンプレートを呼び出してから実行し..反映確認後
    本サイトへ実行されてください

     

     

    htmlテンプレートからスタイルシートへの記載および改行を順に
    進めてまいります

     

    ステップ1

     

    テンプレート選択時に
    メニュー位置は左と指定してください

     

     

    今回は3カラムでサイト幅1000PX
    右に表示のサイトメニューは180PX
    左表示のフリースペースは 300PXとしての構成で進めますが
    異なるサイト幅をご利用の際は数値を割合で指定修正してください

     

     

    では進めます

     

    最初に操作画面 テンプレートの横幅設定で

     

    テンプレート横幅 1000PX
    メインカラム横幅 470PX
    メインメニュー   180PX
    サイドメニューを 300PXに指定します

     

     

     ステップ2 HTMLテンプレート記載

     

    HTMLテンプレートを開いてください

     

    レスポンシブウェブデザインであることをグーグルさんへお知らせする
    viewport を全てのテンプレート内の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" />

     

     

    1-2 class指定

     

    トップ カテゴリー エントリーページhtmlをスタイルシートで識別指定する
    ためのclass 指定をトップページ以外で指定改行します

     

    トップページはそのままいじりません

     

    カテゴリー エントリーページhtmlは、スタイルを独自に変える必要があり
    トップページと同じhtml要素ではスタイル指定ができないのです

     

     

    とりあえずはカテゴリー エントリーのみ変更します
    以降ページはは自己判断で願います

     

     

    htmlテンプレート内

     

    <body>をclass指定に書き換えます

     

    カテゴリーページ
    <body class="category">

     

    エントリーページ
    <body class="entory">

     

    ページ指定 category entory名は 任意で他の名称でも構いませんが
    一度反映スタイルをご確認後以降に書き換えてください

     

     

    HTML記載 次

     

    1-3 メイン サイドメニューを同じ配列に表示する指定の移動

     

     

    カテゴリー エントリーではトップページで表示される左サイトメニューを
    右に表示されるよう位置替え指定をします

     

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

     

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

     

    <% freeSpace3 %>

     

    <% siteMenu %>
    <% freeSpace4 %>
    </div>
    <!-- ★サイドメニューここまで★ -->

     

     

    <!-- ★サブメニューここから★ -->
    <div id="rmenu">
    <% freeSpace5 %>

     

    <% subMenu %>

     

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

     

     

     

    サイドメニュー内の

     

    <% freeSpace3 %>

     

    <% siteMenu %>
    <% freeSpace4 %>

     

     

    取り外し..デフォルト位置で右に位置するサブメニュー内へ移動します

     

     

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

     

     

     

    <!-- ★サイドメニューここまで★ -->

     

     

    <!-- ★サブメニューここから★ -->
    <div id="rmenu">

     

    <% freeSpace3 %>

     

    <% siteMenu %>
    <% freeSpace4 %>

     

    <% freeSpace5 %>

     

    <% subMenu %>

     

     

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

     

    上記作業は、カテゴリー エントリーHTML内で行います

     

    トップページテンプレートでは行わないでください

     

     

    2カラム以降 

     

    サイトメニュー フリースペースh3 h4メニューのメニュー表示は
    サブメニュー内に置くか 置かないかで表示 非表示の
    選択ができます

     

    2カラム以降、フリースペースのみでやられている方もおりましたので
    参考がてらの意見です

     

    html終わり


     

    ステップ3

     

    次にスタイルシートを開いてください

     

    簡潔に進めるためコードをコピーしてあなたのスタイルシートへ
    張り付ければ完了できるようにしております

     

    スタイルシートでは カテゴリー エントリーともに class指定読み込みを
    各記述コードの上に置くことで識別されます

     

    <body class="category">を
    body.category

     

    <body class="entory">を
    body.entory 
    と改行します

     

     

    上から行きます

     

    カテゴリー エントリーでの記事カラム内の文字どまり位置

     

    以下記述に到達してください
    p {
    width: auto;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    }

     

    カテゴリー エントリーでの記事カラム内の文字どまり位置

     

    上記行下にカテゴリー エントリーでは同スタイルなのですが
    個々に読み込まれるよう識別指定を追加します

     

     

    記載例

     

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

     

     

    body.category  / class指定 
    p {
    width: 640px; 
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    }

     

     

    body.entory   / class指定 
    p {
    width: 640px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    }
    ここまで

     

    / class指定は、削除してください

     

    width: auto;は テンプレートサイト横幅設定内でのメインカラム幅を
    読み込むよう指定しています

     

    そのままでは記事カラムがトップページ同様のサイズですので
    2カラムに合わせました
    width: 640px;記事内カラム幅

     

     

     


     

    次 レイアウト差分に到達してくださあい

     

    /* レイアウト差分 */

     

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

     

    }
    ここから下で追加行

     

    以下行に識別コード追加

     

    #main {
    float: right;
    width: 470px;
    }

     

    追加行
    body.category
    #main {
    float: left;
    width: 670px;
    }

     

    追加行
    body.entory
    #main {
    float: left;
    width: 670px;
    }
    ここまで

     

    mainの数値指定は トップページで反映されるもので 
    テンプレート横幅サイズで設定した メインカラム幅と
    同じにします
    #main {
    float: right;
    width: 470px;
    }

     

     


     

    次です

     

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

     

    上記行下に以下追加

     

    body.category
    #threebox {
    float: left;
    width: 670px;
    }

     

    body.entory
    #threebox {
    float: left;
    width: 670px;
    }
    ここまで

     

    threeboxとは 見えませんが記事カラムの枠ですね
    width: 670pxで指定

     

     

    まとめ
    以下コピーしてお使いください

     

    /* レイアウト差分 */

     

    ここから下

     

     

    #main {
    float: right;
    width: 470px;
    }

     

    追加行
    body.category
    #main {
    float: left;
    width: 670px;
    }

     

    追加行
    body.entory
    #main {
    float: left;
    width: 670px;
    }

     

     

     

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

     

    追加行
    body.category
    #threebox {
    float: left;
    width: 670px;
    }

     

    追加行
    body.entory
    #threebox {
    float: left;
    width: 670px;
    }

     

    追加行の記載は削除
    ここまで レイアウト構成は完了します

     

     

     

    ステップ4 エントリーぺージ 一カラムへの対処

     

     

    エントリーページ指定
    上級者設定で一カラムを指定した際は改行の影響で
    右にメニュースペースが空いてしまいます

     

    対処はスタイルの割り込み指定で対処します

     

    スタイルの割り込み記入欄に以下記載を張り付ければ
    一カラムとして正常に表示できます

     

    数値はサイト幅により書き換えてください

     

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

     

     

    body.entory
    #contents.pcol1 {
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    background-image:none;
    }
    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:980px;
    height: 100%;
    width: auto;
      display:block;
    }

     

    body.entory
    h3{
    height: 98%;
    width:950px;
    }

     

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

     

     

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

     

     

    一カラムをレスポンシブ化する際は 以下巻末に記載してございます

     


     

    ここからレスポンシブウェブへ進みます

     

    ステップ5 レスポンシブウェブデザイン追加

     

    今回のテンプレートスタイルは 3カラム 2カラムと複合して

     

    エントリーページで設定可能な一カラムでも作動するよう
    レスポンシブ加工しており作動も検証済みです

     

    また随時記述の変更追記もよい形に切り替えを推進しており

     

    上記の記載では未記載の記述も以下記述コードには含まれることも
    ご了承下さい

     

    以下コードの個別の意味合いの詳細はこちらのページをご覧ください
    SIRIUS シリウスレスポンシブウェブデザインテンプレート設定

     

     

    レスポンシブ化をサイトに追加するには
    スタイルシートの一番下へ移動して以下行を張り付けてください

     

    今回のサイト構成に合わせておりますが記事幅やメニュー幅を変える場合は
    数値変更で対処します

     

    以下数値
    width:690pxは この地点からレスポンシブウェブと変化する地点を
    意味します

     

     

    ここから

     

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

     

     

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

     

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

     

     

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

     

     

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

     

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

     

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

     

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

     

    h3{
    max-width: 96%;
    height: 100%;
    width: auto;
    }

     

    body.category
    h3{
    max-width: 96%;
    height: 100%;
    width: auto;
    }

     

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

     

     

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

     

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

     

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

     

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

     

    body.entory
    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;
    }

     

     

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

     

    }

     

     

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

     

     

    #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カラムでは動くのですが?

     

    その際は上級者設定メニュー スタイルの割り込みで当該ページのみを
    レスポンシブ化する記述を記載します

     

     

    以下コードを数値のみ あなたのサイト幅に書き換えて コピーして
    スタイルの割り込み覧に貼り付けてください

     

    スマートフォンサイズでのサイズは調整してございますが
    あなたの好みの範囲にしてください

     

     

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

     

    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{
    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: 98%;
    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: #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カラム 下層は2カラムスタイルへ超カスタマイズ
    シリウスカスタマイズトップ

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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