サイトマップ
レスポンシブサイトトは詳細指定が必要
シリウスのレスポンシブテンプレートは、デフォルトでいえばサイト幅が900pxなので
(max-width: 899px) からレイアウト変化が作用するように指定されています
（指定値はスタイルシートで確認できます）
でも、899pxですとiPhone、ipadサイズ、もしくは小さな画面のパソコンに合わせた
レイアウト調整でしょう
で、次にスマートフォン画面に合わせた数値とは、max-width: 640pxで、
CSSのサイズ指定による自動調整となる訳ですね
さて、カスタマイズするとなるとノンレスポンシブ構造異常にスタイルシートは
複雑化していますので慎重に物事を理解しなければなりません
上記でいったようにデバイスごとに作用させる指定コードが多くあるので
一つだけの作業では収まらないのです
ここで前置きとしますが、大幅なカスタマイズを行わない場合、HTML構造は
ほとんどいじらなくても良いですと理解してください
レイアウトのカスタマイズ等行う場合
スタイルシートを見てみましょう
CSS記載は、基本でりパソコンでの閲覧用と理解
ヘッダーボックスを例にしますね
/* ヘッダー
==================================================
*/
#headerbox .inner {
text-align: center;
}
#header {
height: 350px;
margin: 0 auto;
position: relative;
text-align: left;
width: 900px;
}
次に、899pxから反応する記載は、media コードで囲われます
@media screen and (max-width: 899px) {
#headerbox {
position: relative;
}
#header {
height: auto !important;
width: auto;
}
#header img {
position: static;
}
記載は、パソコン用を基本として899pxサイズでは異なる指定になっています
なぜ違うのか？
それは、899pxサイズでは異なるレイアウトにしているが理由
さらにスマートフォンサイズ640pxに進むと、また記載違いです
@media screen and (max-width: 640px) {
#header #headertxt {
padding: 15px 15px 5px;
position: static;
width: auto;
}
#header .title {
text-align: center;
text-shadow: 1px 1px 1px rgb(204, 204, 204);
}
#header .title a {
color:#a91d2a;
font-size: 20px;
}
#header .desc {
color:#343434;
font-size: 12px;
}
サイズが変化しても調整が不要の記載は同じですが、必要があるものは
合わせ替えされていますね
各項目を見てみると、899pxで囲われない箇所もありますが、
@media screen and (max-width: 899px) {
パソコンサイズがそのまま反映される範囲のものと理解します
と、なんか面倒な意味合いで言ってますが、あくまで基本ですのであまり
カスタマイズするにご心配はありません
なんといってもシリウスさんのテンプレートですのでやりようは難しくもないのです
まず、デフォルトの900Pxサイズで進めるのでしたら
サイト幅やメニューサイズ、もしくは色替えなどは、メディア（media ）コードで
囲われない項目で改行します
899pxでは、ほぼ900Pxサイズでの改行が反映されますので通常はいじらず
でも問題ないでしょう
次に、640pxなのですが、スマートフォンサイズでもカスタマイズを加えたい場合
ここも調整することになるのですね
ま、デフォルトサイズ内でしたらさほどの面倒もなくカスタマイズができると
思われます
ここまでは、基本みたいなことのご案内でしたが、サイトサイズを拡張など
すると当然ながら面倒は増えてまいりますことご了承ください
関連ページ
- スタイルシートで記述を探しやすくる検索窓
- シリウスをカスタマイズするならスタイルシートで作業となりますが、類似記述など多くあり改行ミスしてしまうことも、できる限りは正確にさが大事。検索窓 を使うとミスの回避や作業をスピーディに行えます
