作成したレスポンシブテンプレートは保存して再利用もできます。

シリウスでレスポンシブデザインのサイトを作る方法紹介します。
HTMLとCSSをカスタマイズすることで無料のレンタルサーバーでも使えます。
シリウスでレスポンシブデザインのサイトを作る方法

 

シリウスでレスポンシブデザインのサイトを作る方法

 

川上です。

 

シリウスのレスポンシブデザインのテンプレートは
サポートフォーラムで2カラムまでですが公開されています。

 

キホン的にはスマホ表示の時ACES社が作ったテンプレートのほうがきれいです。
通常はこちらをお勧めします。

 

この記事は自作で3カラムのテンプレートを作りたい方や
CSSを学びたい方向けのヒントとなる記事です。

 

ふつうにサイト制作の時間がほしい方は下記の3ページがおすすめです。
ノウハウコレクターからの脱出

 

アフィリエイトで必要なSEO

 

Siriusシリウスで設定するこれだけはやりたいSEO設定

 

ちょっと横道それました。本題に入ります。

 

レスポンシブデザインの方法は大きく分けると
JAVAを使った方法とHTML,CSSの編集の2つがあります。

 

シリウスでは両方の方法でカスタマイズ可能ですが
後者のHTMLとCSSのみの方法が簡単だと思います。

 

またFC2や無料のレンタルホームページでの表示もスムーズで
環境を選びません。

 

ちょっと長くなりますが写真入りで
HTMLとCSSの編集の開設とHTMLとCSSのコードをまとめました。

 

ガラケーや古いIEは対応してません。

シリウスでレスポンシブデザインのサイトを作る方法
シリウスでレスポンシブデザインのサイトを作る方法
今回作ったSIRIUSのテンプレートですが
WindowsXPに対応しているIEの旧バージョンとガラケーは非対応です。

 

ホームページを表示するデバイスについてですが
プロの制作会社じゃないので全て対応を目指す必要はないと思います。

 

旧バージョンのIEがタブレットに入っていないのが理由です。

 

またフィーチャーフォンいわゆるガラケーですが
サイトのつくりがパソコン用のHTMLとかなり違います。

 

パソコンのサイトはサイトの装飾部分をCSSに記載しますが
ガラケーはHTMLに直接装飾情報を記載します。

 

なのでサイト訪問者の属性に応じてガラケーの表示もさせたいときは
シリウスのガラケーサイト作成機能を使ったほうが見栄えよくできます。

 

シリウスのレスポンシブデザインでサイト作成する方法は
HTMLとスタイルシート編集のみで対応しています。

 

当然
作ったテンプレートはシリウス上でエクスポートしてご自身で再利用ができます。
シリウスでレスポンシブデザインのサイトを作る方法

 

手順は2つのステップになります。

  • シリウスのHTML編集
  • ヘッドの部分にviewportビューポートを設定します。

  • シリウスのスタイルシート編集
  •  

    今回レスポンシブデザインの概略の流れを記載します。
    どのように編集したか詳細を記した文書の入手方法は
    下記に記載しました。

 

今回の方法は2カラムです。

 

同じような要領で1カラムや3カラムも可能です。
HTML当の操作をする前にバックアップを撮りましょう。

 

また最初のうちは分からないことが多いかもしれません。

 

イキナリメインのサイトで実施するのではなく
造りかけのサイトで練習してから本番を実施しましょう。

 

 

レスポンシブのメリットについてはレスポンシブに対応する。をご覧ください。


これは大事ですSIRIUSのデータをバックアップ 

シリウスでレスポンシブデザインのサイトを作る方法
シリウスでレスポンシブデザインのサイトを作る方法
初めてレスポンシブのサイトを作るときは
報酬が発生している大事なサイトではなく
FC2など作りたてのサイトでテストすることを強く勧めます。

 

また編集は自己責任になります。
編集する前に必ずバックアップをUSBメモリーに取りましょう。

 

バックアップをデスクトップやマイドキュメント以外の
場所に保存するのはもしものときにデータを救出するのが容易だからです。

 

<もしもの時、バックアップがあると復元が容易です。>

 

カスタマイズするサイトは2カラムでの作成を推奨します。
CSSの詳しい方は3カラムでもできると思います。

 

 

レスポンシブデザイン

 

では最初にシリウスで設定する前にバックアップをしましょう。
パソコンで何か新しいことをするときは
必ずバックアップをUSBメモリーにバックアップしましょう。

 

今回バックアップするものは

  • サイトのデータ
  • GOOGLEウェブマスターのコードなどCSSやHTMLを改変したもの

改変したコード類をメモ帳にコピーして
(*.TXT )テキストファイルにして保存しましょう。

 

