
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のバッジは画像化(画像だからいくつでも設置可能!)
iWebについて
iWebは2011年7月に公開されたバージョン3.0.4以降、アップデートされておらず、最新のOSX環境で正常に動作するか分かりません。
そのため、MacでWebサイトの作成をする場合は、有料で販売されているソフトか、WordPressなどのCMSを利用されることをお勧めします。
WordPressの導入から基本的な使い方、プラグインの活用、テーマのカスタマイズまで、WordPressの使い方全般をまとめています。
無料で利用できるホームページ作成ソフトには、オープンソースのKompozerもありますが、こちらのソフトも2011年以降バージョンアップしておらず、最新環境で正常に動作するか分かりません。