JIMDO EXPERT
メニューの表示切り替え

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

独自レイアウト

ナビゲーションを横並びにする

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

レイアウトを独自レイアウトに変更

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

独自レイアウト

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

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

 

HTMLを書き換える

独自レイアウトの「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を書き換える

独自レイアウトの「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;
}

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

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

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

独自レイアウト