その4.5〜教えにならう〜

なぜ、右サイドがとびだしたか。。
右サイド中に</div>が一個、残ってました。
ず〜と眺めてて、気がつきました(汗)

これを取った後、
教え」にならって、やったこと。
●[HTML]
centerの中に、rightとleftの両サイドをいれる
(が〜と、centerの</div>を、contentのおしりから
 rightのおしりへ)
 びおびお、center=contentだと思い込んでました。
 postがFC2ではsubと呼ばれているので、名称が違う
 ということなのかと。。。はずかし!
●[CSS]
contentをつくって、centerにいれてたものを、移動。

  #center {
  position:relative;
  background-color: #FF88FF;
  }

  .content{
  margin-left:215px;
  margin-top: 5px;
  width: 390px;
  height: auto; /* temp */
  font-size:80%;
  padding-bottom:30px;
  border:1px solid #666;
  }

●[CSS]
leftとrightのpositionを書き直す。

  #left {
  position:absolute;
  top:110px;
  left:5px;   ←ーーーcenterの左枠から5px

               relativeとabsoluteの関係
               う〜ん。なんとなくわかる。
               ような。。。
  #right { ちょっと、頭まとめます。
  position: absolute;
  top:110px;
  right:5px;   ←ーーーcenterの右はしから5px

[?] ↑左右のサイドバーのtop:110pxがついてるけども
   これの起点はcontainer になってるような。
   relativeがついたcenterの枠が基準だとすると 
   このtop:110pxっていらないんじゃないかと
   はずすと、下に落ちるし。。
   なぜ、centerの上枠からじゃないんだろう。
   びおの考え方が、変ですか。。(笑)


centerと両サイドにpaddingを入れると、
幅がその分広がって、お互い重なってしまいます (涙)
なんでー?かなあ。
いまは、全部はずしてます。
うう〜。
どうやっても、重なるんだったら、幅を調節しつつ
整頓していきます。

なかなか、頭フル回転でございます。
(もっとまわれ!)

その3.5〜教えにならう〜

お師匠さんに教えていただいたので、さっそく。。
[HTML]
<div class="honbun">
<%topentry_body> <!--本文-->
(略)
</div> <!--sub-->
</div> <!--honbun-->

下のsubの部分まで入れて、くくってみました。

[CSS]
.honbun{
margin-bottom:50px;
}
これで、一記事ごとの空きがでました。(嬉)
ついでに

.sub{
margin-top:30px;
}
テキストとsubの部分も、空けてみました。
これで、書いた終わりに数行入れなくていいなあ〜。へへ。
(今まで手作業していた、びおびお。。。)


それから、昨日、寝ながら考えたこと。

width: 370px;   ←下でpaddingを左右10づつ
           取ったので20減らしている

減らす必要があるのかな。。と思って、
また390に戻しました。多分、画面に変化があったので
そう考えたんだろうけど、今戻してもなんの変化も
ないので。。なんだったんだろう。。
  
Seesaaって、記事にCSSをそのまま書くと
反応しちゃうので、引用を使わなければならなかったです。
FC2はそのままで大丈夫みたいだけど、これから先、
FC2が進化していくとともに、変更されると、こわい!
大丈夫かなあ。(その時がきたら、手作業しなくては。。)

では。明日は、UPできないかもです。おでかけ〜。

その18〜footer〜

HTML最後の「材料」にさしかかりました!(嬉)
「footer」部分です。
<div id="footer">
<p> Copyright (C) 2004 biobio...</p>
</div> <!--/footer-->

お師匠さんの「お手本」を見て、かっこいいと思ったので
footer内にあった
「Powered By <a href="http://blog.fc2.com/">FC2blog」
を、左サイドの下にちょっと、省略して移し、
ここには「Copyright (C) 2004 biobio...」を入れました。
いろんな話によると、これは入れといた方がいいと。。
だって、びおびおの苦労作ですもんね。

左サイドの下に
<ul> Powered By <a href="http://blog.fc2.com/">
FC2blog</a></ul>
<li>でくくると、左端に寄って・がつく
<ul>でくくると、サイド内のセンターにきてるような気がする。
あとで位置をCSSで指定するから、どうでもいいことなのかも。


以上「材料並べ終わり」(やた!)



暗号のようにしかみえなかったHTMLを
すこしでも理解したいと思って、こんな妙なblogを
つくってしまい、途中、ちょと後悔もしました。
ひっそりやっているつもりですが(なんにもなくて恥ずかしいし)
お師匠さんやご同志の方にみっけられ、ご指導をいただき、
最近は、FC2の「ジャンル別コミュニティ 」からも
お客様がいらっしゃって、これはがんばらなければ。。と
新年に向けて、気持ちも新たに思ってます。

今年はお世話になりました!
来年も、餌をつつくにわとりのように
「こつこつ」やっていきます。

さて、たぶん、これからが最難関の「CSS」。
でも、なんだか、うきうきするな。
だって、画面が変わって行くんですよお。(たぶん)
どうするか、考えてます〜。
また、あした!
次のページ