TOP

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

 

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

 

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

 

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

 

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

 


 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 


 

スポンサーリンク

 

 

作動状況

 

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

 

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

 

 

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

 

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

 

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

 

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

 

 

 

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

 

 

 

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

 

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

 

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

 

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

 

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

 

IE グーグルプラウザ W7 W8.1で正常作動確認済みです

 


最初に言います

 

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

 

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

 

 

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

 

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

 

<head>のすぐ下でOKです

 

<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記載はここで終わり

 

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

 

 

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

 

 

@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 サイズ以下ですと レスポンシブデザインが
反映されますが 
それ以上のサイズ画面ですとPC並みの画面です

 

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

 

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

 

私の環境ですと2カラムでは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;
}
}
ここまで

 

 

 

 


 

解説

 

ヘッダー内のサイトタイトルh1とヘッダーテキストの位置は
縮小した際 検索ボックスの重なりを防ぐため調整しております

 

検索ボックスを非表示とした際は ヘッダーテキストの位置変更も
可能です

 

 

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

 

 

 

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

 

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

 

 

 

 

画像の伸縮
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;タイトル位置表示後調整します
}

 

 

 

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

 

 

#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;
}
width: 100%; 数値変更で表示サイズ変更ま可

 

left記載の箇所 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 %>
}

 

 

 

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

 

}
}

 

ここまで


 

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

 

2016 0214

 

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

 

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

 

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

 

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

 

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

 

コード内 ingを100%指定値ではなく

 

 

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

 

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

 


 

2015 05014

 

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

 

 

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

 

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

 

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

 

 

 

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

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