サイト全体のバックアップはシリウスを立ち上げた最初の場面でできます。
シリウスでレスポンシブデザインのサイトを作る方法

 

個別サイトのバックアップは同じ画面で
下図の青い部分のバックアップをクリックします。
シリウスでレスポンシブデザインのサイトを作る方法

 

シリウスで編集しているサイト全部は
ファイルから全サイトのバックアップ/復元から保存します。

 

お好きなほうを選んでいただければと思います。

 

シリウスでカスタマイズするときは必ずバックアップをとりましょう

 

レイアウトがだんだんおかしくなって修復できなくなった

 

本編集は基本的に、
レイアウトがおかしくなったらテンプレートをかえる事によって
HTMLのデータをリセットができます。

 

基本今回のHTMLとCSSのカスタマイズで

 

レイアウトがおかしくなってうまく元に戻せないときや
テンプレートの設定でうまくいかないときはテンプレートをかえます。

 

今まで作った内容やFTPのパスワードは保存されたまま
改変したHTMLやCSSはリセットされます。

 

シリウスでレスポンシブデザインのサイトを作る方法
上の「サイト全体設定」クリックして

 

レスポンシブデザイン
赤丸の「参照」をクリックしてテンプレートを同じジャンルの
別の色のテンプレートを選択しなおします。

 


現在のサイトのテンプレート>>デフォルト¥2カラム¥シアン
変更するのサイトのテンプレート>>デフォルト¥2カラム¥グリーン

 

このサイトは下記のテンプレートを採用しています。
C:\ACES WEB\SIRIUS\templates\デフォルトタイプ\シアン\2カラム\

 


HTML編集

シリウスでレスポンシブデザインのサイトを作る方法
シリウスでレスポンシブデザインのサイトを作る方法
最初に「メモ帳」などテキストエディターを立ち上げます。
WEBからコピーしたコードは念のため一回メモ帳に貼り付けてから
メモ帳のコードを再度コピーしてシリウスに貼り付けるのがオススメです。

 

viewport ビューポートはHTMLのヘッドに設定します。

 

HTML編集

次にシリウスのHTMLの編集画面を出します。

 

シリウスでレスポンシブデザインのサイトを作る方法

 

編集

 

では最初に下記のコードをコピーしメモ帳に貼り付けしましょう。
メモ帳に貼り付けた部分を再度選択してコピーします。

 

それからシリウスの編集ページに貼り付けます。

 

<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コードを変えます。
シリウスでレスポンシブデザインのサイトを作る方法

 

作業が終了したら保存します。
シリウスでレスポンシブデザインのサイトを作る方法

 


シリウスのCSSを書き換えます。

シリウスでレスポンシブデザインのサイトを作る方法
シリウスでレスポンシブデザインのサイトを作る方法
最初にシリウスのスタイルシート編集を選択します。
シリウスでレスポンシブデザインのサイトを作る方法

 

コレが編集画面です。CSSのIDごとに
レスポンシブの変更した点を追加して最後に赤丸の保存を押します。
シリウスでレスポンシブデザインのサイトを作る方法

 

 

変更するCSSのIDごとに
デバイスの幅に対しての変更するCSSのIDを追加で記載します。

 

スタイルシート編集の下にある「テンプレートのエクスポート」を使うと
編集したレスポンシブの設定をオリジナルのテンプレートとして
保存が可能です。

 

サファリの仕様で私は800ピクセルまでのデバイスは1カラム
それ以上の幅の大きさは2カラムに設定しました。

 

設定しだいではタブレットも2から表示したりすることもできます。

 

320ピクセルまで
320ピクセルから800ピクセルまで
800ピクセル以上

 

見たいな幅の設定もありです。

 

幅の設定はいろいろあります。ご自身で最適な幅を見つけてください。
実際の記入例は下記になります。

 

@media(max-width:800px){
で設定する内容を追加します。

 

#container {
width: 900px;
_width: 910px;
padding-top: 0px;
padding-right: 5px;     ←もともと記載してあったID
padding-bottom: 0px;
padding-left: 5px;
margin-right: auto;
margin-left: auto;
background-image: url(./img/cnt_bg.png);
background-repeat: repeat-y;
}

 

上のIDの下に追加します。

 

@media(max-width:800px){
#container {
width: 88.75%; ←900÷1024=88.75%
_width: 89.74%;  ←910÷1024=88.74%
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;    ←レスポンシブ用の追加ID
padding-left: 5px;
margin-right: auto;
margin-left: auto;
background-image: url(./img/cnt_bg.png);
background-repeat: repeat-y;
}
}

 

