どこでも配置モードは簡単に自分の好きなレイアウトでページを作成していくことができます。しかし、ページを画面の中央に配置して表示することができなかったり、実際に公開してみると文字と文字、または文字と画像が重なってしまうなどの制限事項によりなかなか思うように作成できないことがあります。
そこで、標準モードでもどこでも配置モードのようにちょっと複雑なページを作成するポイントをここでは紹介します。
まず下の２枚のページを見てください。上が標準モードで作成したページ、下がどこでも配置モードで作成したページです。
どちらもほぼ同じように見えますが、標準モードの利点は、どのようなウインドウの大きさでも「中央揃え」などの位置揃えがウインドウの大きさが変わっても活かされるというところです。どこでも配置モードではこのままウインドウのサイズを大きくすると右側に余白ができてしまい、見栄えがかわってしまいます。
- 標準モードで作成
-
- どこでも配置モードで作成
-
今回はこの標準モードで作成したページの簡単な手順とポイントを順を追って紹介していきます。
※以下の画面はホームページ・ビルダー13のものですが、ほかのホームページ・ビルダーでも、ほぼ同様の操作で行うことができます。
■操作
- まず画像、文字の配置を考えてページ内に表を作成します。上の標準モードのページをホームページ・ビルダーのページ編集画面で開いてみると、下のようになります。
画像などの回りについている点線は、非表示の状態になっている表の枠です。この表は２つの表で構成されています。
オレンジの枠が全体のバランスを取っている大元の表。その中にある青い枠はメニューの項目を並べている別の表です。
まずオレンジの外枠の作成方法を説明します。 - はじめに新しいページに大元の表を挿入します。行数を 5、列数を 2 で作成します。
※〔かんたん〕 の場合：ナビメニューから「表の挿入」を選択します。
※〔スタンダード〕 〔エディターズ〕 の場合：メニューバーから「表」→「表の挿入」を選択します。
「表の挿入」ダイアログボックスが表示されます。
するとページ編集画面内に下のような表が出来上がります。
ここで表の作り替えを簡単にするボタンの説明をします。
下の図の表編集ツールバーのボタンを使うと、表を結合したり、結合した表を再び分けたり、行や列を追加したりすることが簡単に行えます。通常は上のツールバーの中に収納されています。
ボタンの動作は、左から「表の挿入」「行の追加」「列の追加」「行の削除」「列の削除」「右のセルと結合」「下のセルと結合」「選択セルの結合」「列の分割」「行の分割」です。
※〔かんたん〕 では、上記表編集ツールバーが表示できません。編集スタイルを 〔スタンダード〕 または、〔エディターズ〕 に変更してから操作を行ってください。
では先程の表を構成し直してみます。まず表の 1 行目、4 行目、5 行目はセルが分割されてないので、隣のセルと結合します。
更に結合しなかった 2 行目、3 行目の 2 列目は縦に結合するために、下のセルと結合します。
これで大元の表は完成です。各セルの中に画像を入れていきます。下の図は表の中で画像や文字を配置する場所を「中央揃え」でレイアウト済みのものです。この作業に関しては、以下のFAQを参照してください。
更にこの作成した表全体を画面中央に寄せると、常にページの真ん中に作成した内容が表示されるようになります。こちらも、以下のFAQを参照してください。
- 次に縦に結合したセルの中にもう一つの表を挿入します。その前にセルの属性を下詰めになるように変更します。縦に結合したセルをクリックし、メニューバーから「編集」→「属性の変更」を選択します。
「属性」ダイアログボックスが表示されます。
[セル] タブが選択されている状態で属性ウインドウが開いてくるので [垂直位置揃え] の項目で [下揃え] を選択しておきます。
縦に結合したセルの中に表を新しく挿入します。行数は 4、列数は 2 で作成します。
できた表の 1 列目には画像、2 列目には文字を入力していきます。
これで画像、文字の挿入は完了です。後はそれぞれのレイアウトを考えます。今回の画像はメインとなる画像がやや上に来ます。このままだと右のメニューがすぐ横に並んでしまうので、最後に残ったメイン画像のすぐ下のセルの中に改行を入れて隙間を作ります。空白のままだとそのセルが潰れた状態になってしまいます。もし不要であれば上のセルと結合してしまっても構いません。
- 最後に作成した表の枠を非表示に設定し、背景を設定しましょう。表の枠を非表示にする方法は、以下のFAQを参照してください。
今回の作成方法はあくまでも一例です。これを応用していくと様々なレイアウトのページを標準モードで作成していくことができます。どこでも配置モードで起こった文字や画像の重なりを避けることができ、見栄えもきれいになります。是非お試しください。