iWebでお気軽ホームページの作り方（１）ページの基本設定
このページでは、当サイト「iWebでお気軽ホームページ」の初代デザインのページの作り方を、チュートリアル式でご紹介します。初代デザインのサンプルはこちらをご覧く […]
- 2016/5/4
- 2008/12/30
このページでは、当サイト「iWebでお気軽ホームページ」の初代デザインのページの作り方を、チュートリアル式でご紹介します。初代デザインのサンプルはこちらをご覧ください。
このホームページがどのようにして作られているかをお見せする事で、少しでもiWebでホームページを作成されている方の参考になればと思います。
まずはBlankページを作って基本設定をします
最初にするのは、何はなくとも新規ページの作成です。新しくページを作らないと何も始まりませんから。
テーマは「白」で、テンプレートは「Blank」を利用します。
普段は既存のページを複製して再利用します。そうすれば、メニューのリンクなどの再設定もなく、テキストボックスなどの最低限の素材も使い回せるので、手間は最低限で済みます。
しかし、ここでは作成手順のご紹介なので、まっさらな新規ページから作っていきます。
それでは、テーマを白でBlankのテンプレートを使って新規ページを作成したら、ページインスペクタのレイアウトパネルを表示して、下のように設定をします。
新規ページの作成は「ウェブページを作るには」を、ページインスペクタの使い方については「ページインスペクタの使い方」をそれぞれ参考にしてください。
- 上下のパディング：0px
- コンテンツの幅：910px
- コンテンツの高さ：480px
- ヘッダの高さ：100px
- フッタの高さ：100px
- ページの背景：カラー塗りつぶし（白）
- ブラウザの背景： カラー塗りつぶし（白）
このうち、ページの背景だけは後で、イメージ塗りつぶしに修正します。
また、iWebが自動で生成するナビゲーションメニューは使用しませんので、ページインスペクタのページパネルで、「ナビゲーションメニューを表示」のチェックを外します。
先ほど、ページの背景だけはイメージ塗りつぶしに修正すると書きました。これは、ページの背景にイメージ塗りつぶしを設定して、ページの両端の線を背景画像として設定する為です。
事前に、幅910px／高さ1pxで両端だけが「#555f6a」に1pxだけ塗りつぶされた画像を用意しておきます。
この画像をページの背景として設定して、タイル状に配置をします。すると、今見ているこのページのように、両端に線が表示されます。
最後に、Webページキャンパス上で最初から表示されているテキストボックスや線などを削除します。「Ctrl+A」を押して、表示されているオブジェクトを選択したら、deleteキーを押して削除します。
これで、ページの基本設定は終わりです。
次回は、ヘッダとフッタ部分を作り込んでいく過程をご紹介します。
iWebについて
iWebは2011年7月に公開されたバージョン3.0.4以降、アップデートされておらず、最新のOSX環境で正常に動作するか分かりません。
そのため、MacでWebサイトの作成をする場合は、有料で販売されているソフトか、WordPressなどのCMSを利用されることをお勧めします。
WordPressの導入から基本的な使い方、プラグインの活用、テーマのカスタマイズまで、WordPressの使い方全般をまとめています。
無料で利用できるホームページ作成ソフトには、オープンソースのKompozerもありますが、こちらのソフトも2011年以降バージョンアップしておらず、最新環境で正常に動作するか分かりません。
