記事検索：
tips_026
このページでは、当サイト「iWebでお気軽ホームページ」の初代デザインのページの作り方を、チュートリアル式でご紹介します。初代デザインのサンプルはこちらをご覧ください。
このホームページがどのようにして作られているかをお見せする事で、少しでもiWebでホームページを作成されている方の参考になればと思います。
今回は、ヘッダの下にあるパンくずリストの部分と、サイドメニューの作り込みについてご紹介します。
2009/01/13
「パンくずリスト」とは、ヘンゼルとグレーテルで、主人公が森で迷わないように、通った道にパンくずを置いていったという話に由来する、ホームページ制作では一般的なナビゲーションのことです。
ページ数が多くなれば多くなるほど、見ている人は自分の位置を見失いやすくなるものですので、今いるページの階層などを示すのに、とても効果があります。
前置きはこのくらいで、実際にこのページにも設置されているパンくずリストの部分を作成していきます。
基本的な作り方は、フッタのコピーライトが書かれている部分と同じです。幅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のバッジは画像化（画像だからいくつでも設置可能！）
↓ 完成したパンくずリスト部分
-
iWebでお気軽ホームページの作り方（３）パンくずリストとサイドメニューの作り込み
パンくずリストの作り込み
サイドメニューの作り込み
このサイトはApple iWeb を使用して作成しています。
ご意見などはお問い合わせフォームからお願いいたします。
当サイトは、Yahoo！カテゴリ（Macintosh > アプリケーションソフト）掲載サイトです。
