QHMの新世代のホームページ作成ソフト|簡単と安心で初心者に高評価、比較して見て下さい。

デザインの画面幅を変更する方法|QHMユーザーの為のカスタマイズ

デザインの画面幅を変更する方法




デザインの画面全体を、任意の幅に設定を変更する方法です。




デザインの画面全体を、任意の幅に設定

「main.css」に書かれてる定義を修正します。
直接「CSS」スタイルシートを修正するポイント

「#headcopy」「#wrapper」「#logo img」「#main」「#header」「#navigator」
この6っが、横幅に関わるところを、定義されております。

ただし、デザインによって多少異なります。
「#headcopy」「#wrapper」「#logo img」の3っで定義されてるデザインが多いようです。

例えば、「g_flower01」のデザインだと

#headcopy {
width:750px;
text-align:left;
margin-left:auto;
margin-right:auto;
padding:2px;
}

#logo img {
width:750px;
}

#wrapper {
width:750px;
text-align:left;
border:solid 1px #fbe7e3;
background-color:#fff;
margin:1px auto;
}

「width:750px」の750を、変更します。



例えば、「gra_green」のデザインだと

#wrapper {
width: 100%;
background-color: transparent;
background-image: none;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
}

#headcopy {
width: 960px;
background-color: transparent;
background-image: none;
text-align: right;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
margin-left: auto;
margin-right: auto;
}

#main {
width: 960px;
background-color: #effaca;
background-image: none;
background-repeat: repeat-y;
background-position: 0% 0%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#header {
background-color: transparent;
background-image: none;
margin-left: auto;
margin-right: auto;
width: 960px;
}

#navigator {
width: 960px;
font-size: 16px;
line-height: 50px;
padding-left: 0px;
padding-right: 0px;
background-color: transparent;
background-image: url('navi.png');
background-repeat: repeat;
background-position: 0% 0%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0;
padding-bottom: 0;
}

「width:960px」の960を、変更します。
「100%」になってる場合はそのままで問題ありません。

この様に、「main.css」の中から、プロパティ名を探して「width:」の数値を変更します。

ポイントは!
「#headcopy」「#wrapper」「#logo img」「#main」「#header」「#navigator」
を探して、あるものを修正します。

デザインによって異なりますので、注意が必要です。


編集画面で定義する場合

「QHM」では、編集画面でも「CSS」を定義することができます。
「CSSファイル」を、いじらないでスタイルシートを変更する場合のポイント

例えば、「g_flower01」のデザインだと

「width:750px」の750を変更して、
「ページ編集」「ナビ2編集」若しくは「その他のタグ」に、記述する

「その他のタグ」に記述する場合は、「#beforescript{{」と「}}」を省いて記述します。

#beforescript{{
<style type="text/css">
<!--
#headcopy {
width:750px;
}
#logo img {
width:750px;
}
#wrapper {
width:750px;
}
--> 
</style>
}}


例えば、「gra_green」のデザインだと

「width:960px」の960を、変更して、
「ページ編集」「ナビ2編集」若しくは「その他のタグ」に、記述する

「その他のタグ」に記述する場合は、「#beforescript{{」と「}}」を省いて記述します。

#beforescript{{
<style type="text/css">
<!--
#headcopy {
width: 960px;
}
#main {
width: 960px;
}
#header {
width: 960px;
}
#navigator {
width: 960px;
}
--> 
</style>
}}


「CSS」を定義して、編集画面に記述することで、定義の命令ができます。

ポイントは!
「#headcopy」「#wrapper」「#logo img」「#main」「#header」「#navigator」
を探して、あるものを定義します。

デザインによって異なりますので、注意が必要です。




このページは役に立ちましたか?

選択肢 投票
大変役に立った 5  
多少役に立った 0  
解かりづらかった 0  
まったく必要ない 0  




自動スパムコメントの回避の為、認証コードの4桁の数字を記入して下さい。




a:2073 t:1 y:0

powered by HAIK 7.1.0
based on PukiWiki 1.4.7 License is GPL. HAIK

最新の更新 RSS  Valid XHTML 1.0 Transitional