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

2カラムのデザインをワンカラムに変更する方法|QHMユーザーの為のカスタマイズ

2カラムのデザインをワンカラムに変更する方法




QHMで用意してる、デザインテンプレートを簡単に
「メニュー部分を省いて」ワンカラムに変更することが可能です。




「メニュー部分を省いて」ワンカラムに変更

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

「width:」は、横幅の比率です。

「#wrap_content」の「width:」を「100%」
※コンテンツの部分を定義

「#wrap_sidebar」の「width:」を「 0%」
※サイドバーの部分を定義

に設定して、ワンカラムにしたい「ページ編集」に記述します。

全ページをワンカラムにしたい場合は、
「ナビ2編集」若しくは「その他のタグ」に記述することで、
全ページ反映します。

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



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

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


「css」を修正して、ワンカラムに変更する場合

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

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

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

「main.css」の中から、
「#wrap_content」と「#wrap_sidebar」を
修正します。

ただし、その場合は全てのページがワンカラムの設定になります。

※デザインによっては、「#wrap_content」「#wrap_sidebar」の位置が異なります。


複数のページを、ワンカラムのデザインにする場合

新規ページを作成して、そこに「CSS」の定義を記述する方法です。
「おまじない」を書いて「CSS」の定義を呼び込むポイント

新規ページを作成して、以下のコードを新規ページに記述しておきます。
例えば、ページ名を「メニューなし」にします。

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

後は、反映したいページに以下の「おまじない」を書くだけで
ワンカラムに設定した「CSS」を呼び込む形になります。

#include(ページ名,notitle)

コードを記述したページ名が「メニューなし」の場合は、以下の「おまじない」になります。

#include(メニューなし,notitle)





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

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




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




a:2223 t:1 y:1

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

最新の更新 RSS  Valid XHTML 1.0 Transitional