---

昨日の続きやります。


やることとしては、まず日記システムとの親和性を考えたいですね。昨日はコメントフォームの埋め込みとか言ってましたけど、それよりも先にレイアウトから考えましょう。


えーと、どういうことかっていうと･･････。



日記を直接参照するとこうなってしまうんですね。
しかも最悪なことに、変にbody部分にマージンを作ったせいで、もともとheight:100%でレイアウトしてたためスクロールバーが新たに発生してしまうという問題がでてきます。
これはmarginじゃなくてpaddingとかにしたら解決するんでしょうかね。まぁ、やり方は色々あると思われますが、まず綺麗な位置に置くことができないという問題と、あとPREV,NEXTリンクがどうしても邪魔になるという問題が発生しますね。


こうなってはposition:fixedの実装は諦めて、大人しくflexで作ったほうが良いかも知れません。
というのも、どうやって座標を定めたら良いのかがさっぱりわかりません(笑)いい感じにマージン作ってくれればいいんですけど、たぶん無理げな気がします･･････。
flexであればスクロールバー位置の調整は基本的に要らなさそうな気がしますからね。マージンも調整しやすそうです。
問題らしき問題を挙げるとすれば、DOM構造を書き換える必要に迫られるので、割とめんどくさいことが挙げられますね･･････。


でも、とりあえずやってみましょう。




ま、想定通りの動作ができたわけですね。
サンプルはちょっとプログラム上の事情で消しました。システムにダイレクトに影響を与える部分にしかdiv要素を書き込めなかったので･･････後で消すものだからさあ笑



で、次にこれをトップページでも動くようにするにはどうしたらいいかってのを考えます。



トップページを何故fixedの固定でやったかっていうと、それが一番ラクってのもありますけど、見栄えが非常に宜しいんですよね。
具体的にいうと、スクロールバーの位置ですね。



こうなってしまいます。これは激烈にダサいです。


つまり、トップページはfixedで、日記ログではflexでの実装が無難かなということになりますかね。
考えるべきは条件分岐ですが、特定のIDの要素が存在するかどうかで判定すればよさげですかね。


つまり！！！！！



1.トップページと日記ログで表示させる要素のIDを異なるものにする
2.それぞれに関して条件分岐する
3.共通部分は外部関数から呼び出す(ヘッダファイル)


といったことをすれば実装できそうな気がしますね。





ってことで、すごく簡易的ですが、とりあえず機能面は完成です。(テストは右下のコメント書き込みボタンからどーぞ笑)

ただ、やっぱ不格好だしスクロールが長すぎなので、次回はそのへんのレイアウトを整える作業をしようと思ってます。
アニメーションはやったことないんですけど、付けられそうなら付けてみたいですね･･････。さすがに瞬間表示はなんか違和感を感じる･･････笑


あと、閉じるボタンですね。現状一度開いたら閉じられないんでよろしく(笑)(笑)(笑)


閉じるボタンありますけど、全然関係ないとこから持ってきたんで置物です。機能しません。今日はここまでのつもりだったんで許してください(笑)