アクセス解析を外部JAVAファイルにしよう。SEO的にもいいのでアクセス解析に限らず有効な手法です。ここではシリウスとワードプレスに設定するケースを紹介します。
シリウスでレスポンシブデザインのサイトを作る方法
シリウスでレスポンシブデザインのサイトを作る方法紹介します。HTMLとCSSをカスタマイズすることで無料のレンタルサーバーでも使えます。
アフィリエイトで副収入 副業で生活安定させる
作成したレスポンシブテンプレートは保存して再利用もできます。
シリウスでレスポンシブデザインのサイトを作る方法紹介します。
HTMLとCSSをカスタマイズすることで無料のレンタルサーバーでも使えます。
川上です。
シリウスのレスポンシブデザインのテンプレートは
サポートフォーラムで２カラムまでですが公開されています。
キホン的にはスマホ表示の時ACES社が作ったテンプレートのほうがきれいです。
通常はこちらをお勧めします。
この記事は自作で３カラムのテンプレートを作りたい方や
CSSを学びたい方向けのヒントとなる記事です。
ちょっと横道それました。本題に入ります。
レスポンシブデザインの方法は大きく分けると
ＪＡＶＡを使った方法とＨＴＭＬ，ＣＳＳの編集の２つがあります。
シリウスでは両方の方法でカスタマイズ可能ですが
後者のＨＴＭＬとＣＳＳのみの方法が簡単だと思います。
またFC２や無料のレンタルホームページでの表示もスムーズで
環境を選びません。
ちょっと長くなりますが写真入りで
ＨＴＭＬとＣＳＳの編集の開設とＨＴＭＬとＣＳＳのコードをまとめました。
ガラケーや古いIEは対応してません。
シリウスでレスポンシブデザインのサイトを作る方法
今回作ったＳＩＲＩＵＳのテンプレートですが
WindowsＸＰに対応しているＩＥの旧バージョンとガラケーは非対応です。
ホームページを表示するデバイスについてですが
プロの制作会社じゃないので全て対応を目指す必要はないと思います。
旧バージョンのＩＥがタブレットに入っていないのが理由です。
またフィーチャーフォンいわゆるガラケーですが
サイトのつくりがパソコン用のＨＴＭＬとかなり違います。
パソコンのサイトはサイトの装飾部分をＣＳＳに記載しますが
ガラケーはＨＴＭＬに直接装飾情報を記載します。
なのでサイト訪問者の属性に応じてガラケーの表示もさせたいときは
シリウスのガラケーサイト作成機能を使ったほうが見栄えよくできます。
シリウスのレスポンシブデザインでサイト作成する方法は
ＨＴＭＬとスタイルシート編集のみで対応しています。
当然
作ったテンプレートはシリウス上でエクスポートしてご自身で再利用ができます。
手順は２つのステップになります。
- シリウスのHTML編集
- シリウスのスタイルシート編集
ヘッドの部分にviewportビューポートを設定します。
今回レスポンシブデザインの概略の流れを記載します。
どのように編集したか詳細を記した文書の入手方法は
下記に記載しました。
今回の方法は２カラムです。
同じような要領で１カラムや３カラムも可能です。
ＨＴＭＬ当の操作をする前にバックアップを撮りましょう。
また最初のうちは分からないことが多いかもしれません。
イキナリメインのサイトで実施するのではなく
造りかけのサイトで練習してから本番を実施しましょう。
レスポンシブのメリットについてはレスポンシブに対応する。をご覧ください。
これは大事ですSIRIUSのデータをバックアップ
シリウスでレスポンシブデザインのサイトを作る方法
初めてレスポンシブのサイトを作るときは
報酬が発生している大事なサイトではなく
FC2など作りたてのサイトでテストすることを強く勧めます。
また編集は自己責任になります。
編集する前に必ずバックアップをUSBメモリーに取りましょう。
バックアップをデスクトップやマイドキュメント以外の
場所に保存するのはもしものときにデータを救出するのが容易だからです。
＜もしもの時、バックアップがあると復元が容易です。＞
カスタマイズするサイトは２カラムでの作成を推奨します。
CSSの詳しい方は３カラムでもできると思います。
では最初にシリウスで設定する前にバックアップをしましょう。
パソコンで何か新しいことをするときは
必ずバックアップをUSBメモリーにバックアップしましょう。
今回バックアップするものは
- サイトのデータ
- GOOGLEウェブマスターのコードなどCSSやHTMLを改変したもの
改変したコード類をメモ帳にコピーして
（＊．TXT ）テキストファイルにして保存しましょう。
サイト全体のバックアップはシリウスを立ち上げた最初の場面でできます。
個別サイトのバックアップは同じ画面で
下図の青い部分のバックアップをクリックします。
シリウスで編集しているサイト全部は
ファイルから全サイトのバックアップ／復元から保存します。
お好きなほうを選んでいただければと思います。
シリウスでカスタマイズするときは必ずバックアップをとりましょう
レイアウトがだんだんおかしくなって修復できなくなった
本編集は基本的に、
レイアウトがおかしくなったらテンプレートをかえる事によって
HTMLのデータをリセットができます。
基本今回のHTMLとCSSのカスタマイズで
レイアウトがおかしくなってうまく元に戻せないときや
テンプレートの設定でうまくいかないときはテンプレートをかえます。
今まで作った内容やFTPのパスワードは保存されたまま
改変したHTMLやCSSはリセットされます。
上の「サイト全体設定」クリックして
赤丸の「参照」をクリックしてテンプレートを同じジャンルの
別の色のテンプレートを選択しなおします。
例
現在のサイトのテンプレート＞＞デフォルト￥２カラム￥シアン
変更するのサイトのテンプレート＞＞デフォルト￥２カラム￥グリーン
このサイトは下記のテンプレートを採用しています。
C:\ACES WEB\SIRIUS\templates\デフォルトタイプ\シアン\2カラム\
ＨＴＭＬ編集
シリウスでレスポンシブデザインのサイトを作る方法
最初に「メモ帳」などテキストエディターを立ち上げます。
ＷＥＢからコピーしたコードは念のため一回メモ帳に貼り付けてから
メモ帳のコードを再度コピーしてシリウスに貼り付けるのがオススメです。
viewport ビューポートはＨＴＭＬのヘッドに設定します。
ＨＴＭＬ編集
次にシリウスの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コードを変えます。
作業が終了したら保存します。
シリウスのＣＳＳを書き換えます。
シリウスでレスポンシブデザインのサイトを作る方法
最初にシリウスのスタイルシート編集を選択します。
コレが編集画面です。ＣＳＳのＩＤごとに
レスポンシブの変更した点を追加して最後に赤丸の保存を押します。
変更するＣＳＳのＩＤごとに
デバイスの幅に対しての変更するＣＳＳのＩＤを追加で記載します。
スタイルシート編集の下にある「テンプレートのエクスポート」を使うと
編集したレスポンシブの設定をオリジナルのテンプレートとして
保存が可能です。
サファリの仕様で私は800ピクセルまでのデバイスは１カラム
それ以上の幅の大きさは２カラムに設定しました。
設定しだいではタブレットも２から表示したりすることもできます。
３２０ピクセルまで
３２０ピクセルから８００ピクセルまで
８００ピクセル以上
見たいな幅の設定もありです。
幅の設定はいろいろあります。ご自身で最適な幅を見つけてください。
実際の記入例は下記になります。
@media(max-width:800px){
で設定する内容を追加します。
#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;
}
}
これが追加した後のコードです。
#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;
}
}
変更のポイントはレイアウトの幅がシリウスのテンプレートだと
ピクセル表示されているのですがそれを％に直します。
このページではシリウスのデフォルト２カラムを
レスポンシブにしました。
シリウスにはビジネスと角丸のテンプレートがありますが
それぞれ同じような要領で変更するとレスポンシブデザインになります。
ＣＳＳを変更するとき、レイアウト調整した後
見栄えを確認する必要があります。
ツールには有料と無料があります。
ＣＳＳの編集は編集結果を見ながらがオススメです。
http://sn.lowedge.com/dl/からＳＮ５０１を無料で取得して利用されるのもいいですし
有料ソフトだとホームページ・ビルダーがオススメです。
有料と無料の差は反映結果がスグに見れるのは有料ソフト
保存してから確認が無料ソフトになります。
レイアウト方法はいろいろあります。是非チャレンジしましょう。
ＳＩＲＩＵＳのＣＳＳ変更箇所 詳細
シリウスでレスポンシブデザインのサイトを作る方法
本サイトのテンプレートは下記のＣＳＳ idの直下にそれぞれ追加コードを加えました。
ＣＳＳ編集の上から順番どおりに訂正する箇所と追加するコードの順で記載しました。
ステップ１
@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;
}
}
ステップ２
/* 基本スタイル */
h1, h2, h3, h4, .title ,.menutitle{
font-family: 'HGP創英角ｺﾞｼｯｸUB', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W6', sans-serif;
font-weight:normal;
}
↓
フォントにメイリオ追加
'メイリオ',
ステップ３
h1,h2,h3,h4{
clear:both;
}の下追加
/* 一番上のＨ１表示設定 */
@media(max-width:800px){
h1{
max-height: 15px;
overflow:hidden;
width: 80%;
}
}
ステップ４
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;
}
}
ステップ５
/* 基本レイアウト */
#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;
}
}
ステップ６
#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;
}
}
ステップ７
/* ヘッダーのタイトル文字の設定 */
#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;
}
}
ステップ８
/* ＭｅｔａＤｉｓｃｒｉｐｔｉｏｎを小さい文字で表示 */
#headertext {
text-align: left;
font-size: 11px;
line-height: 130%;
width: 550px;
position: relative;
left: 30px;
top: 60px;
}
以下追加
/* ＭｅｔａＤｉｓｃｒｉｐｔｉｏｎを小さい文字で表示 */
@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;
}
}
ステップ９
/* コンテンツ */
/*本文の文字幅 フリースペースの高さが合わないとき#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%;
}
}
ステップ１０
/* グローバルメニュー */
#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;
}
}
ステップ１１
#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;
}
}
ステップ１２
/* レイアウト差分 */
#contents {
padding-right: 10px;
padding-left: 15px;
}
以下追加
@media(max-width:800px){
#contents {
padding-right: 2%;
padding-left: 1%;
}
}
ステップ１３
#main {
float: right;
width: 650px;
}
以下追加
@media(max-width:800px){
#main {
width: 100%;
}
}
ステップ１４
#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;
}
}
ステップ１５
#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;
}
}
ステップ１６
#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;
}
}
ステップ１７
/* サイトマップ */
#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;
}
}
ステップ１８
#sitemaps .sbox1, #sitemaps .sbox2 {
width: 47%;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
}
以下の箇所を訂正します。
width: 47%;
訂正
width: 90%;
ステップ１９
#sitemaps .sbox2 {
float: right;
clear: right;
}
以下の箇所をを訂正します。
#sitemaps .sbox2 {
float: left;
clear: left;
}
ステップ２０
#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;
}
}
お疲れ様でした。
合計で２０箇所訂正しました。これでシリウスのレスポンシブデザインは完了です。
もしわからないことがありましたら
管理人にメールしてください。
以上、川上でした＾＾
- 時間と手間のかかる売れるキーワードを爆速で見つける方法とは
- シンプルなノウハウに集中して初報酬NEOノンバトル(改）
- 情報商材アフィリエイトで稼ぐ方法 月収１００万以上目指せる
- Siriusシリウスで設定するこれだけはやりたいＳＥＯ設定
- アクセス解析を外部JAVAファイルにしよう
- url正規化canonical設定で忘れがちな重複コンテンツ対策
- シリウスのindex.html表示処理 トップページurl正規化
- SEOと関係ないですが忘れがちなことです。
- ファビコンでリピータを獲得しやすくしよう。
- ソーシャルブックマークの付き合い方
- モジュールを活用しよう 重複コンテンツ回避
- シリウスで画像にリンクを貼る方法
- アフィリエイトで必要なＳＥＯ
- メインサイトのこれだけはやっておきたいＳＥＯ対策３つのポイント
- Googleのサービスをサイトに導入しましょう。
- 中古ドメインがＳＥＯで有利に働く場合
- 間違いだらけのアクセス解析
- レスポンシブデザインに対応する
- FERRETSEOスカウターでサイトの改善点を見つける