• 2009年11月 5日(木) 22:52 JST
  • 投稿者:
    augebang
  • 閲覧数
    1,169

PTbooksr2制作後書き。

今回の「PTbooksr2」を製作中に大いに悩んだのが
・ヘッダー内の位置決めの取り扱い。
・グローバルナビゲーションのデザイン。
この2点でした。

ヘッダー内の位置決めの取り扱いについて。

もともと1.4.x系列の時(初期のProfessionalCSS)はポジショニングで
位置決めをしてたのですが理由は忘れましたが使われなくなりました。
しかしヘッダー内に色々と組み込みたいと言う意見が多かったので今回修正しました。

どんな内容か簡単に解説すると、
「div#header」に「position:relative;」を指定しています。
これは「div#headerの右上を基点としますよ。」と言う意味です。

続いて「サイト名」と「スローガン」に「position:absolute;」を指定しています。
これは「div#headerの右上を基点とした位置に場所決めします。」と言う意味です。
この指定により「margin」で位置が決められます。

続いて「サイト名」と「スローガン」に「position:absolute;」を指定しています。
これは「div#headerの右上を基点とした位置に場所決めします。」と言う意味です。
この指定により「top」「left」「right」「bottom」で位置が決められます。
(2009/11/22修正)

現在のデフォルトサイトテーマの「Axtry」も同様に指定し、
ウエルカムメッセージも今の位置に持ってきています。
この方法を使わなくてもサイズを決めて 「float」をかければ同様のことは出来るのですが
ヘッダー内の事ですので「positionプロパティー」を使いました。

この「positionプロパティー」意外とみなさん目にしている演出に使われいるので
調べられたら面白いと思いますよ。

「グローバルナビゲーションのデザイン。」

Ptextbookシリーズはベースとなり易いようにリリースしたテーマなので
グローバルナビゲーションの部分は枠指定のボーダーだけでそれ以上の事は
後で修正しやすいように指定していませんでした。

ただこの一年ほど様子を見てると、このまま使ってしまうサイト様が多いです。
確かに問題がある訳ではなく、ある意味とても分かりやすいリンクとなるのですが・・・
修正が手間と言えば手間な部分ではあると思うので今回ほんの少しだけ装飾しました。

しかし、そうなるとテーマクッキングの内容と大きいずれが生じてしまう。
この事にしばし悩んだのですが書き変えれる方はどちらでも関係ないですしね。

PTbook16Rsr2について。
例のごとく囲んでるライン(ボーダー)はそのdivを表しています。
このレイアウト、よく使われているのは旅行会社さんや飲食店さんなど予約を取ったり
プロモーションが多いサイト様など、海外ではECサイトが多いです。

自動インストーラーレシピについて。
今回からレシピを6種類一括ダウンロードできるようにしましたので
使いたいテーマレシピを選んで自動インストーラでインストールしてください。
PTbooksr2オールシリーズレシピ。

ご質問はメールで頂いてもいいのですが「ご自身の分からない事はみんな分からない」と
考えていただいて間違い無いので掲示板をお使いください。
ユーザー登録の必要はありませんがスパム防止のために文字認証がかかってます。

それでは少しでもお役に立てれば幸いです。

トラックバック

このエントリのトラックバックURL:
http://gltmatrix.com/trackback.php/ptbooksr2prodlog

サイト管理者はコメントに関する責任を負いません。