ナビゲーション(navigation)を横書きに変更する

ナビゲーションを横書きにしてヘッダーの下に配置する方法を説明します。

 

おそらくJimdoの独自レイアウトを編集し始めて、一番最初に困る部分ではないでしょうか?

 

図で説明します。

 

修正前のレイアウトでは、右の図のようにnavigationの内側にsidebarが入っています。

 

まず、navigationからsidebarを分離します。

 

次にcontent-wrapを追加し、この内側にsidebarとcontentを配置します。

(content-wrapの名前はHTMLとCSSで同じであればなんでも構いません。意味の通る名前を付けてください。)

 

修正後のレイアウトは右の図のようになります。

 

以下に初期状態からのHTMLとCSSの変更点を示します。

HTML

修正前

<div id="container">
    <div id="header">
        <h1>
            Headline
        </h1>
        <img src="header.jpg" alt="" />
    </div>

    <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="footer">
        <div class="gutter">
            <var>footer</var>
        </div>
    </div>
</div>

修正後

<div id="container">
    <div id="header">
        <h1>
            Headline
        </h1>
        <img src="header.jpg" alt="" />
    </div>

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

    <div id="content-wrap">
        <div id="sidebar">
            <var>sidebar</var>
        </div>

        <div id="content">
            <var>content</var>
        </div>
    </div>

    <div id="footer">
        <div class="gutter">
            <var>footer</var>
        </div>
    </div>
</div>

CSS

#navigation のwidthを変更します。autoでも構いませんが、ここでは#containerと同じサイズを指定しています。

 

#content-wrapを追加します。

margine-leftはここで調整します。#sidebarでmargine-leftを指定しても思った通りの結果になりません。

 

#sidebarにfloat:left, width:180px, padding:0px を追加します。

これらは元々#navigationにあったものですが、分離したので#sidebarにも記述する必要があります。

 

#contentには元々float:rightがあるので、widthの調整だけを行います。

※実際はfloat:leftであっても正しく表示されますが、それはHTMLの記述の順序に依存しているだけです。

  float:rightを記述しておき、後でレイアウトを変更したくなったときにはCSSだけを編集するようにするべきです。

 

ul.mainNav1 li にfloat:leftを追加します。

この1行でナビゲーションが縦から横になります。

 

修正前

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

#content
{
    float:right;
    width:530px;
    padding:17px;
}

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

修正後

#navigation
{
    float:left;
    width:834;
    padding:17px;
}

#content-wrap{
    position:relative;
    clear:both;         // 要素の回りこみを解除
    float:left;         // 左寄せ
    width:800px;        // 左右のmargine:17pxを引いた800pxを指定
    margin-left:17px;   // #containerの内側に17pxのマージンを取る
    display:inline;     // ブロックをインラインで表示する
}

#sidebar
{
    float:left;         // 左寄せ
    width:180px;        // 狭めに調整
    padding:0px;        // #content-wrapのmargine-leftで指定済みなのでここでは0px
    padding-top:10px;
}

#content
{
    float:right;
    width:580px;
    padding:17px;
}
ul.mainNav1 li,
ul.mainNav2 li
{
    display: inline;
    margin: 0;  
    padding: 0;
    floag: left;
}

 

以上で完了です。

 

注意点ですが、例によって簡単に記述する為に、細かく調整すべきところまで手が入っていません。

 

特にナビゲーションの表示については簡易的に横書きになっているだけで、2階層目の要素を持つ項目をクリックすると、1階層目に2階層目の要素が表示されてしまいます。

(逆に言うとナビゲーションが1階層で構成されていれば、この書き方で問題ありません。)

 

ナビゲーション項目の修正については別の機会に説明します。

コメント: 1 (ディスカッションは終了しました。)
  • #1

    TOM (月曜日, 02 7月 2012 01:22)

    とても参考になりました。ありがとうございます。
    何も知識のない人間なので間違った指摘かもしれませんが、もしかしたら
    ul.mainNav2 liに貼り付けるfloag: left;は間違いでfloatなのではないかと思いました。
    これからも更新楽しみにしております。