2カラムテンプレート　レスポンシブデザイン設定方法

Sirius.customize

TOP

トップページ

質問

シリウスカスタマイズサポート

ご案内

サイトマップ

2カラムテンプレートへレスポンシブデザイン追加手順

当ページ来られた読者様へ

ここでの説明は、シリウスのノンレスポンシブテンプレートへこ構造を追加する
というもので、販売元がレスポンシブテンプレートを追加以前に記載したもので
性能は劣ります

ですので、2カラム使用でしたら販売元のレスポンシブテンプレートをお使いください

当サイトの説明は、単なる記述のお勉強程度とご理解ください

ここからは、過去記事とのご理解で願います

シリウスをレスポンシブデザインへカスタマイズする場合、ベストなカラムは、
1，2カラムがやりやすいです

3カラムですとサイドメニューが多すぎてスマホ閲覧では下方へ
ロングメニューが長くなり情報を探すのも大変となるみたいです

2カラムの場合、サイドメニューが、下方へ移動してもある程度の
認識しやすい範囲に収まるのでスマホからでも情報が探しやすい
となりますね

レスポンシブデザインに移行することは、面倒そうと思われる方も
おられるでしょうね

そんな方は　当サイトの説明で今あるサイトにレスポンシブデザインを
追加してください

ですが　
スマホサイズのデバイスからは　シリウス機能iPhoneサイト設定での
画面が見やすい　と思われる方は　それはそれで指定しておきますと
スマホで閲覧時は優先され表示されます

作動状況

デフォルト　　ビジネステンプレート一カラム　2カラムでは作動します

ただし　
ビジネステンプレートの場合　レイアウト縮小した際
サイドの見出し背景が　下方へ移動した際　サイドメニューの幅サイズが
寸足らずで巣ので連写されて　見た目がよくありません
見出しメニュー背景画像を　記事カラムサイズに修正すれば見苦しさは
解消できます

3カラムの場合は　また構成が異なるのでこちらでご確認ください
シリウス3カラムテンプレート　レスポンシブウェブデザイン追加方法

作動状況ですが　ＰＣ上でサイト幅を狭めるに従い　
記事および画像ユーチューブ動画サイズも携帯サイズまで狭まります

サイトメニューおよび　F３　F４スペースは　狭まるにつれて　
下方へ移動します

ですが　それはＰＣ画面での事で正確ではありません

大事なのは　ipad画面での表示ですが　
ipad画面では　アクセスされたデバイス環境でサイズやレイアウトが
枠内で移動し　可変します

然しながら　実行してみるとあれこれ障害がございます
こちらに要点を追記しております
レスポンシブデザインへ移行する際の注意ごとはこちらでご確認ください
SIRIUS　シリウスサイトレスポンシブデザイン変更前の説明

１カラム　2カラムではレスポンシブデザインへの変更が
簡単に設定できますが　解説をご覧になり採用のご判断は自己責任で
行われてください

作業は　HTMLテンプレート各要素へ一つの記述

スタイルシートでは　一番下に作動する記述コードを
張り付け保存するだけで作動はすぐに確認できます

貴方のサイトに適合しない場合は　記述を削除すれば
元に戻ります

ＩＥ　グーグルプラウザ　Ｗ７　Ｗ８．１で正常作動確認済みです

最初に言います

ヘッダー画像は　パソコンの画面サイズを狭めても小さくなりませんが
ipadで確認するとサイズに調度適合可変しています

ネット上にあるスマホサイズ確認ジェネレイターサービスなどで
ＵＲＬ入れて検証しましたが　なぜか正常作動はすべて確認できませんでした

設定追加する手順をあれこれ含めて

HTMLテンプレート内　metaの箇所にレスポンシブデザインであることを
グーグルさんに伝えるコードを追記します　

<head>のすぐ下でOKです

トップ　カテゴリー　エントリー　サイトマップ　後二つ
全てにコピーして貼り付けます

HTML記載はここで終わり

次はスタイルシートですが　あれこれありますんでとりあえず
余計な項目ですがお読みください

当初は以下の記述をスタイルシートへ追加しました

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

#main {
width: 100%;
padding: 3% 4% ;
}

img{
max-width: 100%;
height:auto;
width: 100%; /* ie9 ie10*/
}
}
ここまで

ですが　サイト幅は縮小するものの

グローバルメニューが縮小しない

サイトタイトルが縮小せず　途中切れ

そこで　記述に指定を追加しました

max-widthの意味

max-width: 698PX で指定しておりますが数値の意味を説明します

ipad画面で698PX サイズ以下ですと　レスポンシブデザインが
反映されますが　
それ以上のサイズ画面ですとＰＣ並みの画面です

数値はレスポンシブデザインが反映される基準値です

max-width: 1000PX で指定すると以下のサイズ
ほとんどの小さいipad画面でレスポンシブデザイン反映となります

私の環境ですと２カラムでは698PX サイが適合しているのですが
全てに適合するとは言えません

確認済み
ipad縦画面は　768PXが適当数値です

