記事検索：
tutorial_004
トップページ作成の最終手順は、メインコンテンツ部分の背景画像の設定と、サイドメニューなどの設定です。
設定の要領は、前のステップで行った手順と変わりありませんので、ビシビシ進めていきましょう。
このコーナーで作成したAirlogはこちらで公開中です。
2010/04/25
メインコンテンツ部分のデコレーションの仕上げとして、ブログのエントリーが表示される場所に、MacBookAirの背景画像を設定しておきます。
事前に下のような画像を用意しました。
MacBook Airの写真を撮影して、PhotoShopで加工した画像です。
詳しい制作方法は割愛しますが、PhotoShopのエフェクトの使い方などを解説しているホームページなどで、これに近い画像の作成方法 などが解説されています。
さて、さっそく用意しておいた画像をiWebに挿入します。
iWebへの画像の挿入は、ウェブページキャンパス上に挿入したい画像をドラッグアンドドロップで配置するか、挿入メニューから「選択...」を選ぶ事で出来ます。
ところが、単純に画像を挿入するだけだと、挿入した画像がブログエントリーを表示している部分よりも上に表示されてしまいます。
このままですと、ブログの説明文やエントリーの表示エリアが隠れてしまいますので、挿入し た画像を一番下に表示するように設定をします。
挿入した画像を選んで配置メニューから「最背面へ」を選ぶと、選択 した画像が、すべてのオブジェクトの最も背面に移動します。 「コマンド+シフト+B」のショートカットでも同じ操作が出来ます。
最背面に画像を移動したら、位置と回転インスペクタで背景画像の位 置を調整します。
これでメインコンテンツエリアの素材配置は一旦完成です。
ここまで出来れば、トップページの完成は間近です。 次にブログの説明文のテキストボックスの大きさを、先ほどと同じ要領で、幅680ピクセルにリサイズし、X260ピクセル、Y10ピクセル の位置に配置します。
高さは説明文の長さによって変わりますが、1行なら27ピクセル、2 行なら54ピクセルくらいです。 高さはテキストのサイズなどにも左右されますので、一番イメージに近い設定をした後、適度なサイズにリサイズしてください。
次はブログエントリーの表示エリアです。 ここは他のオブジェクトのように、細かい設定をすることは出来ませんが、幅や位置などを設定しておきます。 設定の要領は今までと同じく、位置と回転インスペクタを使います。
（後ほど細かい設定を行っていきます）
さて実例では、ブログの説明文とブログのエントリー表示のエリアは、20ピクセルの間隔を開けて、 幅680ピクセルで設定、配置します。
ブログエントリーの写真の配置方法などは、左側に表示したり右側に表示したりと、いろいろな設定がありま すので、ご自分のイメージに合わせて設定を変更してください。
最後にサイトの左側のメニュー部分のレイアウトを行います。
ここも事前に、下の図のような画像を用意しておき、用意した画像をiWebに配置します。
画像を配置したら、その画像の上にメニューの内容を書いたテキストボックスを配置しておきます。
最後は、ページのフッタ部分です。
ページのフッタ部分には通常コピーライトの表示をしますので、今回はコピーライトを書いたテキストボックスを任意の 位置に配置しておきます。
通常はページの真ん中にある事が多いようですが、個人的好みでページの右側に表示させています。
これでトップページは、とりあえず完成です。 この後ホームページのコンテンツが増えた時や、アフィリエイトのバ ナー貼付け、ブログウィジェットの貼付けなど、いろいろなカスタマイズを行っていきます。
ホーム > iWeb Lab > iWebチュートリアル > メインコンテンツの背景画像とその他の素材の配置
-
メインコンテンツの背景画像とその他の素材の配置
1.5 メインコンテンツ背景画像の設定
1.6 その他の素材を配置
-
iWebチュートリアル 記事一覧
トップページの作成
スポンサードリンク
ブログエントリーページの作成
このサイトはApple iWeb を使用して作成しています。
ご意見などはお問い合わせフォームからお願いいたします。
当サイトは、Yahoo！カテゴリ（Macintosh > アプリケーションソフト）掲載サイトです。
