ジンドゥー（jimdo）の独自レイアウト【ヘッダー部分の作成】

背景の2本線とトップの画像がなんとも言えないレトロ感を出してくれていますね。

とりあえず今回は、ヘッダー部分つまりページの一番上部をいじって行きたいと思います。

CSSの初期値

ヘッダー部分左に画像・右側にナビゲーション

今回は「よくあるホームページ」という形で、ヘッダー部分左に画像、そして右側にナビゲーションメニューが並ぶというふうに作成してゆきます。ついでにトップのレトロ画像を消去します。

⬇⬇⬇

結果的にこんなような具合でなんとなく「良くありそうなホームページ」のヘッダーに近づいた気がしますよね。最初のから比べるとめちゃくちゃ地味になりましたが…皆さんは画像や背景の調整などでもっといい感じにできると思います。

ドロップダウンメニューはこのような具合になります。

⬇⬇⬇

ドロップダウンメニューは下に並ぶような具合で出てきます。

ヘッダー部分から下はいじっていないので、ジンドゥーのいつも通りのコンテンツを並べていくことができます。

大まかな手順

というような感じです。HTMLは次のように変更してあります。

<div id="container">
    <div id="header">
        <div class="top-image">
            <img src="top.png" alt="" />
        </div>
        <div class="nav">
            <var levels="1,2,3" expand="true" variant="nested" edit="1">navigation</var>
        </div>
    </div>
    <div id="content">
        <var>content</var>
    </div>
    <div id="sidebar">
        <var>sidebar</var>
    </div>
    <div id="footer">
        <div class="gutter">
            <var>footer</var>
        </div>
    </div>

変更点は<div id="header">の下部分ですね。”top-image"そしてnavigationをこのヘッダー部分に入れ込んでいます。navigationは通常<var>navigation[1|2|3]</var>ではなく、「navi(nested)」を追加しています。

CSSもヘッダー部分のみ見ていただくとこんな具合です。

#header
{
    margin:0 auto;
    width:100%;
    background:#fff;
    clear: both;
    display:block;
    padding: 0;
    verflow: hidden;
}
#header .top-image
{  
    float: left;
    padding:15px;
}
#header .nav
{
    float: right;
    padding:30px;
}
#header .nav ul
{
   margin: 0;
   padding: 0;
   display: flex;
   list-style: none;
}
#header .nav li
{
   flex: 1 0 auto;
}
#header .nav li a
{
   display: block; 
   font-size:16px;
   padding: 10px 20px;
   text-align:center;
}
#header .nav li a:hover
{
   border-bottom: 1px solid #999999;
}
#header .nav li ul 
{
    visibility: hidden;
    position: absolute;
    z-index: 10;
}
#header .nav li:hover > ul 
{
 visibility: visible;
}
#header .nav li ul li 
{
 position: relative;
 top: 10px;
 float: none;
 border: none;
 margin: 0;
}
#header .nav li ul li a 
{
 padding: 10px;
}
#header .nav li ul li ul 
{
 top: 0;
 left: 100%;
}
#header .nav li ul li ul li 
{
 top: 0;
}
#navigation li .current
{
 display: block;
 border-bottom: 1px solid #333333;
}
#header h1,#header a
{
    padding:0;
    font-family:"Helvetica","Lucida Sans         Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size:40px;
    font-weight:normal;
    text-decoration:none;
    color:#666666;
}
#header a:hover { text-decoration:none;  }
#header:after
{
    content:".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}

結局だいぶ長いですね。大雑把な説明をしますと、"top-image"をfloat: leftで左寄せします。top-image用のファイルは大体80px×300pxくらいで作成しています。この大きさやデザインでかなり印象が決まってくると思います。

今回は私のブログでも使っている画像を修正して使いました。画像編集は有料のものがもちろんいいのですが、個人的には無料の「PIXLER」を気に入って使っています。画像サイズ変更などは中級以上と書いてあるPIXLER Eで行えます。

ここで用いるために作成した画像を「ファイル」にアップロードしてHTML編集で用いるファイル名に変えておきます。この例では<img src="top.png" alt="" />の「top.png」がファイル名になります。

#header .nav以下がナビゲーションの部分をいじるコードになるので、float: rightで右に寄せています。そのあ.nav ulとかliとかなってくるんですが、このあたりは通常のリスト表示と多少異なり、ジンドゥー独自のナビゲーションバーを編集するためのコードになっています。

さらに、ドロップダウンの方式を取るために#header .nav li ulあたりでまたいろいろコードが並んでいます。そのあともメニューの2、3階層目の指示を付け足しています。

このあたり詳しくはコードの意味を検索していただくか「progate」などでちょいと勉強していただけるとなんとなくわかってくると思います。

とりあえずコピペしてみて、どこを変えるとどう変化するのかがつかめてくると大体のことがわかってきたりします。⬅（私がこのパターンで勉強していたりします）

背景とコンテンツ部分の微調整

もともとあるトップ画像を削除して、背景を白に変更、コンテンツの幅を少し広げました。

コンテンツの全体幅の調整はつぎのCSSですね。参考程度に見てみてください。

#sidebar

{

    float:right;

    width:300px;

    padding:20px;

    padding-top:10px;

}

#content

{

    float:left;

    width:600px;

    padding:20px;

}

このような具合ですね。サイドバーを右に、コンテントを左に配置して幅も調整しています。

ヘッダー部分の作成まとめ

とりあえず今回はヘッダー部分をよくあるホームページ風に調整してみました。参考になる部分がありましたらぜひコピペでもなんでもして使ってみてくださいね。

次回はこの状態からのレスポンシブデザインに挑戦して行きたいなと思っております。