サイトマップ
デフォルト一カラムにレスポンシブウェブデザインを設定する手順と ご注意ごと
シリウス一カラムサイトをレスポンシブウェブデザインへと構築を追加する
事は 当該ページで用意している記述コードをhtmlテンプレート内に
組み込めば容易にレスポンシブウェブサイトとしてネット上に公開が
可能となります
しかし 組み込み追加は容易であるものの 一カラムであるが故の
サイト構成に注意すべき点がございますので前置きとして留意点を
説明いたします
一カラムは サイドメニューがありませんね
サイト全体にコンテンツを表せるわけです
サイト幅いっぱいに記事列を並べる....
....ですね
全ての記事列がサイト幅いっぱいにという訳ではないでしょうけれど
ＰＣ画面では 整列して構成した記事列であっても
スマートフォンの画面サイズで見てみれば その整列記事列は
閲覧デバイスに合わされて 列が折り返されます
記事列の折り返しは 編集機能など何処にもありませんので
単語の途中から折り返されることもあり また折り返された箇所の
具合により 意図としない文章として理解され意味不明
または異なる意味合いになることもあります
一カラムの場合 横幅が2カラムなどに比べスペースが充分ありすぎるためか
そのような事例もあり得るのです
それらに注意する際の参考として サイトにレスポンシブ化を含めれば
作動はすぐにご確認いただけますのでスマートフォンで自分サイトを
確認して
記事列が折り返される地点を把握し ＰＣサイトでの記事列の
区切り点を合わせて
ＰＣ画面でも スマートフォンでも見やすい構成に努力しましょう
スマートフォン以外のタブレット ipadでは 縦か横 何れかにすれば
認識状態になるので無理に合わせずともよいでしょう
スポンサーリンク
レスポンシブウェブデザイン設定手順
レスポンシブ化として組み込む記述コードは2カラムと同様のものです
しかし 2カラム３カラム機能で用意されているシリウス機能
エントリーページでの特定ページのみを一カラムサイトにする設定とは
表示は同じとしてもデフォルトテンプレートでは 多少意味合いも異なります
エントリーページでの特定ページのみを一カラムサイトにする設定では
スマートフォンサイトでは サイト両サイドに隙間スペースが空いてしまうので
レイアウト調整が必要ですが
ここでは必要がありません
以下コードをＨＴＭＬテンプレート
トップページからリンク集まですべて貼り付け
HTMLテンプレート内 metaの箇所にレスポンシブデザインであることを
クロールの際 Google に伝える viewport コードを追記します
以下コードを含めないと スマートフォン検索表示の際
レスポンシブウェブサイトとして表示されないようです？
ＰＣサイトのまま
.....とGoogle さんの説明にありました
<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" />
保存選択忘れずに
ＨＴＭＬテンプレート記載は以上です
次にスタイルシートを開いて 一番下でよいので以下コードをコピーして
張り付けます
@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%;
}
#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(max-width:698px){ は
このサイズ以下でレスポンシブ化に切り替わりますという
基準点なのですが
一カラムの場合 サイドのメニューがありませんので
サイト幅の数値にしてもよいのかもしれません？
当ページは一カラムでの解説ですが 以下の関連エントリーページで
2カラムや 3カラムについても解説を追加しております
ご参考にしてください
デフォルトの一カラムをレスポンシブウェブデザイン設定
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ
- サイトをレスポンシブウェブ化カスタマイズする今事情
- SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
- レスポンシブウェブデザイン設定事情を理解しよう
- シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にＣＳＳを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
- レスポンシブウェブデザイン変更前の説明
- SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
- レスポンシブウェブデザインカスタマイズのレイアウト変更値
- シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をｃｓｓ指定値カスタマイズを含めて複数解説します
- ヘッダー画像をレスポンシブウェブ構造で作動させる方法
- シリウスへレスポンシブウェブデザインを追加構築してもヘッダー画像だけがレスポンシブ化作動不能という場合は こちらのサイト解説を参考にしてください 取り合えずは伸縮致します
- ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
- シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
- 2カラムテンプレート レスポンシブデザイン設定方法
- SIRIUS シリウス２テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
- 3カラムテンプレート レスポンシブウェブデザイン追加方法
- SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
- 2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ
- SIRIUS シリウスサイト2カラムをトップページとカテゴリー以下でレイアウトサイズを異なるスタイルで表現する2段階表示のレスポンシブデザインのカスタマイズの解説です
- トップページのみをレイアウト替えした際のカスタマイズ色々
- シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
- レスポンシブサイトの見出しメニューを調整するカスタマイズ
- シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
- レスポンシブウェブデザイン公開ではiPhoneサイト設定も必要
- シリウスをレスポンシブウェブデザインとして公開するに至り iPhoneサイト設定も必要ということが判明しましたのでお知らせいたします
