ホームページテンプレートを無料配布中
商用利用もWEB制作業者様利用も全て無料

テンプレートパーティー

2カラムレイアウトを1カラムに変更する方法。

今回の解説はレスポンシブテンプレート専用です。XHTMLの場合はこれだけではカスタマイズできない場合があるので、うまくいかなかった場合はサポート掲示板からご質問下さい。

今回はbiz33タイプを使ってみます。

biz33タイプはサブコンテンツが左側、メインコンテンツが右側にあります。これをメインコンテンツのみの1カラムに編集してみましょう。

cssフォルダのstyle.cssを開きます。

まずはサブブロックを非表示にしてみましょう。
「#sub」という設定箇所があるので、そこに設定されているスタイルを一旦削除し、代わりに「display: none;」を追加して下さい。追加したら保存します。

テンプレートをプレビューしてみます。
以下のようにサブブロック(左側ブロック)が非表示になっていればOKです。

この状態はsubブロックを表面上見えなくしているだけです。実際にはhtml側にタグが残っているので、最終的にはhtml側からsubブロックを削除する事をお勧めします。

次はメインブロックを幅一杯に拡大してみましょう。

style.cssに戻ります。
メインブロックは「#main」の部分になるので、ここのfloat処理(左右への回り込み用のスタイル)をリセット(none)して幅(width)を100%に変更します。
(補足:floatの行を削除する方法でも可。)

完成です。

再びプレビュー確認してみます。
以下のようにmainブロックの幅が100%になっていればOKです。

※画像をクリックすると実際のサンプルを見る事ができます。

レスポンシブテンプレートの場合、最低限、これだけで1カラム化できます。
後は、html側からsubブロックのパーツを全て削除すれば完了です。subブロックは上記の設定で表面上は見えなくなりますが、html側には残っているのでその処理です。

うまくできない場合は

サポート掲示板からご質問下さい。

<< ホームページテンプレートの使い方・カスタマイズ方法メニューに戻る

↑ PAGE TOP