フレームレイアウト設定機能追加 リリースのお知らせ

uWebeeでは、様々なレイアウトのホームページを作成するための「フレームレイアウト」を用意しており、2カラムや3カラムのデザインも簡単に実現できます。 今回の機能追加では、このフレームレイアウトの設定を強化し、より自由なレイアウトを表現可能となりました。 また、レイアウトの設定方法として、これまでの画面上のマウス操作による設定だけでなく、数値等を入力して指定することも可能になりました。

操作方法

フレームレイアウト設定機能の操作方法をご紹介します。
本記事の操作をお試しいただくだけの場合は、会員登録およびログインを行わずにお試しいただけます。 設定を行ったレイアウト、および、HTMLパーツ一式をご購入いただく場合は、会員登録を行ってください。

1.HTMLパーツ編集画面を開く
トップページの「HTML編集」ボタンか、こちらのリンクからHTMLパーツ編集画面に進んでください。
2.フレームレイアウトを設置する
HTMLパーツ編集画面が開いたら、画面右上に並ぶアイコンのうち「レイアウト一覧」をクリックしてください。 フレームレイアウト一覧が画面に表示されます。 お好みのフレームレイアウトをドラッグし、表示されたドロップエリアの中にドロップしてください。フレームレイアウトがドロップエリア内に設置されます。
マウス操作によるレイアウト設定
ドロップエリア内のフレームレイアウトには、フレームレイアウト全体の最大幅や、2カラムや3カラムのレイアウトにおける各カラムの幅を表す数値が表示されています。 これらの設定は、ドロップエリア内で各カラムの境界線やフレームレイアウトの両端の点線上にマウスカーソルを移動し、左右にドラッグすることで変更することができます。
3.編集モードに切り替える
フレームレイアウトの編集モードでは、さらに細かい設定変更が可能です。(変更可能な項目は、設置したフレームレイアウトによって異なります。)
先ほどのフレームレイアウトの設置後の画面で、画面右上に並ぶアイコンのうち、2段目の右端の「編集」アイコンをクリックしてください。 ドロップエリアの右側に、設置済みのフレームレイアウトの設定一覧が表示されます。 複数のフレームレイアウトを設置した場合、設定一覧も縦に複数列挙した形で表示されます。
このフレームレイアウト設定欄で、カラム幅や単位等の指定を変更すると、ドロップエリアに表示されているレイアウトに即座に反映されます。
設定値入力によるレイアウト設定
4.HTMLパーツを設置する
フレームレイアウトの内部にHTMLパーツを設置するには、右上のアイコンから「HTMLパーツ一覧」をクリックし、表示されるHTMLパーツ一覧の中からお好みのHTMLパーツをドラッグして、ドロップエリアのフレームレイアウト内にドロップしてください。
レイアウトとHTMLパーツの設定
フレームレイアウトの設定は、HTMLパーツを設置したで後でも、いつでも変更が可能です。 お好みに合わせてレイアウトを調整してください。 その他、様々な編集の操作方法については、ヘルプページをご参照ください。

一通りの編集ができたら、HTMLパーツ編集画面の右上にある「確認」ボタンを押すと、HTMLパーツ確認画面に遷移します。 このとき、ログインしていない状態の場合は、ログイン画面が表示されますので、ログインを行ってください。 会員登録がまだの方は、ログイン画面に表示される「会員登録はこちら」をクリックし、会員登録を行ってください。 HTMLパーツ確認画面では、設定を行ったレイアウトとHTMLパーツの最終的な確認ができます。

HTMLパーツ確認画面で購入の操作を行うと、レイアウトやHTMLパーツに対して行った設定を反映したHTMLファイルやCSSファイル、画像ファイル等の一式がダウンロードできるようになります。

以下のページで、uWebeeによるホームページ制作の流れを詳しくご説明しています。