ホームページビルダー・グレート初心者講座

　テーブルを使ってタイトル欄付きの説明枠

テーブルを使って説明枠やメニューなどに使えそうな枠組みを作ってみます。

　サンプル

このページでは以下のような表の枠組みを作ってみます。

タイトル部分
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

　作成手順

まずは上のような三角の画像を作成して下さい。
セルの色を同じ色に合わせますので、色番号などを覚えておいて下さい。（ #0074bf　など）
色がよく分からない場合は、後の説明でビルダーからの色確認方法を説明しますので結構です。
とりあえず試してみたい方はこの画像を右クリックして「名前を付けて画像を保存」で保存して利用して下さい。

1.　表の挿入
次に下のような 2行 2列の表を挿入して下さい。

2.　下部セルの結合
表の下のセル2つをドラッグした後、右クリックして「選択セルの結合」を行います。

3.　三角画像の挿入
先ほどの三角画像を右上のセルへ入れます。
セルへ直接ドロップするか、挿入するセルをクリックした後、メニューの「挿入」→「画像ファイル」→「ファイルから」を選び、三角の画像を選択して挿入して下さい。

4.　色の適用
三角画像を入れたセルの左のセルを三角の画像と同じ色にします。

色番号を直接入れる場合
三角画像の色番号が分かっている場合は、三角画像左側のセルを右クリックし、「属性の変更」→「背景」項目のフォームに色番号を入れてセルの背景色を三角画像と同じ色に適用して下さい。

カラーパレットを使って色を取得、適用する場合
ホームページビルダーから色を確認する場合はメニューの

　をクリックし、カラーパレットを表示します。
ボタンがよく分からない場合はメニューの「表示」→「カラーパレット」を選択して表示させて下さい。
カラーパレットが表示されたら、下の画像にある「スポイトアイコン」をクリックし、マウスカーソルがスポイト形状に変化した事を確認した後、挿入した三角画像の上に持っていきます。
カラーパレットを見ながらマウスを動かすと、画面上の色と共にカラーパレットの色番号などが変化していますので、三角画像と同じ色だと思われる所で左クリックして下さい。
するとカラーパレットの色が一時的に選択した色に固定されますので、セルをクリックしカラーパレットの「適用」ボタンを押します。

カラーパレットで色を取得する

5.　結合した下部セルの枠線を設定

結合した下部のセルを右クリックし「スタイルの設定」→「現在のタグのみに～の編集」→「レイアウト」タブと選択します。
すると下のような設定画面になりますので、枠線の設定を行います。
設定画面中の「ボーダー」部分が設定する項目で　 1ピクセル、実線、三角画像と同系色の色 に設定します。
三角画像などに淡い色を使っている場合、少し濃いめ（暗め）の色にした方が見やすい表になると思います。

枠線を設定すると下のような状態になります。

6.　表の枠と罫線の幅を消す

作成中の表のセル（３つのうちどれでも結構です）を右クリックして「属性の変更」を選択し、下の画像にある「表」というタブをクリックすると、下の画面になりますので　罫線の幅を 0ピクセル　セル内の余白を 0ピクセル　枠表示を 0ピクセル　に設定して下さい。

枠線を設定すると下のような状態になります。
後はテーブルのサイズや文字が入る部分の余白などを調節して完了です。

デ
あああああああああああああああああ

7.　テーブルサイズと余白の調節

テーブルサイズの調節
この表を使うページによって調節してもらえれば結構ですが、下の例では右上のセル幅を 200ピクセルに、表の幅を 400ピクセルに設定しています。
設定は 6.　表の枠と罫線の幅を消す で設定した画面から行い、それぞれ「表の幅」「セルの幅」の値を修正します。

サンプル
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

余白の調節
上記のサンプルでは下のセルの余白が綺麗でないので、上下左右に適度な余白ができるように調節します。
下のセルを右クリックして「スタイルの設定」を選択し、「現在のタグのみに～の編集」をクリック、「レイアウト」タブを表示します。　表示される設定画面は 5.　結合した下部セルの枠線を設定 の設定画面と同じものです。
この中の「パディング」の値がセル内の余白を指定する項目ですので適度に（例では10ピクセルに）指定します。
そしてこれらを設定すると下のようになります。

サンプル
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

その他の方法

上記では装飾行のセルを2つで行ないましたが、背景画像として設定することで装飾する方法もあります。

その場合は、装飾する行（タイトルの部分）の素材を作成し、

　1. タイトル行を右クリックして「属性の変更」をクリック

　2. スタイルから、「色と背景」をクリック

　3. ここで背景画像などを指定します。
　　上記のようにする場合、背景画像が繰り返されては困るので、「繰り返さない」を指定、
　　後は配置ですが、水平方向は左を基点に、垂直方向は上を基点にした位置です。
　　プレビューしながら希望の配置になるよう調整したら完成です。