サイトマップ
トップページのみ変更の2レイアウトスタイルのレスポンシブ構造を 含む構築手順
シリウスは通常トップページと以下の階層ではサイトレイアウトは
2カラム 3カラムではサイトメニュー フリースペースメニューは
左右交互に入れ替え 位置替えはできますが基本構成は
同じですね
また エントリーページでも個別に一カラムは指定できるものの
操作機能で指定できるのはここまでとなます
一つのサイトレイアウト＆エントリーページでの一カラムスタイルと
二つのサイト構成が出来るわけですが もう一つぐらいは
表せないものかと？
せめてトップページはサイトの顔ですので何とか個別なスタイルを
表現できないものかという趣旨で 今回は2カラムのトップページのみ
レイアウトを変えてみるというお話になります
また 今時代のサイトには必ず必要であろうレスポンシブウェブデザインも
二重レイアウトでも反映されるよう構造に加えております
ネット上では トップページは 記事幅狭めてサイド広告との
レイアウト比率が ４対６ または5対5程の割合の構成もおおく
見かけられます
今やネットでの流通は激戦状態で トップページでは読者の興味を
得られるようなサイト構成をしてるのです
ヤフーサイトを見てみれば 記事とサイトメニュー広告の配置割合が
ご確認いただけるでしょう
トップページの記事位置割合は 少なめですが リンク先は
2カラムとか 一カラムで記事コンテンツがメインの構成になりますね
シリウスでも比率構成は 5対5にできますが
トップページはそれでよし としても下層ページまで同じでは
商品等の説明であれば記事幅が狭く
広告が目障りで集中できないという事態に至ります
でも class指定を追加すればとトップページのレイアウトサイズを
カテゴリー エントリーページと異なるサイズで表現できるのです
トップページはサイトメニューと広告誘導がメインのにぎやかサイト
下層はコンテンツを充分に配備した記事がメインで
サイドメニューは標準構成
カテゴリー以下では 記事に集中していただくため 記事箇所に
割合を置くことが大事なわけです
シリウスデフォルト2カラム対応の解説
今回は デフォルト2カラムのトップページは１０００ＰＸ幅サイトとして
記事カラムを5 広告スペースを5のレイアウト
アメーバブログにあるような構成ですか？
カテゴリー以下は
記事カラムを８ 広告スペースを２の割合でレイアウト表現する解説と
なりデフォルトテンプレート対応で進めますます
一つのサイトで2重のレイアウトを指定するということで
レスポンシブ指定も2重に行います
説明の趣旨違いですが エントリーページで個別に一カラムを設定する際は
スタイルシート改行が影響してか？反映が正常に行われませんので
スタイルシートではなく シリウス機能 スタイルの割り込みでの
手動設定となります
以下に 追加解説として記載あり
class指定とは何ぞや？
ですが
説明が長くなりますのでここでの詳細は省かせていただきます
では進めましょう
カテゴリー以下のレイアウトはデフォルトとのまましますが サイドバーを
３００ｐｘとかにする際は 操作画面よりテンプレートの横幅設定で
サイズ指定してください
ここでの解説はトップページのみをレイアウト変更としますので
基本的にカテゴリー以下はいじりません
ただし
レスポンシブ構造を追加する際は カテゴリー以下階層へ指示を
するため 全てのhtmlテンプレートへ記述を追加する必要があります
ステップ1 トップページテンプレートclass指定
class指定を行います
トップページテンプレートを開きます
</head>の下方にに<body>の記載がありますね
<body>をclass指定するため記載を書き換えます
<% googleSitemapTag %>
<% mobileLinkDiscovery %>
</head>
<body> ここです
<div id="container">
<!-- ★ヘッダーここから★ -->
<% pageTopic %>
ここまで
以下にclassを指定します
<body class="toppage">
toppageは 任意ですので他の記載でも良いです
ｈｔｍｌ巻末の</body>は 改行しません そのまま
書き換え指定は トップページのみでレイアウトを反映させるわけです
で...ここだけで完了...します
次は スタイルシートで改行します
サイト幅を１０００ｐｘとして
サイドメニュー幅を5の割合ですと 500ですが サイト両サイドに
スペースがありますので４８５ｐｘ
記事カラムも同様に４８５ｐｘ
とします
この箇所へ到達してください
/* レイアウト差分 */
#contents {
padding-right: 10px;
padding-left: 15px;
}
ここです
#main {
float: left;
width: 650px
}
mainが記事カラムの横幅を指定してます
ここにmainのclassを指定します
次の記載 ここでも追加します
#menu {
float: right;
width: 200px;
padding-top: 10px;
padding-bottom: 10px;
}
ここはmenuのclassを指定する
width: 200px;は デフォルトのメニュー幅
上記記述は いじらずそのままで コード上にclassを指定する
コードを追加します
classを指定する事でトップページでのみレイアウトが切り替わるのです
読み込みを支持する
body.toppageを記述の上に追加します
サイト幅をwidth:485px;にします
以下 追加
body.toppage
#main {
float: left;
width:485px;
}
body.toppage
#menu {
float: right;
width: 485px;
padding-top: 10px;
padding-bottom: 10px;
}
body.toppage指定がトップページでは優先され 指定なしは
通常のカテゴリー以降の階層で読み込まれ反映されるわけです
並び順を確認下さい
#contents {
padding-right: 10px;
padding-left: 15px;
}
ここから
#main {
float: left;
width: 650px
}
body.toppage
#main {
float: left;
width:485px;
}
#menu {
float: right;
width: 200px;
padding-top: 10px;
padding-bottom: 10px;
}
body.toppage
#menu {
float: right;
width: 485px;
padding-top: 10px;
padding-bottom: 10px;
}
ここまで
classを指定
直下にデフォルト記述 各要素を置くのです
記載完了後は 保存をしましょう
これで トップページのレイアウト切り換えはは完了します
ステップ２ レスポンシブ化の2重指定
ここからの解説は 通常のシリウスサイトをレスポンシブ対応にする
手順とは異なり2重指定となります
classを指定しているトップページは
body.toppageで読み込み指定をしなければなりません
他の指定は bodyなのですが body記載はしなくとも
通常指定で読み込まれます
手順1viewport配置
もう一度ＨＴＭＬテンプレートを開いてください
サイトがレスポンシブウェブデザイン構造であることをグーグルさんが
認識し レスポンシブウェブ化されたサイトとしてモバイル関連で
表示されるよう
viewport を全てのテンプレート内の metaの箇所に張り付けます
トップページから リンク集まですべて
グーグルクロールの際 viewport記述をＨＴＭＬテンプレート内に
置かないとレスポンシブウェブサイトとは認識されず
ＰＣサイトの画面で表示されてしまう？
....と...いうことみたいです
と...グーグルさん解説にありました
以下にviewportを含む解説ありです
https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/responsive-design?hl=ja
viewport記述の置く位置は<head>の下あたりで
metaの並びに置く で良いと思われます
以下コピーして貼り付け
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<link rel="stylesheet" media="all" type="text/css" href="<% pageDepth %>/styles.css" />
ＨＴＭＬテンプレート記載はここで終了
スポンサーリンク
手順２ レスポンシブ構造コードの2重配置
レスポンシブ構造コードは以下に記載しており
正常作動を確認済みなのですぐ使えます
二つの指定記載
body.toppageはclassを指定した記載です
スタイルシートを開いて 一番下に以下行をコピーして貼り付けます
ここから body.toppage のclassを指定
@media screen and (max-width: 1000px) {
body.toppage
#container{
width:100%;
}
body.toppage
#contents {
padding-right: 0px;
padding-left: 0px;
}
body.toppage
#main {
width:100%;
padding:1% 1%;
}
body.toppage
#sidebar{
width:30%;
}
body.toppage
img{
max-width: 100%;
height: 100%;
width: auto;
display:block;
}
body.toppage
h3{
max-width: 98%;
height: 100%;
width: auto;
}
body.toppage
#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;
}
body.toppage
#header h2 ,#header .title {
width: 95%;
font-size: 26px;
line-height: 36px;
position: relative;
left: 2%;
top: 60px;
}
body.toppage
#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;
}
body.toppage
#menu {
float: left;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
}
body.toppage
#menu {
float: left;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
body.toppage
#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: 1000px) {
#container{
width:100%
}
#contents {
padding-right: 0px;
padding-left: 0px;
}
#main {
width:100%;
padding:1% 1%;
}
#sidebar{
width:30%;
}
img{
max-width: 100%;
height: 100%;
width: auto;
display:block;
}
h3{
max-width: 100%;
height: 100%;
width: 100%;
}
#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;
}
#menu {
float: left;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
#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: 1000px) { で記載される
1000px数値は この数値以下ではレスポンシブ構造が反映される
起点ですが 648とか798とか サイト運営者様の環境により
選択値は様々で どれが一番ベスト化は私には測りかねません
数値指定は自己判断でお願いします
念のため
960とか1024指定のサイトもあります
エントリーページ一カラム指定でのご注意ごと
エントリーページも これまでの手順で進めていれば 通常に
レスポンシブ構造は反映されますが
シリウスにはエントリーページのみ一カラムで表示する機能がありますね
ですが そこに問題ありなんです
一カラムは ヘッダー画像以下 グローバルメニュー横幅サイズ に比べ
記事幅が１０～１５ＰＸ程短めに構成されています
サイトの両サイドの隙間があるということなんですが この隙が
スマートフォンで閲覧した際影響するのです
ＰＣやタブレットに比べスマートフォンは小さな画面の短い記事列が
短くなるのですが 隙間があるためさら短文となり何とも
読みずらいのですね
そこで一カラムにする際は 上級者設定メニューを開いて
スタイルの割り込み指定で優先的に記事幅を横幅いっぱいに
表示されるようＣＳＳ指定をします
ここで大変申し訳ないことですが エントリーのレスポンシブ構造を
追加するには エントリーhtmlテンプレート内で
<body> を class指定することになります
でないと動いてくれません
<body class="entory">
スタイルの割り込みで使用する記述は以下になります
body.entory
ではスタイルの割り込みに記載する記述へと進めます
記載の注意ごと
用意した記述を張り付ければレイアウト調整は完了しますが
一カラムレイアウトに合わせているため デフォルトを指定すると
2カラムではレイアウト崩れになります
事情により2カラムに変更する際は記述を削除してください
以下記述は検証済みですが
@media(max-width:1000px){内の数値は自己判断で
書き換えてください
ここから
body.entory
#contents {
padding-right: 2px;
padding-left: 2px;
}
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{
max-width: width:950px;
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: 100%;
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: #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;
}
}
ここまでを張り付けましたら必ず保存をしてください
まだまだ終わりません
重要
これでレイアウトの違いは表現できるわけですが 問題があります
トップページの横幅の大きいフリースペースに合わせた画像は
下層ではサイズが合わないとなるのですね
テキストは 折り返されますが 画像およびバナー広告は
縮小しません
又逆に 下層のフリースペースサイズの画像も トップページでは
小さすぎとなります
解消するための手段としては 2カラムではデフォルトでフリースペースは
ｈ3 ｈ4までの二つですが 3カラム同様
ｈ5 ｈ6を追加してメニュー枠を増やします
トップページのみフリースペースのｈ3か ｈ4で表示させ
カテゴリー以下では ｈ3か ｈ4枠サイズのフリースペースは
非表示として指定し
ｈ5 ｈ6を使用する...とします
ｈ5 ｈ6の追加方法は いたって簡単
ＨＴＭＬテンプレートを開いて 以下の箇所で
<!-- ★メインコンテンツここまで★ -->
<!-- ★サイドメニューここから★ -->
<div id="menu">
<% freeSpace3 %>
<% siteMenu %>
<% subMenu %>
<% freeSpace4 %>
</div>
<!-- ★サイドメニューここまで★ -->
上記の下に
以下記載をカテゴリーエントリー ＨＴＭＬ内テンプレ－トに
張り付ければ完了します
確認は 保存選択後フリースペースメニューで追加が確認できます
以下を コピーして貼り付けてください
<!-- ★サブメニューここから★ -->
<div id="rmenu">
<% freeSpace5 %>
<% subMenu %>
<% freeSpace6 %>
</div>
<!-- ★サブメニューここまで★ -->
必ず トップページに置いたフリースペースは
カテゴリー エントリーページでは非表示としてください
ここで一つ
2カラムスタイルシートでは なぜか？
#space5, #space6が 記載されておりますので
スタイルシートは弄らずで良いです
もし何らかの事情で#space5, #space6が見当たらない場合は
追加してください
ここですね
/* フリースペース */
#space3, #space4, #space5, #space6 {
background-color: #FFFFFF;
text-align: center;
line-height: 120%;
font-size: 12px;
padding: 8px;
}
ここまで
以上で解説は終了します
トップページとカテゴリー以下のレイアウトを変えたレスポンシブ
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ
- サイトをレスポンシブウェブ化カスタマイズする今事情
- SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
- レスポンシブウェブデザイン設定事情を理解しよう
- シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にＣＳＳを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
- レスポンシブウェブデザイン変更前の説明
- SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
- レスポンシブウェブデザインカスタマイズのレイアウト変更値
- シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をｃｓｓ指定値カスタマイズを含めて複数解説します
- ヘッダー画像をレスポンシブウェブ構造で作動させる方法
- シリウスへレスポンシブウェブデザインを追加構築してもヘッダー画像だけがレスポンシブ化作動不能という場合は こちらのサイト解説を参考にしてください 取り合えずは伸縮致します
- ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
- シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
- デフォルト一カラムレスポンシブウェブデザイン設定
- シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
- 2カラムテンプレート レスポンシブデザイン設定方法
- SIRIUS シリウス２テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
- 3カラムテンプレート レスポンシブウェブデザイン追加方法
- SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
- トップページのみをレイアウト替えした際のカスタマイズ色々
- シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
- レスポンシブサイトの見出しメニューを調整するカスタマイズ
- シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
- レスポンシブウェブデザイン公開ではiPhoneサイト設定も必要
- シリウスをレスポンシブウェブデザインとして公開するに至り iPhoneサイト設定も必要ということが判明しましたのでお知らせいたします
