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

メニュー部分を右から左に変更及びメニュー横幅の設定|QHMユーザーの為のカスタマイズ

メニュー部分を右から左に変更及びメニュー横幅の設定




QHMで用意してる、デザインテンプレートを簡単に
メニュー部分を右から左に変更及びメニュー横幅の設定」することが可能です。




「css」を修正して、メニュー部分の修正

変更する箇所

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

「#wrap_content」は、コンテンツの部分に当たります。 
「#wrap_sidebar」は、サイドバーの部分に当たります。

#wrap_content {
width:80%;
float:right;
overflow:hidden;
border:none;
}

#wrap_sidebar {
width:20%;
float:left;
overflow:hidden;
border:none;
}

「width:」は、横幅の比率です。
全体の幅に対して「xx%」で設定します。

「#wrap_content」「#wrap_sidebar」で
100%になる様に設定します。

「float:」は、右or左を設定します。
「right;右」「left;左」となります。

必ず左右対称にして下さい。

※デザインによっては、「#wrap_content」「#wrap_sidebar」の位置が異なります。
※デザインが崩れる場合もあります。その場合は比率を99%に設定して下さい。


「css」を修正しないで、メニュー部分の変更

「QHM」では、編集画面でも「CSS」を定義することができます。

「CSSファイル」を、いじらないでスタイルシートを変更する場合のポイント

右に書かれてる「width:」「float:」を設定をして
ナビ2編集に記載することで、設定通り反映します。

各ページのみ、反映させたい場合は、ページの編集に記載します。


記載位置は、どこでも問題ありませんが、分かりやすいよう
最後に記載するといいでしょう。

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

#beforescript{{
<style type="text/css">
<!--
#wrap_content {
width:80%;
float:left;
}
#wrap_sidebar {
width:20%;
float:right;
}
-->
</style>
}}


注意事項

現在のデザインは129種類あり、この方法で設定することが可能です。

ただし、メニューの比率を変えて、幅を広げる場合
デザインによっては、メニューの見出しの部分を、画像を使用してるものが多数あります。

その場合、画像が切れて反映されてしまいますので
見た目が悪くなってしまいます。

そういった場合は、
メニューの見出しの部分の画像を、幅に合わせて修正することが望ましいです。

「public_html」~「skin」~「hokukenstyle」~「デザイン」
の中にある見出しに使われてる画像を、修正して下さい。




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

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




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


  • 今まで、main.cssを変更していたので、本当にとても面倒でしたが、貴サイトのページを参考にやってみたところ、ナビ2編集でメニューバーの移動ができました。これからも貴サイトを参考にさせて戴きます。ありがとうございました。 -- エムと申します。 2013-07-07 (日) 06:27:44



a:2641 t:1 y:4

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

最新の更新 RSS  Valid XHTML 1.0 Transitional