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

テンプレートパーティー

「3カラムレイアウト」を「2カラムレイアウト」に変更しよう


3カラムのデザインがいいんだけど、コンテンツ数があんまりない…という場合の為に、3カラムを2カラムに変更する方法をご紹介します。尚、3カラムテンプレートのコーディング内容により、以下の手順だけではうまくいかない場合もありますのでご了承ください。

使用テンプレートは

tp_simple4_greenを使います。
ビジネスカテゴリーにある不動産向けのsimple4も同じレイアウトなのでそちらを利用されても問題ありません。

テンプレートのhtml側を開き、使わないブロックを削除します

tp_simple4テンプレートは一番左(sub)と中央(main)を1つのブロック(contents-in)に囲っているので、そこから外れているsideブロックを使わない事にします。subと間違わないように注意して下さい。

html側でよく見かける<!--/side-->などは、htmlファイル専用のコメントタグです。</div>だけでは、どのブロックの終了タグなのかわかりにくいので、コメントで「XXブロックの終了です」という説明を入れている形になります。当サイトでは、「タグの終了」という意味で「/」と冒頭にスラッシュが入っていますが、この辺は自分のわかりやすいように変更してもらって構いません。コメントタグ本体は<!--ここにコメント-->です。

htmlファイル全部からsideブロックを削除したら、index.htmlをプレビューで見てみましょう

一番右側のsideコンテンツが消えて空白になっていますね。

スタイルを調整していきます

上で書いたように、contents-inにmainとsubが入っているので、このcontents-inのスタイルを変更します。contents-inを左にフロートさせ、削除したsideを右にフロートさせていましたがこの必要がなくなったのでcontents-inのfloat設定を削除します。次に、sideがなくなったので、contents-inのブロック幅を100%に設定しなおします。

プレビューで見ましょう

contents-inの幅を100%にしたので、mainとsubの間が開いてしまいました。

補足ですが、contents-inブロックの中でさらにsubは左よせ、mainは右よせに設定されている為、contents-inの幅が広くなった分、mainが右側に移動してしまったという事になります。テンプレートのコーディングによっては、subもmainも左よせという設定もあるので、そういった場合は、subのすぐ横にmainがあり、一番右側に余白ができている形となります。これは1つ上のsideコンテンツが消えて空白になった見た目とは同じですが、中身は異なります。

mainブロックの幅を広げてバランスをとりましょう

sideブロックの幅とmainとsideの間の余白分を合わせた数字(210px)をmainブロックに追加してみました。この数字は多少変わっていても大丈夫です。

改めてプレビューで見ましょう

少しわかりづらいかもしれませんが、mainブロックが広くなり、テキストは右側まで幅一杯に広がっていますね。

メイン画像を上で設定した幅750px(↓)にすればよりイメージしやすいかと思います。

細かい調整をします

まず、h2タグの幅が狭いままなので、上のmainブロックを増やした数値(210px)だけ、h2タグの幅も増やします。

同じ内容で、「更新情報・お知らせ」の設定内にある、dt以外の数字を全てプラス210px増やします。dtタグには日付しか入れないので、ここの数字は同じままでいいという判断です。
変更箇所は全部で3か所ありますので抜けのないように。

プレビューで確認しましょう

h2タグ、更新欄ボックスともに、main幅一杯に広がりましたよね。
トップページはこれで完成です。

about.htmlページを見てみましょう

飾り用のh2見出しの幅も狭いままになっていますので、上と同じ手順で数字を210px大きくします。

この見出しのhtml側を見ると、<h2 class="midashi">当店について</h2>となっています。
これは、h2.midshiの事なのでstyle.cssから同じ設定箇所を見つけます。

id(#)とclass(.)について
htmlファイルを見ていると、<~~ id="●●">や<~~class="●●">をよく見かけます。cssファイルもよく「.●●」や「#●●」といったものを見ます。html内の「id」とcss内の「#」は同じものをさし、同じくhtml内の「class」とcss内の「.」も同じものをさします。
具体的に書くと、htmlの<div id="container">と、cssの「#container」が同じもの。htmlの<p class="clear">とcssの「.clear」が同じもの、といった感じ。idは1枚のhtml内に1度しか使えませんがclassはいくつでも使えます。

h2.midshiが見つかったら、幅を変更しましょう。

guide.htmlページを見てみましょう

ステップガイド用の各ボックスも幅が狭いままです。

こちらもhtml側を見ると<div class="box1">といったタグで各ボックスが開始しているのがわかります。
上の解説にあるように、classはcssファイルだと「.」と書くので「.box」を探してみましょう。
見つかったらここのボックス幅も210px追加します。

.boxなどの同じ名前のclass指定が2つ以上存在する場合もあります
class指定は複数使えるので、例えばmainブロックにあるbox(#main .box)、subブロックにあるbox(#sub .box)といった感じで「別物」として指定する場合もあります。同じclass名がいくつも見つかった場合、編集しようとするボックスがどこに存在しているか確認すると間違えなくてすみます。

item.htmlを開いてみましょう

商品画像と下のテーブル幅が狭いままなので調整します。商品画像については、トップページのメイン画像と同じように、幅を750pxにして作り変えればOKです。テーブルについては、html側に「.ta1」とついているのでこれをstyle.cssから探し出します。当テンプレートのテーブルはほとんどが.ta1か.ta2としかついていませんので慣れた方はすぐ見つけられるでしょう。

テーブル内の薄いグレー色(左側)の幅はそのままにしようと思うので、テーブル全体幅と右側部分の幅を210pxプラスします。

以上で完成です

以下画像をクリックすると完成したテンプレートを見る事ができます。

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

↑ PAGE TOP