本文へスキップ

ホームページビルダー16のCSS編集(10)

ストップウォッチ、計量計必須理数系の料理

お手軽、簡単、美味しい
エコ、塩分無添加、長持ち
誰でもがキーワードの
「手間なしクッキング」

ホームページビルダー16のヘッダー部とメニュー部のスタイル

このページでは背景画の位置をいろいろ変更して、ピッタリ行くよう試行錯誤した。デザイン的にこれが一番気に入ったので、このレイアウトを採用した。


(21)ヘッダー部とメニュー部のスタイルを次のように変更した。
●ヘッダー部の背景画像変更
#hpb-header     (container_5Ea_2c_right.css)
{
height: 117px;
width: 866px;
margin-left: auto;
margin-right: auto;
background-color: #3E64B5;
background-image : url(bg_inner.png);  headerBg_5Ea_01.pngより変更
background-repeat: repeat-x;  追加
background-position: 0px 18px; 20pxより変更(これでタイトル画像の上に黒線がでるようになった)
}
・bg_inner.pngはオリジナルのbg_5Ea.pngよりサイズ変更(5×282)とファイル名変更。
これより長いと#hpb-innerに入れた時、メニュー部を通り過ぎ、本文の部分に被さってしまう。


●メニュー部の背景画像をヘッダー部と同じbg_inner.pngに変更
#hpb-inner     (container_5Ea_2c_right.css)
{
position: relative;
padding-top: 0px;
padding-bottom: 0px;
width: 866px;
background-color: #F1F4FF;
background-image : url(bg_inner.png); inner.pngよりbg_inner.pngに変更
background-repeat: repeat-x;
margin-right: auto;
margin-left: auto;
clear: both;
}

●上部をスッキリさせるため<h1>のタイトルを非表示にした。
#hpb-headerMain h1    (container_5Ea_2c_right.css)
{
display:none;  追加
}
(22)フッター部
「スタッフブログ・研修旅行記・・・」の背景画像はそのまま使い文字だけを変えた。
またリンク色を変更した。
#hpb-footerExtra1 a:link    (main_5Ea_2c.cssで)
{
color: #CCC;
text-decoration: underline;
}
#hpb-footerExtra1 a:visited
{
color: #CCC;
text-decoration: underline;
}
#hpb-footerExtra1 a:hover
{
color: #FF0;   #48BFF4より#FF0に変更
text-decoration: none;
}
#hpb-footerExtra1 a:active
{
color: #FF0;   #48BFF4より#FF0に変更
text-decoration: none;
}


(23)基本パーツ内のリンク色変更
各エリア毎で背景色が異なるので、ページ最下部の「スマートフォン」ページへのリンクはマウスを当てたとき、背景色似た色なので見づらい。そこで「基本パーツデザイン設定」でリンク色を変更した。
/*--------------------------------------------------------
基本パーツデザイン設定
--------------------------------------------------------*/
/* リンク文字色 */  (main_5Ea_2c.cssで)
a:link
{
color: #CCC;
text-decoration: underline;
}
a:visited
{
color: #CCC;
text-decoration: underline;
}
a:hover
{
color: #FF0;   #48BFF4より#FF0に変更
text-decoration: none;
}
a:active
{
color: #FF0;   #48BFF4より#FF0に変更
text-decoration: none;
}
●メモ
・下記のコードでメニュー部の位置が分かる。
/* トップページナビゲーション */
.hpb-layoutset-01 #hpb-nav
{
width: 860px;
position: absolute;
top: 2px;
left: 3px;
height: 280px;
overflow: hidden;
}
.hpb-layoutset-01 #hpb-nav li
{
float: left;
margin-top: 140px;
}

・メニューで「蒸したまご」の部分は次のスタイルで位置が決められている。従って、float,marginを変更することで任意の位置に変更可能。また別なidを取ればメニューの追加も可能。
.hpb-layoutset-01 #hpb-nav #nav-contact
{
float: right;
margin-top: -280px;
}

・メイン画像の位置
.hpb-layoutset-01 #hpb-title h2
{
margin-top: -167px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0px;
overflow: hidden;
text-indent: -9999px;
height: 310px;
background-image : url(mainimg_5Ea_01.png);
background-position: left top;
background-repeat: no-repeat;
}

次のページヘ
ヨーグルト・甘酒・飯寿司・リンゴのコンポート

手間なし・お手軽・簡単クッキング理科系の料理

■関連ページ
ヨーグルトの作り方
飯寿司の作り方
甘酒の作り方
コンポート&ジャム

「スマートフォン」ページへのリンク