TOP

トップページのみ変更の2レイアウトスタイルのレスポンシブ構造を  含む構築手順

シリウスは通常トップページと以下の階層ではサイトレイアウトは
2カラム 3カラムではサイトメニュー フリースペースメニューは
左右交互に入れ替え 位置替えはできますが基本構成は
同じですね

 

また エントリーページでも個別に一カラムは指定できるものの
操作機能で指定できるのはここまでとなます

 

一つのサイトレイアウト&エントリーページでの一カラムスタイルと
二つのサイト構成が出来るわけですが もう一つぐらいは
表せないものかと?

 

せめてトップページはサイトの顔ですので何とか個別なスタイルを
表現できないものかという趣旨で 今回は2カラムのトップページのみ
レイアウトを変えてみるというお話になります

 

また 今時代のサイトには必ず必要であろうレスポンシブウェブデザインも
二重レイアウトでも反映されるよう構造に加えております

 


 

ネット上では トップページは 記事幅狭めてサイド広告との
レイアウト比率が 4対6 または5対5程の割合の構成もおおく
見かけられます

 

今やネットでの流通は激戦状態で トップページでは読者の興味を
得られるようなサイト構成をしてるのです

 

ヤフーサイトを見てみれば 記事とサイトメニュー広告の配置割合が
ご確認いただけるでしょう

 

トップページの記事位置割合は 少なめですが リンク先は
2カラムとか 一カラムで記事コンテンツがメインの構成になりますね

 

 

シリウスでも比率構成は 5対5にできますが 
トップページはそれでよし としても下層ページまで同じでは 
商品等の説明であれば記事幅が狭く 
広告が目障りで集中できないという事態に至ります

 

 

でも class指定を追加すればとトップページのレイアウトサイズを
カテゴリー エントリーページと異なるサイズで表現できるのです

 

トップページはサイトメニューと広告誘導がメインのにぎやかサイト

 

下層はコンテンツを充分に配備した記事がメインで
サイドメニューは標準構成

 

カテゴリー以下では 記事に集中していただくため 記事箇所に
割合を置くことが大事なわけです

 


 

シリウスデフォルト2カラム対応の解説

 

 

今回は デフォルト2カラムのトップページは1000PX幅サイトとして
記事カラムを5 広告スペースを5のレイアウト

 

アメーバブログにあるような構成ですか?

 

 

カテゴリー以下は
記事カラムを8 広告スペースを2の割合でレイアウト表現する解説と
なりデフォルトテンプレート対応で進めますます

 

一つのサイトで2重のレイアウトを指定するということで
レスポンシブ指定も2重に行います

 

説明の趣旨違いですが エントリーページで個別に一カラムを設定する際は
スタイルシート改行が影響してか?反映が正常に行われませんので
スタイルシートではなく シリウス機能 スタイルの割り込みでの
手動設定となります

 

以下に 追加解説として記載あり

 


 

 

class指定とは何ぞや?
ですが 
説明が長くなりますのでここでの詳細は省かせていただきます

 

 

では進めましょう

 

カテゴリー以下のレイアウトはデフォルトとのまましますが サイドバーを
300pxとかにする際は 操作画面よりテンプレートの横幅設定で
サイズ指定してください

 

ここでの解説はトップページのみをレイアウト変更としますので
基本的にカテゴリー以下はいじりません

 

ただし
レスポンシブ構造を追加する際は カテゴリー以下階層へ指示を
するため 全てのhtmlテンプレートへ記述を追加する必要があります

 

 

 

ステップ1 トップページテンプレートclass指定

 

class指定を行います

 

トップページテンプレートを開きます

 

</head>の下方にに<body>の記載がありますね

 

<body>をclass指定するため記載を書き換えます

 

 

<% googleSitemapTag %>
<% mobileLinkDiscovery %>
</head>

 

 

<body> ここです
<div id="container">
<!-- ★ヘッダーここから★ -->
<% pageTopic %>
ここまで

 

以下にclassを指定します

 

<body class="toppage">

 

toppageは 任意ですので他の記載でも良いです

 

html巻末の</body>は 改行しません そのまま

 

 

書き換え指定は トップページのみでレイアウトを反映させるわけです
で...ここだけで完了...します

 


 

次は スタイルシートで改行します

 

サイト幅を1000pxとして

 

サイドメニュー幅を5の割合ですと 500ですが サイト両サイドに
スペースがありますので485px
記事カラムも同様に485px
とします

 

この箇所へ到達してください

 

/* レイアウト差分 */

 

#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重指定

 

ここからの解説は 通常のシリウスサイトをレスポンシブ対応にする
手順とは異なり2重指定となります

 

