
ページの基本設定とページの背景画像の設定
今回はトップページの基本設定を行って、不要なモノをすべて削除します。その後で、ページの背景画像を設定するところまでを解説します。このページはPDFファイルとして […]
- 2016/5/7
- 2010/4/25
今回はトップページの基本設定を行って、不要なモノをすべて削除します。その後で、ページの背景画像を設定するところまでを解説します。このページはPDFファイルとしてダウンロードする事ができますので、印刷するなどご活用ください。
このコーナーで作成したAirlogはこちらで公開中です。
▼知りたいところから読む
1.2 ページの基本設定と不要なモノを削除する
今回のトップページは、Blogのトップページを使います。まずはペー ジの横幅などの基本的な設定を行いましょう。
今回、ページの横幅は950ピクセル、左側のメニュー250ピクセル、コンテンツ部分700ピクセルとして、全体の横幅は950ピクセルにします。
フッタの高さは100ピクセルに設定します。
これらの設定は、ページインスペクタのレイアウトタブで行います。
今回、ページのナビゲーションは自動で作りませんので、ページインスペクタのページタブにある「ナビゲーショ ンメニューにページを含める」と「ナ ビゲーションメニューを表示」の チェックを外します。
これで、ページヘッダ部分にある自動的に作成されるメニューを消す事ができます。
次に作ったばかりのページ上で不要なモノを削除します。
編集メニューのすべて選択を選んで、ページ上のすべてのモノを選択 したら、Deleteキーを押して、すべて消します。
この状態で残るのは、ブログのタイトルを入力するテキストボックス と、ブログの説明文を入力するテキストボックス、エントリーを表示 するエリアの3つだけです。
1.3 ページの背景画像を設定
ページの基本設定も終わったところで、ウェブページキャンパス上に 素材を配置していきます。
もう一度完成図をみてください。
左側の濃いグレーの四角形の下から 右側に影のある縦線が伸びています。
この影のある縦線は、ページの背景として設定してありますので、ページのコ ンテンツの長さに沿って自動的に伸びていきます。
この背景画像は、幅950ピクセル、高さ1ピクセルのGIF画像です。
PhotoShop Elementsで作ってあります。この画像の詳しい作り方はここでは割愛しますが、ざっくりと説明すれば、下のような画像を作って、カンバスサイズの高さを1ピクセルにすれば作れます。
それでは作った画像をiWebで背景に設定しましょう。
ページの背景はページインスペクタのレイアウトタブで設定を行います。
ページの背景に「イメージ塗りつぶし」を選び、作成しておいた幅950ピクセル高さ1ピクセルの画像を選択します。
配置方法は「タイル状に配置」を選びます。
これで背景が設定できました。