ホームページビルダー16のフルCSS編集備忘録（５）

ホームページビルダー１６の#hpb-innerの背景画像追加

メニュー部がここの色と同じくなり、見栄えが悪いので、全体の背景画像の色位置に合わせた画像を作り、追加した。
また、右上の「電話での予約・・・」のフォントカラーを変更した。

（１２）#hpb-innerの背景画像追加
（container_5Ea_2c_right.cssで）
#hpb-inner
{
background-image : url(inner.png);　背景が#F1F4FF（ここの背景色）なので下の背景画像を追加して色合わせ
background-repeat: repeat-x;　x方向だけ１回リピート（縦290pixだけ）
background-position: left 0px;
}
※inner.png　（サイズ：8X290）、<body>backround-imageのbg_01.jpgをトリミング（要グラデーションの位置合わせ）

（１３）「電話での予約・お問い合わせ」の部分（container_5Ea_2c_right.cssで）
#hpb-headerExtra1
{
width: 215px;
margin-top: 0px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
float: right;
color: #E6E6E6;　フォントの色を追加して背景に合わせた
}
（１４）「電話での予約・お問い合わせ」の部分のフォント（main_5Ea_2c.cssで）
#hpb-headerExtra1 p.tel
{
/* 電話番号の文字設定 */
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10px;
padding-right: 6px;
padding-bottom: 5px;
padding-left: 0;
font-size: 1.5em;　　→20pxに変更
font-weight: bold;
line-height: 19px;　　→24pxに変更
text-align: center;
}

#hpb-headerExtra1 p.tel span
{
/* 電話番号の「TEL」文字設定 */
display: block;
text-align: center;
font-size: 10px;　　→11pxに変更
color: #FFFFFF;
background-image : url(tel_5Ea.png);
background-repeat: no-repeat;
background-position: center center;
font-weight: bold;
padding-top: 1px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}

#hpb-headerExtra1 p.address
{
/* 住所文字設定 */
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 6px;
padding-bottom: 0;
padding-left: 0;
line-height: 19px;
text-align: center;
font-size: 0.8em;　　→13pxに変更
実際には次の文字を入れた。