iWebでお気軽ホームページの作り方（２）ヘッダとフッタの作り込み
このページでは、当サイト「iWebでお気軽ホームページ」の初代デザインのページの作り方を、チュートリアル式でご紹介します。初代デザインのサンプルはこちらをご覧く […]
- 2016/5/4
- 2009/1/3
このページでは、当サイト「iWebでお気軽ホームページ」の初代デザインのページの作り方を、チュートリアル式でご紹介します。初代デザインのサンプルはこちらをご覧ください。
このホームページがどのようにして作られているかをお見せする事で、少しでもiWebでホームページを作成されている方の参考になればと思います。
今回は、ヘッダとフッタの作り込みをご紹介します。
▼知りたいところから読む
ヘッダの作り込み
ホームページのタイトルロゴの画像の部分を「ヘッダ」として作り込んでいきます。このタイトルロゴの画像は、実は下のように2枚のjpeg画像から成り立っています。
▼左側の画像
▼右側の画像（若干縮小して表示しています）
なぜ1枚の画像ではなく2枚の画像なのかというと、左側の画像にホームページのトップページへのリンクを設定する為です。
1枚の画像にしてしまった場合、ヘッダの画像全体にリンクが設定されてしまいます。それでも良い事は良いのですが、ページの真ん中あたりをクリックしても、トップページへリンクしてしまい、操作に違和感が出てしまうと考えて2枚にしてあります。
この画像をぴったり並べて、ヘッダ部分に配置します。この画像はメニューバーの「配置」メニューから「最背面へ」を選び、一番背面になるようにしておきます。
あとは、「お問い合わせについて」や「サイトマップ」へのリンクを設定したテキストボックスを配置し、HTMLスニペットを使ったGoogle検索を配置すれば、ヘッダの画像部分は完成です。
フッタの作り込み
フッタ部分は、非常にシンプルです。まず、図形メニューから直線を選んで、長さを910pxにします。この線をグラフィックインスペクタを使って、点線にします。
点線の種類は、一番きめの細かいものを選び、点線のカラーは「#555f6a」で太さは1ptに設定しておきます。
この点線の下には、各コンテンツのトップページへのリンクを設定したテキストボックスを配置します。
このテキストボックスも、点線と同じく横幅は910pxで、テキストインスペクタを使って、テキストを中央揃えに設定しておきます。
最後にコピーライトが書かれた部分ですが、まず幅910px、高さ30pxのテキストボックスを用意します。
次に下のような幅3px、高さ30pxの画像を用意して、テキストボックスの背景として、タイル上に配置します。背景に設定するには、グラフィックインスペクタで、塗りつぶしを「イメージ塗りつぶし」に設定します。
▼背景用に作成する画像
▼背景をイメージ塗りつぶしで塗りつぶしたテキストボックス
最後に、このテキストボックスに、 テキストの配置を中央揃えにして、白い文字でコピーライトを記入すれば完了です。
ここまで設定すれば、ヘッダとフッタの作り込みは完了です。 次回は、ヘッダの下にあるパン屑リストの作成と、サイドメニューを作成する過程をご紹介します。
iWebについて
iWebは2011年7月に公開されたバージョン3.0.4以降、アップデートされておらず、最新のOSX環境で正常に動作するか分かりません。
そのため、MacでWebサイトの作成をする場合は、有料で販売されているソフトか、WordPressなどのCMSを利用されることをお勧めします。
WordPressの導入から基本的な使い方、プラグインの活用、テーマのカスタマイズまで、WordPressの使い方全般をまとめています。
無料で利用できるホームページ作成ソフトには、オープンソースのKompozerもありますが、こちらのソフトも2011年以降バージョンアップしておらず、最新環境で正常に動作するか分かりません。
