2011年02月12日

【第62回】iPhone用ページのクラス構成図

今回は、iPhone用ページのクラス構成図を見てみましょう。

今後、iPhone用CSSデザインを変更していくにあたり、参考になります。

少し長くなりますので、目次を付けておきます。

★iPhone用ページのクラス構成図−目次−★

 1.トップページのクラス構成
 2.記事ページのクラス構成(1)−ヘッダー部−
 3.記事ページのクラス構成(2)−フッター部−



1.トップページのクラス構成

第58回でお伝えした通り、SeesaaブログのiPhone用デザインは、トップページと記事ページの2つが用意されています。

下図は、そのうちトップページのクラス構成図になります。

SD_062_01.jpg

まず、図にはありませんが、大外にbody要素があります。
また、これも図に掲載していませんが、その内側にiPhone用サイト全体を表す#iphone-containerがあります。

その2つの要素の内側が、ヘッダー部分を表す@#bannarと、ブログ本体部分を表すE#contentに大きく2分されています。

ヘッダーの@#bannarの中は、ブログタイトルを表示するC#banner-nameと、ブログの説明文を表示するD#banner-descriptionに分かれています。
そしてC#banner-nameの上に、SeesaaブログへのリンクボタンB.banner-button-leftクラス、およびPC用デザインでブログを表示するボタンのA.banner-button-rightクラスがあります。

一方で、ブログ本体のE#contentの中には、まず一番上に広告が表示されます。
その下に、ナビゲーションを表示するF.naviクラスがあります。

その下からが記事の一覧を表示する部分になり、G#index-article-list、そのすぐ内側に.blogクラスがありますが、トップページではこの2つは同じ位置づけとなっています。

各記事を表す.blogクラスは、日付ヘッダーを表示するHh2の.dateクラスと、見出しを表示しているI.blogbodyクラスがあります。
I.blogbodyクラスの中には、さらに記事タイトルを表示するJh3の.titleクラスと投稿日時を表示するK.title-dateクラスが入っています。
ちなみに、図には記載していませんが、記事タイトルの右側にある≫は、.arrowというクラスで制御されています。

たくさんの要素が設定されていますので、どのクラスがどこを制御しているのか、しっかり確認して下さい。



2.記事ページのクラス構成(1)−ヘッダー部−

次に、記事ページのクラス構成です。

まず、記事ページの上の方を説明します。

SD_062_02.jpg

ブログのヘッダーを表示する@#bannarは、トップページと同じ構成です。

その下側に、これもトップページと同様にA#contentがあり、その中に広告とB.naviクラスが設定されています。

その下に、C.blogクラスがあります。
トップページと異なり、#index-article-listはありません。

その内側に、またトップページと同様に日付ヘッダーを表示するDh2の.dateクラスがあり、さらにその下にE.blogbodyクラスが、そしてその中にFh3の.titleクラスあります。

このように、トップページと記事ページの構成は、かなり共通化されています。

トップページと異なるのは、その下にブログ本文を表示するG.textクラスが存在することです。

ここまでのところ、トップページと記事ページが異なるのは以下の3点です。

 (1)記事ページには、.blogクラスの外側に#index-article-listがない。
 (2)記事ページには、h3.titleクラスの下に.textクラスがある。
 (3)記事ページには、h3.titleクラスの下に.title-dateクラスがない。

あと、トップページにあった.arrowクラスは、記事ページにはありません。



3.記事ページのクラス構成(2)−フッター部−

記事ページの下部は、ご覧のようになっています。

SD_062_03.jpg

記事の最後には、タグを表示するA.tag-wordクラスがあります。そしてその下に、投稿日時を表示するB.postedクラスです。

これで、ブログ本文を制御するB.blogbodyクラスは終了です。

その下に、コメント記入欄を制御するD#commentsがあります。
コメント欄は2つのE.comments-headがあり、その下にコメント各事項がF.comments-bodyクラスで表示されています。

これでD#commentsが終わり、次いでブログ本体を表す@#contentが終了します。

そしてその下に、G#footerがある形です。
ちなみにこのG#footerはトップページにも存在しますが、上の説明では割愛しました。

記事ページのクラス構成の説明は以上になります。



以上のように、トップページと記事ページのクラス構成は、かなり共通化されています。
トップページと記事ページで大きくデザインを変える必要がない限り、同じCSSで良いと思います。

今回のシリーズでは、トップページと記事ページで同じCSSを適用していきます。

それでは次回から、いよいよCSSの編集に入っていきましょう。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
ラベル:iPhone CSS
posted by o(^0^)o ほくほく at 20:00| Comment(2) | iPhoneブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
本が一冊できそうなくらいの素晴らしい内容ですね。

iphoneサイトを作りたかったのでとても参考になりました!!
ありがとうございます
Posted by りさ at 2011年03月26日 08:30
りささん、こんにちは。

コメントありがとうございます。
お役に立ったようで良かったです。

iPhoneってとっても便利ですもんね。
iPhone用のサイトを作るのは、すごくいいと思います。

何かご不明な点があればお知らせ下さい。

宜しくお願いします。
Posted by ★ o(^0^)o ほくほく ★ at 2011年03月28日 06:15
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。