これが追加した後のコードです。
#container {
width: 900px;
_width: 910px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
margin-right: auto;
margin-left: auto;
background-image: url(./img/cnt_bg.png);
background-repeat: repeat-y;
}

 

@media(max-width:800px){
#container {
width: 88.75%;
_width: 89.74%;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
margin-right: auto;
margin-left: auto;
background-image: url(./img/cnt_bg.png);
background-repeat: repeat-y;
}
}

 

変更のポイントはレイアウトの幅がシリウスのテンプレートだと
ピクセル表示されているのですがそれを%に直します。

 

このページではシリウスのデフォルト2カラムを
レスポンシブにしました。

 

シリウスにはビジネスと角丸のテンプレートがありますが
それぞれ同じような要領で変更するとレスポンシブデザインになります。

 

CSSを変更するとき、レイアウト調整した後
見栄えを確認する必要があります。

 

ツールには有料と無料があります。

 

CSSの編集は編集結果を見ながらがオススメです。
http://sn.lowedge.com/dl/からSN501を無料で取得して利用されるのもいいですし

 

有料ソフトだとホームページ・ビルダーがオススメです。
シリウスでレスポンシブデザインのサイトを作る方法

 

有料と無料の差は反映結果がスグに見れるのは有料ソフト
保存してから確認が無料ソフトになります。

 

レイアウト方法はいろいろあります。是非チャレンジしましょう。


SIRIUSのCSS変更箇所 詳細

シリウスでレスポンシブデザインのサイトを作る方法
シリウスでレスポンシブデザインのサイトを作る方法
本サイトのテンプレートは下記のCSS idの直下にそれぞれ追加コードを加えました。
CSS編集の上から順番どおりに訂正する箇所と追加するコードの順で記載しました。

 

 

ステップ1

 

@import url("./css/commonstyles.css");
の下追加

 

@media screen and (max-width:800px){
img{
max-width: 100%;
height: auto;
width /***/:auto; 
}

 

iframe{
max-width: 100%;
height: auto;
width /***/:auto; 
}
}

 

 

ステップ2

 

/* 基本スタイル */
h1, h2, h3, h4, .title ,.menutitle{
font-family: 'HGP創英角ゴシックUB', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W6', sans-serif;
font-weight:normal;
}

フォントにメイリオ追加

 

'メイリオ',

 

 

ステップ3
h1,h2,h3,h4{
clear:both;
}の下追加

 

 

/* 一番上のH1表示設定 */
@media(max-width:800px){
h1{
   max-height: 15px;
overflow:hidden;
width: 80%;
}
}

 

ステップ4

 

p {
width: auto;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}

 

以下追加
@media(max-width:800px){
p {
width: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}
}

 

ステップ5

 

/* 基本レイアウト */
#container {
width: 900px;
_width: 910px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
margin-right: auto;
margin-left: auto;
background-image: url(./img/cnt_bg.png);
background-repeat: repeat-y;
}

 

追加

 

@media(max-width:800px){
#container {
width: 88.75%;
_width: 89.74%;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
margin-right: auto;
margin-left: auto;
background-image: url(./img/cnt_bg.png);
background-repeat: repeat-y;
}
}

 

 

ステップ6

 

#header {
height: ;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width: auto;
border-bottom:solid 1px #EBEBEB;
}

 

以下追加
@media(max-width:800px){
#header {
height: 170px;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width: 100%;
border-bottom:solid 1px #EBEBEB;
}
}

 

ステップ7

 

/* ヘッダーのタイトル文字の設定 */
#header h2 ,#header .title {
width: 550px;
font-size: 36px;
line-height: 36px;
position: relative;
left: 30px;
top: 50px;

}

 

以下追加
/* ヘッダーのタイトル文字の設定 */
@media(max-width:800px){

 

#header h2 ,#header .title {
width: 95%;
font-size: 36px;
line-height: 36px;
position: relative;
left: 2%;
top: 25px;

}
}

 

ステップ8

 

/* MetaDiscriptionを小さい文字で表示 */

 

#headertext {
text-align: left;
font-size: 11px;
line-height: 130%;
width: 550px;
position: relative;
left: 30px;
top: 60px;

}

 

以下追加

 

/* MetaDiscriptionを小さい文字で表示 */
@media(max-width:800px){
#headertext {
text-align: left;
font-size: 8px;
margin-top: 25px;
width:95%;
position: relative;
left: 2.92%;
overflow:hidden;
 max-height: 25px;
}
}

 

ステップ9

 

/* コンテンツ */

 

/*本文の文字幅 フリースペースの高さが合わないとき#space1margin-topの高さを調節してください*/
#text1, #text2, #text3, #text4, #text5, #text6, #text7, #text8, #text9, #text10, #space1 ,#space2 {
margin-bottom: 25px;
padding: 10px 14px;

 

}

 

