本文へスキップ

ホームページ・ビルダーCSS編集(13)

owlnet.jpアウルネット

行楽・中国語・画像編集
Windows・Linux・Virtual PC
車・SL・動物・台湾フルーツ

「手間なしクッキング」の発展形としてトップページと2ページ以降のナビゲションをひとつのページに2個入れるにはどうしたらいいか考えた。それをアウルネットのトップページに使おうと言うのである。ここで問題になったのは
ナビゲーションのIDはトップページ、2ページ以降とも同じなこと。
ナビのタグは<div id="hpb-nav">
そこで、右サイドに入れるidをhpd-nav2として、そのコードを追加した。
それと <div id="shopinfo">の部分は削除した。

<div id="hpb-nav">の終わりに<div id="hpb-nav2">を追加。
テンプレートの「concept」ページのナビゲーション部HTMLソースをそっくり、コピペした。
・CSSに追加したコード
.hpb-layoutset-01 #hpb-nav2 ul
{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
height: 480px;
overflow: hidden;
}

.hpb-layoutset-01 #hpb-nav2 li
{
display: block;
width: 215px;
}

.hpb-layoutset-01 #hpb-nav2 li a
{
display: block;
height: 80px;
color: #FFFFFF;
overflow: hidden;
}

.hpb-layoutset-01 #hpb-nav2 li span.en
{
text-transform: capitalize;
display: block;
line-height: 80px;
font-size: 14px;
font-weight: bold;
text-align: left;
padding-left: 12px;
padding-top: 20px;
display: block;
}

.hpb-layoutset-01 #hpb-nav2 li span.ja
{
display: none;
}


.hpb-layoutset-01 #hpb-nav2 a:link, #hpb-nav2 a:visited
{
text-decoration: none;
background-image : url(nav_5Ea_01_01.png);
background-position: left top;
background-repeat: no-repeat;
}
.hpb-layoutset-01 #hpb-nav2 a:hover, #hpb-nav2 a:active
{
background-image : url(nav_5Ea_01_01_on.png);
background-position: left top;
background-repeat: no-repeat;
text-decoration: none;
}

.hpb-layoutset-01 #hpb-nav2 #nav2-concept a:link, #hpb-nav2 #nav2-concept a:visited
{
background-image : url(nav_5Ea_01_02.png);
}
.hpb-layoutset-01 #hpb-nav2 #nav2-concept a:hover, #hpb-nav2 #nav2-concept a:active
{
background-image : url(nav_5Ea_01_02_on.png);
}

.hpb-layoutset-01 #hpb-nav2 #nav2-menu a:link, #hpb-nav2 .hpb-layoutset-01 #nav2-menu a:visited
{
background-image : url(nav_5Ea_01_03.png);
}
.hpb-layoutset-01 #hpb-nav2 #nav2-menu a:hover, #hpb-nav2 #nav2-menu a:active
{
background-image : url(nav_5Ea_01_03_on.png);
}

.hpb-layoutset-01 #hpb-nav2 #nav2-news a:link, #hpb-nav2 .hpb-layoutset-01 #nav2-news a:visited
{
background-image : url(nav_5Ea_01_04.png);
}
.hpb-layoutset-01 #hpb-nav2 #nav2-news a:hover, #hpb-nav2 #nav2-news a:active
{
background-image : url(nav_5Ea_01_04_on.png);
}

.hpb-layoutset-01 #hpb-nav2 #nav2-recruit a:link, #hpb-nav2 #nav2-recruit a:visited
{
background-image : url(nav_5Ea_01_05.png);
}
.hpb-layoutset-01 #hpb-nav2 #nav2-recruit a:hover, #hpb-nav2 #nav2-recruit a:active
{
background-image : url(nav_5Ea_01_05_on.png);
}

.hpb-layoutset-01 #hpb-nav2 #nav2-contact a:link, #hpb-nav2 #nav2-contact a:visited
{
background-image : url(nav_5Ea_01_06.png);
}
.hpb-layoutset-01 #hpb-nav2 #nav2-contact a:hover, #hpb-nav2 #nav2-contact a:active
{
background-image : url(nav_5Ea_01_06_on.png);
}

位置合わせのため#hpb-nav2を次のようにした。
.hpb-layoutset-01 #hpb-nav2
{
width: 215px;
position: absolute;
top: 300px;
left: 647px;
}

・また本文部のサイズ変更と位置を上に少し上げた。
#toppage p
{
line-height: 1.6;
margin-bottom: 10px;
margin-left: 5px;
width: 600px;  480pxから600pxに変更
margin-top: -20px;  追加
}

このページには反映していないが、ナビゲーションを写真をはっきり綺麗に見せるため、半透明の三角画像は削除し、マウスを当てた時だけ表示されるようにした。

猫の部分の文字は他の同じ位置に変更することによって、背景に邪魔されず見やすくなった。
.hpb-layoutset-01 #hpb-nav #nav-contact span.en
{
text-align: right;
padding-right: 12px;
line-height: 1;
padding-top: 12px;
}

を次に変更
.hpb-layoutset-01 #hpb-nav #nav-contact span.en
{
text-align: left;
line-height: 1;
padding-top: 116px;
}

サイドナビゲーションを増やすにはナビ画像を作成し、****を入力してCSSに追加。
.hpb-layoutset-01 #hpb-nav2 #nav2-****** a:link, #hpb-nav2 #nav2-****** a:visited
{
background-image : url(nav_5Ea_01_**.png);
}
.hpb-layoutset-01 #hpb-nav2 #nav2-****** a:hover, #hpb-nav2 #nav2-****** a:active
{
background-image : url(nav_5Ea_01_**_on.png);
}
HTMLソースで次のように追加する。
<li id="nav2-maruyama"><a href="http://owlnet.web.fc2.com/zoo/maruyama.htm"><span class="en">円山動物園</span><span class="ja">円山動物園</span></a>

ナビゲーションエリアの縦サイズ変更
ナビの個数を増やすと、全てが表示されなくなったので、サイズ変更が必要だ。
.hpb-layoutset-01 #hpb-nav2 ul
{
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
list-style-type: none;
height: 800px;   480pxから変更(10個位のメニュー可能)
overflow: hidden;
}

<h3>変更(アウルネットの「新着情報」「その他」main_5Ea_2c.cssで)
#hpb-wrapper h3
{
font-size:18px;   1.4emより変更
line-height: 20px; 1より変更
font-weight: bold;
letter-spacing: 2px;
text-align: left;
padding-top: 1px;
padding-left: 7px;
padding-bottom: 0px;
margin-bottom: 25px;
text-align: left;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #48BFF4;
margin-top: -10px; 10pxより変更
margin-left: 10px; 追加
}

最終的なレイアウトはアウルネットのトップページで。

本文に表を入れる時は「main_5Ea_2c.css」のtableで「margin-left: 0px;」を変更する必要あり。 またtableの各要素にスタイルシートを適用するとtable.cssが新たにできる。
table
{
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: 20px;  0より変更
border-collapse: collapse;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #666;
}


トップに戻る