ページの基本設定とページの背景画像の設定

今回はトップページの基本設定を行って、不要なモノをすべて削除します。その後で、ページの背景画像を設定するところまでを解説します。このページはPDFファイルとしてダウンロードする事ができますので、印刷するなどご活用ください。

このコーナーで作成したAirlogはこちらで公開中です。

1.2 ページの基本設定と不要なモノを削除する

今回のトップページは、Blogのトップページを使います。まずはペー ジの横幅などの基本的な設定を行いましょう。

今回、ページの横幅は950ピクセル、左側のメニュー250ピクセル、コンテンツ部分700ピクセルとして、全体の横幅は950ピクセルにします。
フッタの高さは100ピクセルに設定します。

これらの設定は、ページインスペクタのレイアウトタブで行います。

今回、ページのナビゲーションは自動で作りませんので、ページインスペクタのページタブにある「ナビゲーショ ンメニューにページを含める」と「ナ ビゲーションメニューを表示」の チェックを外します。

これで、ページヘッダ部分にある自動的に作成されるメニューを消す事ができます。

次に作ったばかりのページ上で不要なモノを削除します。

編集メニューのすべて選択を選んで、ページ上のすべてのモノを選択 したら、Deleteキーを押して、すべて消します。

この状態で残るのは、ブログのタイトルを入力するテキストボックス と、ブログの説明文を入力するテキストボックス、エントリーを表示 するエリアの3つだけです。

1.3 ページの背景画像を設定

ページの基本設定も終わったところで、ウェブページキャンパス上に 素材を配置していきます。

もう一度完成図をみてください。
左側の濃いグレーの四角形の下から 右側に影のある縦線が伸びています。

この影のある縦線は、ページの背景として設定してありますので、ページのコ ンテンツの長さに沿って自動的に伸びていきます。
この背景画像は、幅950ピクセル、高さ1ピクセルのGIF画像です。

PhotoShop Elementsで作ってあります。この画像の詳しい作り方はここでは割愛しますが、ざっくりと説明すれば、下のような画像を作って、カンバスサイズの高さを1ピクセルにすれば作れます。

それでは作った画像をiWebで背景に設定しましょう。

ページの背景はページインスペクタのレイアウトタブで設定を行います。

ページの背景に「イメージ塗りつぶし」を選び、作成しておいた幅950ピクセル高さ1ピクセルの画像を選択します。
配置方法は「タイル状に配置」を選びます。

これで背景が設定できました。

「役にたった」と思ったらシェアお願いします