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

2020/09/20

ジンドゥー ホームページ作成

t f B! P L

 〜ジンドゥーの独自レイアウト第二弾〜

この記事は前回の独自レイアウトに挑戦する【超初級】の続きとなります。

ヘッダー部分をいじる

ジンドゥーの独自レイアウトに挑戦しておりますが、特に目につくPC版のヘッダー部分をうまいこと調整してよくありそうなデザインに変更してゆきたいなと思います。

初期状態の確認

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>

初期値はこんな具合ですよね。とてもシンプルに纏まっています。CSSも完全初期状態そして、もとから入っているファイルが3つあります。画像ファイルですね。この状態で何もいじらずにそのまま作成するとおそらく次のような具合になるはずです。

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

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

CSSの初期値

最初にジンドゥーの独自レイアウトのCSS初期値のヘッダー部分のみを見てみます。

#header
{
    padding:17px;
}
#header h1,
#header a
{
    padding:0;
    font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size:30px;
    font-weight:normal;
    text-decoration:none;
    line-height:1.3em;
    color:#666666;
    text-align:right;
}
#header a:hover { text-decoration:none;  }

CSSを読んでなるほど 。と感じられる人はもうプロですね。この記事を読まれる必要はもはや無いでしょう。初期値ではh1(タイトルの文字)の設定がなされているのみです。

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

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

⬇⬇⬇

           

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

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

⬇⬇⬇

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

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

大まかな手順

  • ヘッダーのh1部分を画像に置き換えて左寄せする
  • ヘッダー部分右側にナビゲーションバーを持ってきて横表示にしてついでにドロップダウン式のメニューに作り変える。
  • トップの古めかしい写真を削除する。
  • 背景とコンテンツ部分を微調整する。

というような感じです。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で行えます。

top.pngのファイル

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

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

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

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

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

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

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

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

body {
      background:#fff;
      font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#container
{
     margin:0 auto;
     max-width:980px;
     background:#fff;
}

「body」部分で背景や全体のフォントを指定します。「#container」がコンテンツの全体幅を決めています。そしてサイドバーとメインのコンテントも変更しました。

#sidebar
{
    float:right;
    width:300px;
    padding:20px;
    padding-top:10px;
}
#content
{
    float:left;
    width:600px;
    padding:20px;
}

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

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

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

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

QooQ