classを指定しているトップページは
body.toppageで読み込み指定をしなければなりません

 

他の指定は bodyなのですが body記載はしなくとも
通常指定で読み込まれます

 


 

手順1viewport配置

 

もう一度HTMLテンプレートを開いてください

 

サイトがレスポンシブウェブデザイン構造であることをグーグルさんが
認識し レスポンシブウェブ化されたサイトとしてモバイル関連で
表示されるよう
viewport を全てのテンプレート内の metaの箇所に張り付けます
トップページから リンク集まですべて

 

グーグルクロールの際 viewport記述をHTMLテンプレート内に
置かないとレスポンシブウェブサイトとは認識されず 
PCサイトの画面で表示されてしまう? 
....と...いうことみたいです

 

と...グーグルさん解説にありました

 

以下に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" />

 

HTMLテンプレート記載はここで終了

 

 

スポンサーリンク

 

 


 

 

手順2 レスポンシブ構造コードの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指定のサイトもあります

 


 

エントリーページ一カラム指定でのご注意ごと

 

エントリーページも これまでの手順で進めていれば 通常に
レスポンシブ構造は反映されますが

 

シリウスにはエントリーページのみ一カラムで表示する機能がありますね
ですが そこに問題ありなんです

 

一カラムは ヘッダー画像以下 グローバルメニュー横幅サイズ に比べ
記事幅が10~15PX程短めに構成されています

 

サイトの両サイドの隙間があるということなんですが この隙が
スマートフォンで閲覧した際影響するのです

 

PCやタブレットに比べスマートフォンは小さな画面の短い記事列が 
短くなるのですが 隙間があるためさら短文となり何とも
読みずらいのですね

 

そこで一カラムにする際は 上級者設定メニューを開いて
スタイルの割り込み指定で優先的に記事幅を横幅いっぱいに
表示されるようCSS指定をします

 

ここで大変申し訳ないことですが エントリーのレスポンシブ構造を 
追加するには エントリー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カラムではデフォルトでフリースペースは
h3 h4までの二つですが 3カラム同様
h5 h6を追加してメニュー枠を増やします

 

トップページのみフリースペースのh3か h4で表示させ

 

カテゴリー以下では h3か h4枠サイズのフリースペースは
非表示として指定し

 

h5 h6を使用する...とします

 

 

 

h5 h6の追加方法は いたって簡単

 

HTMLテンプレートを開いて 以下の箇所で

 

<!-- ★メインコンテンツここまで★ -->

 

<!-- ★サイドメニューここから★ -->
<div id="menu">
<% freeSpace3 %>

 

<% siteMenu %>
<% subMenu %>

 

<% freeSpace4 %>
</div>
<!-- ★サイドメニューここまで★ -->
上記の下に

 

以下記載をカテゴリーエントリー HTML内テンプレ-トに
張り付ければ完了します

 

確認は 保存選択後フリースペースメニューで追加が確認できます

 

以下を コピーして貼り付けてください
<!-- ★サブメニューここから★ -->
<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 シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ

