Ads by Google

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • --/--/--(--) --:--:--
  • スポンサー広告
  • comment(-)

    • その7〜blogの内わけ〜

    このblogの中をよ〜くみてみますと。
    bodyの中に
    ＊＜div id="left"＞
    ＊＜div id="right"＞
    ＊＜div id="footer"＞の３つの部屋があるようです。

    まず、解読した＜div id="left"＞のなかには、
    エントリ
    →エントリナンバー
    →ボディ（続きを読むのリンクボタン、続きの本文、コメント、TB）
    →サブ（コメント数、TB数）
    となっているようです。
    エントリナンバーというのは、記事のタイトル部分。
    サブというのは、postのことらしい。

    このテンプレートには
    ＊bannerがない。
    ＊leftとrightの２本立てで、contentがなく、
    　しかも表示が「左右逆」になってる
    ＊footerが設定してある。
    。。。変なこと書いてますが、本家のblogとの中身の違いです。
    オリジナルを残しつつ変えようと思っていましたが、
    「左右逆」というのがなんとも。。
    びおびおが混乱しないように、本家で覚えたように変えていこうと
    思います。（できるかな〜。よけい混乱するかな〜）

    お手本は２列なんだけども、HTML内で３カラムに変更したい。
    それで、left→content（記事を入れるところ）
    　　で、leftに記事やコメント一覧、アーカイブなどをいれて
    　　　　rightにbloglist、minibbsをいれるところ。。
    それから、中身を入れていこうと考えてます。

    最初から３カラムになったテンプレートを使えばよかったやん！
    と言われそうですが、解読するのにHTMLが複雑に感じたんです。
    このdefaultが、シンプルだったので。。

    あと＜div id="right"＞と＜div id="footer"＞は
    追々、解読していきます
  • 2004/11/30(Tue) 09:55:45
  • 材料をならべる（HTML）
  • TB:0
  • comment:4
    • <<その7.5〜blogの内わけ〜 | ホーム | その6〜meta name〜>>

    Thanks Comment ！

    　　

    あさっての方角に行きそう（？）なので、ちょっと補足しておきますね。

    まず、ブラウザのウィンドウが真っ白で開かれたところを想像してください。それが、body
    です。

    ３段組の紙面を想像すると、上の方に
    banner
    があって、左右にサイドバーがありますよね。左側が
    left
    右側が
    right
    とします。当然フッタもあると仮定すると、一番下に
    footer
    があります。

    さて、格好よくセンタリングもしたいと思います（多分、想像しているのはブラウザのウィンドウ中央にある、新聞のような３段組の紙面だと思います）。
    そこで、このままレイアウトしても確かに３段組になるのですが、自分はよくても他人のブラウザのウィンドウサイズ（左右）なんかわかったもんじゃありませんよね。そのためにセンタリングなんですが…。
    そこで、その３段組「紙面」を入れておく入れ物を用意して、その入れ物をセンタリングしておけば楽、という発想になります。これが
    container
    としましょう。すると、最低限必要な「箱」のソースは次のようになります。

    <html>
    <body>

    <div id="container">

    <div id="banner"></div>
    <div id="center"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="footer"></div>

    </div>
    </body>
    </html>

    どうでしょうか？参考になりましたか？
    1. 2004/11/30(Tue) 18:56:59 |
    2. URL |
    3. catkick #qbIq4rIg
    4. [ちょと手直し]
    　　

    わあ〜ありがとうございます。参考になりますです！（嬉）
    「あさって」の方向に行っているのか、どうかもわかってないびおびおです。
    最近、コメントが入ってると、「ひや〜」っと嬉しい緊張が走ります（笑）

    containerの働きは、なんとなくわかっているような感じで、実際どうすればいいのかわかりませんでした。本家を壊すわけにはいかないので、手つかずのままでした。
    部屋だけにすると、すごくわかります。

    このテンプレートのCSSに「レイアウト構成は left の中に right を左側に入れ込んでるという感じ。そのために、left 属性では左に大きくパディングを取ってます。ので、left でも実際は、右側に表示されることになります。」という但し書きがあって、それで左右逆になってるのかなと思い、leftはleft、rightはrightに直して、真ん中に記事がはいるようにしたいと思いました。ややこしいです。

    ＜div id="banner"＞＜/div＞を入れたところなんです。上のを写させていただいて、また出発します。

    1. 2004/11/30(Tue) 21:34:27 |
    2. URL |
    3. びおびお #ZJFCUQBw
    4. [ちょと手直し]
    　　

    ついでですので、最低限の CSS。といっても結構な量が必要になります。
    ※色と高さは便宜上入れてあります。
    左右マージン、padding も、キレイにみせるためだけですが、参考になると思います。

    ---
    body {
    margin:5px auto 5px auto;
    background-color: #FFFAF0;
    text-align: center;
    }

    #container {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    text-align: left;
    width: 820px;

    background-color: #FFFFFF;
    }

    #banner {
    position: relative;
    margin-left:10px;
    margin-top: 10px;
    background-color: #807FFE;
    height: 100px;
    width: 800px;
    }

    #center {
    position: relative;
    margin-left:215px;
    margin-top: 5px;
    width: 390px;
    background-color: #FF88FF;
    height: 200px; /* temp */
    }

    #left {
    position: absolute;
    top:110px;
    left:10px;
    margin-top: 5px;
    width: 200px;
    background-color: #88FFFF;
    height: 100px; /* temp */
    }

    #right {
    position: absolute;
    top:110px;
    right:10px;
    margin-top: 5px;
    width: 200px;
    background-color: #FFFF88;
    height: 100px; /* temp */
    }

    #footer {
    position: relative;
    text-align: center;
    margin-top: 10px;
    background-color: #888888;
    height: 10px;
    }
    1. 2004/12/01(Wed) 02:31:48 |
    2. URL |
    3. catkick #qbIq4rIg
    4. [ちょと手直し]
    　　

    おりょ＝！！びっくりしました。（朝一で）
    もう／／これは。。

    上のHTMLの部屋わりとこのCSSを解読（するまでもないけど）して、写させていただきます！（もちろん初志貫徹で「手打ち」です）
    お手本のテンプレートを解読するより、早く進みそうです。それで、なおかつわかりやすい。

    なんだか、お世話になってばっかりで。。catkickさんに足を向けて寝られませんです。（笑）
    ありがとうございます。
    1. 2004/12/01(Wed) 07:58:59 |
    2. URL |
    3. びおびお #ZJFCUQBw
    4. [ちょと手直し]

    comment:
    biobioのみ、表示を許可する