1. ホーム > 
  2. Webサイト制作 > 
  3. iWebの使い方 > 
  4. iWeb Tips > 
  5. iWebでお気軽ホームページの作り方(2)ヘッダとフッタの作り込み

iWebでお気軽ホームページの作り方(2)ヘッダとフッタの作り込み

このページでは、当サイト「iWebでお気軽ホームページ」の初代デザインのページの作り方を、チュートリアル式でご紹介します。初代デザインのサンプルはこちらをご覧く […]

  • 2016/5/4
  • 2009/1/3

このページでは、当サイト「iWebでお気軽ホームページ」の初代デザインのページの作り方を、チュートリアル式でご紹介します。初代デザインのサンプルはこちらをご覧ください

このホームページがどのようにして作られているかをお見せする事で、少しでもiWebでホームページを作成されている方の参考になればと思います。

今回は、ヘッダとフッタの作り込みをご紹介します。

▼知りたいところから読む

ヘッダの作り込み

ホームページのタイトルロゴの画像の部分を「ヘッダ」として作り込んでいきます。このタイトルロゴの画像は、実は下のように2枚のjpeg画像から成り立っています。

▼左側の画像
top_bg_01

▼右側の画像(若干縮小して表示しています)
top_bg_02

なぜ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の導入から基本的な使い方、プラグインの活用、テーマのカスタマイズまで、WordPressの使い方全般をまとめています。

無料で利用できるホームページ作成ソフトには、オープンソースのKompozerもありますが、こちらのソフトも2011年以降バージョンアップしておらず、最新環境で正常に動作するか分かりません。

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