2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ関連解説
サイトをレスポンシブウェブ化カスタマイズする今事情
SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
レスポンシブウェブデザイン設定事情を理解しよう
シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にCSSを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
レスポンシブウェブデザイン変更前の説明
SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
レスポンシブウェブデザインカスタマイズのレイアウト変更値
シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をcss指定値カスタマイズを含めて複数解説します
ヘッダー画像をレスポンシブウェブ構造で作動させる方法
シリウスへレスポンシブウェブデザインを追加構築してもヘッダー画像だけがレスポンシブ化作動不能という場合は こちらのサイト解説を参考にしてください 取り合えずは伸縮致します
ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
デフォルト一カラムレスポンシブウェブデザイン設定
シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
2カラムテンプレート レスポンシブデザイン設定方法
SIRIUS シリウス2テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
3カラムテンプレート レスポンシブウェブデザイン追加方法
SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
トップページのみをレイアウト替えした際のカスタマイズ色々
シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
レスポンシブサイトの見出しメニューを調整するカスタマイズ
シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
レスポンシブウェブデザイン公開ではiPhoneサイト設定も必要
シリウスをレスポンシブウェブデザインとして公開するに至り iPhoneサイト設定も必要ということが判明しましたのでお知らせいたします
レスポンシブウェブサイトにPC SP画面切り替えスイッチは不要
SIRIUS シリウスレスポンシブウェブサイトにPC SP画面切り替えスイッチは必要か?ですが 今時代のスマートフォンではフィンガータッチで適正サイズに調整できるため不要と思われます
レスポンシブウェブサイトへアドセンスを表示する際の注意ごと
シリウスサイトをレスポンシブウェブデザインへと機能カスタマイズを追加した際 googleアドセンスをサイドのメニュー位置に置いたままではアドセンスのポリシーガイドラインに違反してしまうのです
レスポンシブ構造ではサイドバーのアドセンス配置は処理が必要
シリウスへのレスポンシブ構造追加ではサイドバーのアドセンス配置は スマホサイズでは広告が巻末に押しやられポリシー違反となります 対処法は指定処理が必要...詳細はサイトで
レスポンシブウェブデザイン構造では画像の数値指定を必ずしましょう
シリウスへレスポンシブウェブデザイン構造を設定したなら掲載する画像の事情により正常に表示されない場合があります 事情解説対処はこちらで.....
パソコン スマートフォン画面でどちらも記事列を適合表示する指定
シリウスレスポンシブ構造の記事列はパソコンと横サイズが異なるためスマートサイズだと自動で折り返されてしまいますが どちらも同様の記事列で表示することもできますが?  詳細はこちらで...
iPhone ipadでサイト背景を固定化する仕様設定
シリウスサイトの背景を固定化している場合でレスポンシブ化された際 iPhone ipadではサイト背景がスクロールしてしまう障害が発生します 対処法はサイトで......
サイドメニューを押しやらない固定するレスポンシブウェブレイアウト
シリウスへのデフォルトレスポンシブウェブレイアウトでは サイドメニューが後方へ押しやられますが 位置を動かさない または メニューのサイズを固定可変がCSS指定により可能となります
レスポンシブウェブデザイン構造でのフォントサイズ指定
シリウスレスポンシブウェブデザイン構造でのフォントサイズは シリウス機能で16pxを指定していた場合 iPhoneサイトでは自動で縮小されてしまいます 見やすくする対応は?
レスポンシブウェブデザインに適合する画像サイズ
シリウスレスポンシブウェブデザインではスマートフォン パソコンの各画面では 掲載画像がどのように変化するのか?各端末に適合するサイズは?いろんな解釈がありますね
大きな縦サイズヘッダー画像はレスポンシブサイトでは読み込みが遅い
シリウスレスポンシブサイトでは大きな縦画像サイズのヘッダー画像を設置している場合 スマートフォンでは出現スピードの読み込みが遅くなります
端末により記事コンテンツを切り替え表示する
シリウスサイトをスマートフォンサイトでは記事列を横幅内に収めて または多少のコンテンツを替えて パソコンサイトと異なるコンテンツに切り替えて表示するカスタマイズ方法の詳細
スマートフォン PCコンテンツ切り替え時のシリウス機能操作
SIRIUS シリウススマホ PCデバイスでの切り替えコンテンツについて 初期指定の反映スタイル 付け加えたカスタマイズ説明による反映確認の詳細です
スマートフォン パソコンサイトで画像を切り替え表示指定する
当サイトのシリウスレスポンシブウェブデザイン構造ではスマートフォン パソコンサイト画面で画像の表示非表示の切り替え または異なる画像を表示することが指定出来ます
スマートフォンサイトではスライダー画像は必要か?
SIRIUS シリウスパソコンサイトでは綺麗に表示されるスライダー画像ですがスマートフォン閲覧サイトでは表示が必要ののでしょうか?
トップページ全体をワイドヘッダー画像で表示したい?の勘違い
SIRIUS シリウステンプレートへトップページ全体をワイドヘッダー画像で表示したい?といわれる方がおりますが ウェブ初期時の勘違い?ではないでしょうか とりあえずの講釈はこちらで....
レスポンシブウェブ構造でのワイドPC画面対応背景画像設定方法
シリウスのレスポンシブサイトに編集された背景画像を配置する際は ワイドサイズのウルトラPC画面でも 自動拡張されるようclass指定で設定を追加します
スマートフォンでは、固定のグローバルは出現させない
SIRIUS シリウスサイトでグローバルナビゲーションのスクロール固定化を指定している場合、スマホ閲覧の際、邪魔になるので出現しないよう指示しましょう
iphone設定からレスポンシブデザインへ移行する際の注意事
SIRIUS シリウスのiphone設定からレスポンシブデザインへ移行する際は、指定の解除およびサーバーファイルのiphone削除が必要です
ヘッダー画像のレスポンシブウェブデザイン構造、追加記載方法
SIRIUS シリウスレスポンシブ導入テンプレートでは、ヘッダー画像を縮小させる、またはスマートフォンサイトでは小さな画像に切り替えるとかの考え方も合わせ含めた対処方法