以下追加

 

/*本文の文字幅 フリースペースの高さが合わないとき#space1margin-topの高さを調節してください*/
@media(max-width:800px){
#text1, #text2, #text3, #text4, #text5, #text6, #text7, #text8, #text9, #text10,#space2 {
margin-bottom: 25px;
padding:1%;
}

 

 

#space1 {
margin-bottom: 0px;
margin-top: 35px;
padding:1%;
}
}

 

ステップ10

 

/* グローバルメニュー */
#topmenu {
background-repeat: repeat-x;
height: 48px;
line-height: 42px;
width: 900px;
position: absolute;

margin: 0px;
padding: 0px;
background-image: url(img/topmenu.jpg);
background-position: left top;
font-size: 13px;
}

 

以下追加

 

@media(max-width:800px){
#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;
}
}

 

 

 

ステップ11

 

#siteNavi {
font-size: 0.775em;
line-height: 1.5em;
margin-bottom:15px;
}

 

追加
@media(max-width:800px){
#siteNavi {
font-size: 0.775em;
line-height: 1.5em;
margin-bottom:15px;
margin-top:70px;
}
}

 

ステップ12

 

/* レイアウト差分 */
#contents {
padding-right: 10px;
padding-left: 15px;
}
以下追加
@media(max-width:800px){
#contents {
padding-right: 2%;
padding-left: 1%;
}
}

 

ステップ13
#main {
float: right;
width: 650px;
}

 

以下追加

 

@media(max-width:800px){
#main {
width: 100%;
}
}

 

ステップ14
#menu {
float: right;
width: 200px;
padding-top: 10px;
padding-bottom: 10px;
}

 

以下追加
@media(max-width:800px){
#menu {
float: right;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
}

 

ステップ15

 

#text1 h3,#text2 h3,#text3 h3,#text4 h3,#text5 h3,#text6 h3,#text6 h3,#text7 h3,#text8 h3,#text9 h3,#text10 h3{
position: relative;
left: -12px;
width: 610px;
margin-top: 15px;
margin-bottom: 15px;
}

 

 

以下追加
@media(max-width:800px){
#text1 h3,#text2 h3,#text3 h3,#text4 h3,#text5 h3,#text6 h3,#text6 h3,#text7 h3,#text8 h3,#text9 h3,#text10 h3{
position: relative;
left: -12px;
width: 100%;

margin-top: 15px;
margin-bottom: 15px;
}
}

 

ステップ16

 

#searchbox {
position: absolute;
top: 0px;
width: 880px;
padding-right: 10px;
padding-left: 10px;
text-align: right;
line-height: 30px;
height: 30px;
font-size:12px;
padding-top: 6px;
}

 

以下追加
@media(max-width:800px){
#searchbox {
position: absolute;
top: 0px;
width: 100%;
padding-right: 10px;
padding-left: 10px;
text-align: right;
line-height: 30px;
height: 30px;
font-size:12px;
padding-top: 6px;
}
}

 

 

 

 

ステップ17
/* サイトマップ */
#sitemaps{
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}

 

 

以下追加

 

@media(max-width:800px){
#sitemaps{
padding-top: 80px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
}

 

 

ステップ18
#sitemaps .sbox1, #sitemaps .sbox2 {
width: 47%;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
}

 

以下の箇所を訂正します。
width: 47%;
       訂正
width: 90%;

 

 

 

ステップ19

 

 

#sitemaps .sbox2 {
float: right;
clear: right;
}
以下の箇所をを訂正します。

 

#sitemaps .sbox2 {
float: left;
clear: left;
}

 

ステップ20
#sitemaps .l1 {
background-image: url(./img/sitemap_l1.jpg);
line-height: 26px;
height: 26px;
font-weight: bold;
margin-bottom: 5px;
margin-top:0px;
background-repeat: no-repeat;
background-position: 5px center;
padding-left: 35px;
overflow: hidden;

 

}

 

 

以下追加します。
@media(max-width:800px){
#sitemaps .l1 {
background-image: url(./img/sitemap_l1.jpg);
line-height: 26px;
height: 26px;
font-weight: bold;
margin-bottom: 5px;
margin-top:0px;
background-repeat: no-repeat;
background-position: left -24px;
padding-left: 1%;
overflow: hidden;
}
}

 

お疲れ様でした。
合計で20箇所訂正しました。これでシリウスのレスポンシブデザインは完了です。

 

もしわからないことがありましたら
管理人にメールしてください。

 

以上、川上でした^^

 

シリウスでレスポンシブデザインのサイトを作る方法 シリウスでレスポンシブデザインのサイトを作る方法

 


ページの先頭へ