HOME　＞　独自レイアウト　＞　ナビゲーションを横並びにする

このページでは「独自レイアウト」でナビゲーションを横並びにする方法を解説します。

まずは画面の右側に表示されている管理のメニュー「レイアウト」から「独自レイアウト」を選んで保存してください。

これが独自レイアウトに変更したときの最初の状態です。

ナビゲーションは画面左側に縦に並んでいます。

独自レイアウトの「HTML」を選び、以下のように書き換えます。

書き換え前　（9行目～）

<div id="navigation">
    <var>navigation[1|2|3]</var>
    <div id="sidebar">
        <var>sidebar</var>
    </div>
</div>
<div id="content">
    <var>content</var>
</div>

書き換え後

<div id="navigation">
    <var>navigation[1|2|3]</var>
</div>
<div id="wrap">
    <div id="sidebar">
        <var>sidebar</var>
    </div>
    <div id="content">
        <var>content</var>
    </div>
</div>

独自レイアウトの「CSS」を選び、以下の部分を書き換えます。

書き換え前　（56行目～）

#navigation {
        float: left;
        width: 220px;
        padding: 17px;
}
#sidebar {
        padding-top: 10px;
}

書き換え後

#navigation {
        display: inline;
        float: left;
        width: 800px;
        margin-left: 17px;
}
#wrap {
        clear: both;
        width: 800px;
        margin-left: 17px;
}
#sidebar {
        float: left;
        width: 182px;
        padding-top: 10px;
}

さらに、以下のように書き換えます。

書き換え前　（99行目～）

ul.mainNav1 li,
ul.mainNav2 li {
        display: inline;
        margin: 0;      
        padding: 0;
}

書き換え後

ul.mainNav1 li,
ul.mainNav2 li {
        display: inline;
        float: left;
        margin: 0;      
        padding: 0;
}

これでナビゲーションを横に並べることができました。

今回はメニューを横に並べるために必要なコードのみを書き換えました。

ここから様々なカスタマイズを加えて横並びのナビゲーションを作っていくことができます。

Page Top