1. ホーム > 
  2. Webサイト制作 > 
  3. iWebの使い方 > 
  4. iWebチュートリアル > 
  5. ブログエントリーの完成ページの確認と素材のコピー

ブログエントリーの完成ページの確認と素材のコピー

今回はブログのエントリーページのデザインを作っていきます。基本的なデザインはトップページのデザインと同様ですので、ブログエントリー用に追加する素材などは今のとこ […]

  • 2016/5/7
  • 2010/5/9

今回はブログのエントリーページのデザインを作っていきます。基本的なデザインはトップページのデザインと同様ですので、ブログエントリー用に追加する素材などは今のところありません。

このコーナーで作成したAirlogはこちらで公開中です。

2.1 ブログエントリーの完成ページ

ブログエントリーページは、(ブログの)トップページとはいくつか異なる要素もあります。

それは、エントリーの日付や、トップページのエントリーの概要に表示させるプレースホルダなどです。
また、ブログエントリーページのHTMLファイル名や、ページのタイトルをうまく制御する為のコツもありますので、このセクションで詳しく解説します。

ではブログエントリーページの作成を順に追って、これらの新しい要素に関しても見ていきましょう。

2.2 必要な画像などをトップページからコピーする

ブログエントリーページのデザインそのものは、トップページと何ら変わりはありませんので、画像などを再度挿入していくのも面倒です。
そこで、先ほど作成したトップページから、必要な画像やテキストボックスなどをコピーして使用します。

まずは、トップページをiWebで表示させてください。
次にコピーするオブジェクト(画像やテキストボックスなどの事)をすべて選択します。
この時、コンテンツ部分に配置されているオブジェクトと、フッタ部分に配置されているオブジェクトを一気にコピーしても構いません。

02_1

必要なオブジェクトをコピーしたら、ブログのエントリーページを表示して、貼り付けるだけです。
フッタ部分も一緒にコピーした場合、iWebが自動的にフッタ部分のオブジェクトはフッタ部分に挿入してくれますので、一気にコピーしてしまった方がラクです。

iWebでは、このようにページのオブジェクトを他のページにコピーする事が簡単に行えますので、かなり便利です。
またブログのエントリーページは、エントリー一覧から「複製」を選ぶだけで、ページのデザインから内容まで複製する事ができます。

03

2.3 ブログエントリーページの基本的な構造

ブログエントリーページは、いくつかの特徴的な構造を持っています。

04

画像を入れるプレースホルダ以外は、ページ上から削除する事はできません。

また、ブログのトップページにサムネイル表示させる為の、画像のプレースホルダは一度削除してしまうと、ページを新しく作り直す以外に、復活させる方法はありませんので、注意が必要です。
(画像を挿入する事はいつでも可能ですが、プレースホルダに挿入しない限り、ブログのトップページにはサムネイル表示されません)

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