1. ホーム > 
  2. Webサイト制作 > 
  3. iWebの使い方 > 
  4. iWeb Tips > 
  5. iWebでお気軽ホームページの作り方(3)パンくずリストとサイドメニューの作り込み

iWebでお気軽ホームページの作り方(3)パンくずリストとサイドメニューの作り込み

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

  • 2016/5/4
  • 2009/1/13

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

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

今回は、ヘッダの下にあるパンくずリストの部分と、サイドメニューの作り込みについてご紹介します。

パンくずリストの作り込み

「パンくずリスト」とは、ヘンゼルとグレーテルで、主人公が森で迷わないように、通った道にパンくずを置いていったという話に由来する、ホームページ制作では一般的なナビゲーションのことです。
ページ数が多くなれば多くなるほど、見ている人は自分の位置を見失いやすくなるものですので、今いるページの階層などを示すのに、とても効果があります。

前置きはこのくらいで、実際にこのページにも設置されているパンくずリストの部分を作成していきます。
基本的な作り方は、フッタのコピーライトが書かれている部分と同じです。幅910px、高さ30pxのテキストボックスを用意して、下のような幅3px、高さ30pxの画像でテキストボックスの背景を塗りつぶします。

背景に設定するには、グラフィックインスペクタで、塗りつぶしを「イメージ塗りつぶし」に設定します。

▼背景用に作成する画像

▼背景をイメージ塗りつぶしで塗りつぶしたテキストボックス

このようにして用意したテキストボックスを、ヘッダの画像の下に(1pxの隙間も空けずに)ぴったりと配置します。あとは、サイトのトップページからの階層を > を使って、入力します。

上の階層と下の階層の間の > の両端には、見やすくする為と、クリックしやすくする為に半角スペースを入れておきます。
テキストインスペクタでテキストカラーは白に設定して、リンクインスペクタでリンクの色も白にしておきます。

これでパンくずリストは「一応」完成しますが、最後に「ホーム」の文字の左側に、ページの左側とのマージンの役割として全角のスペースを入れます。テキストインスペクタ→リンクの「テキストインデント」でマージンを設定しても良いのですが、Windowsで見たときに、デザインが崩れる場合があるので、全角スペースを使います。

Yahoo!ブックマークのリンクはHTMLスニペットで設定し、RSSのアイコンは画像にリンクを貼っただけのものです。

これでパンくずリストの部分は完成です!

▼完成したパンくずリスト部分
パンくずリストの完成形

サイドメニューの作り込み

サイドメニューの部分は、とてもシンプルに出来ています。メインのコンテンツメニュー(ホームとかiWeb Labとか書かれているメニュー)の作り方からご紹介します。

まず、幅160px、高さ30pxのテキストボックスを用意します。フォントサイズは12です。
次に下のような画像をPhotoShopで作成して、先ほど作成した160 x 30 pxのテキストボックスの背景画像に設定します。

▼サイドメニュー用の背景画像(1)

あとはメニューの内容を入力して、等間隔に並べていくだけですが、ここではちょっと違うアプローチで、左側のマージンの確保と文字の(縦方向の)中央揃えを設定しています。

それは、テキストインスペクタの「余白を挿入」のスライダを動かして、9ptの余白を挿入するのです。
こうすると、テキストボックスの内側の上下左右に9ptの余白が入り、高さ30px、フォントサイズ12の場合に丁度良い配置になります。

全角スペースを使ったマージンでは、余白が大きすぎる場合などに使用しています。
下のような、もう一つのタイプのサイドメニューでも、同じように背景画像を用意して設定しています。こちらのタイプでは、左側のマージン替わりに全角スペースを入れています。

▼サイドメニュー用の背景画像(2)

サイドメニューの残りの部分には、特別なことはしていませんが、「Made on Mac」と書かれたバッジは、iWebの機能で挿入したものではなく、スクリーンショットから作成した画像を使っています。

スクリーンショットは「コマンド + shift + 3」などで撮ることができます。
わざわざ画像にしている訳は、iWebの機能で挿入した場合は、ほかのページにコピーが出来ない為です。新しいページを作成するたびにメニューから表示の設定をして、位置を修正し・・・という面倒なことをしたくなかったので、画像にしてあります。

▼Made on Macのバッジは画像化(画像だからいくつでも設置可能!)
mac

iWebについて

iWebは2011年7月に公開されたバージョン3.0.4以降、アップデートされておらず、最新のOSX環境で正常に動作するか分かりません。
そのため、MacでWebサイトの作成をする場合は、有料で販売されているソフトか、WordPressなどのCMSを利用されることをお勧めします。

WordPressの使い方

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

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

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