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

このページでは、当サイト「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のバッジは画像化（画像だからいくつでも設置可能！）

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