ここは後日追記で　記載文章にずれがあります
レスポンシブデザインメディアクエリが一つの指定の場合
698oxでよいのですが　複数追加の際の適当数値は
698oxとなります

ここで一言追記

シリウスの無料配布で追加されたレスポンシブテンプレートは
@media screen and (max-width: 640px) {
の数値で指定しております

実際のところ、数値指定は各々説明に違いが利用ですが
数値変更はすぐに反映さrますのでご自身で納得される
範囲をご選択ください

ご自身のサイトで反映作動を確認し　良いと思われるサイズに
指定してください

以下が改行後の記述です
レスポンシブ　コピーしてスタイルシートに張り付け
初期改行として　サイト幅を指定してます

2015　0609　レイアウト一部修正
2016　0206　レイアウト一部修正

ここから

@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%;
}

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

#contents {
_height:10px;
padding-top: 20px;
padding-bottom: 20px;
min-height:400px;
margin-top:50px;
background-image: url();
background-repeat: repeat-y;
background-position: right;
margin-top:<% topMenuMargin(47,0) %>;
}

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

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

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

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

#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;
}

#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: 698px){　最大幅

スマートフォンで文字サイズを小さくしたい場合、

/* フォントサイズ */の通知を変更、px指定に書き換えても問題ありません

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%;
}

サイドメニューの一番下、グレー背景は伸縮の際、記事カラムに
入り込むので指定数値内では非表示としました

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

H3見出しの伸縮
h3{
max-width: 96%;
height: 100%;
width: 95%;　修正width: auto;に書き換え
}

修正あり
max-width: 96%;が　枠　見出し背景の伸縮ですが
100%;ですと　右に隙間なしなので96%;に変更しました

width: 96%;は　見出し内の文字のレスポンシブ化の際の
折り返し地点で　この数値が一番良いと判断してます

width: 95%;をwidth: auto;と修正しました

ヘッダー画像の伸縮指定ですが不作動です？

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

}

記述　height: <% headerHeight %>;では　ヘッダー画像の
縦幅は変化しません

ヘッダー画像の縦数値が通常より大きめな場合
height: 150px;とか　120PXとか　備えのヘッダー縦サイズで調整してみてください
縦サイズが大きめですと　グローバルメニューの位置ずれに影響します

ヘッダータイトルの伸縮　長ければ折り返し

#header h2 ,#header .title {
width: 95%;
font-size: 26px;　タイトルフォントサイズ
line-height: 36px;
position: relative;
left: 2%;
top: 60px;タイトル位置表示後調整します
}

グローバルメニュー
グローバルメニュー非表示の際は不作動

メニュー指定

#menu {
float: ｌeft;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
}
width: 100%;　数値変更で表示サイズ変更ま可

ｌeft記載の箇所　reftと誤記　記載してました
すみません

サイト検索窓
サイト検索窓非表示の方は削除してください

#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カラムに戻す場合は
一カラム指定がレイアウト崩れを発症致しますので
記述を必ず削除してください

上記載は　そのページでのレイアウトを指定するものです

一カラムのデフォルトスタイルそのままでは　両サイドにスペースが空くので

出来る限りコンテンツを両端まで延長しております

@media(max-width:1000px){から下がレスポンシブコードです

一カラムなので　サイト幅1000pxの場合は　合わせてください

サイト幅900pxの場合は900px　とします

1000px以下で指定しているものも準じて書き換えてください

ここから

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

#contents.pcol1 {
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
background-image:none;
}

#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: 98%;
width:950px;
}

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

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

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

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

#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: 98%;
}

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

p {
width: 100%;
margin-right: 0px;
margin-left: 0px;
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: #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 %>
}

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

}
}

ここまで

サイドメニュー内の画像、スマホサイズに合わせる

2016　0214

縮小作動した場合、サイドメニュー内に置く画像サイズがそのままで
反映され左側で表示されることについて

スマホサイズに拡大されるようできないかとご質問がありましたので
追記します

まず、画像の位置ですが中央を指定すれば偏りが防げます

<center>
画像コード
</center>

スマホサイズに合わせるですが、スマホの縦横サイズに2段階の
レスポンシブレイアウトをするという指定もできますが、2段階は
面倒なので、1段階で合わせる場合は、

コード内　inｇを１００％指定値ではなく

スマホサイズに適合とされる 300px
または　320pxに書き換えてみてください

レスポンシブが作動する数値内から指定サイズに画像は
変更されます

2015　05014

エントリーページのレイアウト調整を追記しました

2015　0407
H３見出しが伸縮しない　狭まらないを修正しました

2015　0419
メニュー幅調整記載追加

他に含める要素が解り次第追記いたします

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

2カラムテンプレート　レスポンシブデザイン設定方法関連解説

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

2カラムテンプレートへレスポンシブデザイン追加手順

設定追加する手順をあれこれ含めて

解説

エントリーページ一カラム指定の際のレイアウト調整記述

スポンサー広告

レスポンシブオンリー