(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;
}
次のページヘ