★ゆいスクリプト-チェック

2013/01/31

やっとブログページ作ったぁぁあぁ( ´ ▽ ` )ノ

Category:[つぶやき(未分類)]

というわけで。
いやもう、ほんと大変でしたw

前回、ゲームの党抜けたとかなんとか書いてから後、結局、
ゲームの方は放置してしまい、(←ホント気まぐれすぎw)
今度は、サイトの方のブログシステム制作に奮闘してましたwww

つか、そもそもアタシ長文なんでw トップページにあるチマッとした日記じゃ
ギュウギュウの字詰めになっちまうんで、いい加減ちゃんとしたブログページ
立てたほうがいいだろ...とかマジで思いましてw

...しかし、それを決心するまでが大変w
とゆーか、ソース提供元様からブログのPHPスクリプト頂いてきて、
それを設置するだけならものの数分で終わるんですがね...
アタシの場合、デザイン拘るんで、デザインいじくり始めるとめっちゃ徹底するし、
しまいには、こうしたいああしたいのワガママ通すべく、ソースまで調べまくったり...
更に、数年前にネトアサイトでブイブイ言わせてた頃とは違って、
web制作の方面も相当進化してて、当時のアタシの知識ではもう何がなにやら。
CSSでさえも昔よりすごい事にはなってるし(忘れてるのもあるけど)意味が解らずw
だからこそやりだすと「ナニコレどーやんの」 といいつつ、また独学兼ねて
徹底的にやっちまうという流れになるのは目に見えてたw

恐らくそれを始めれば、数日感オタクになって、徹底してとりかかるであろう
ってのが解ってたので、相当な覚悟が必要なわけですw
...でもまぁ、ブログの方は大体5日間程で出来ましたw
しかしそこで火がつき、ブログ記事をトップにRSSで表示して
自動更新されるシステムにしたいなーとか思いはじめちまって、
今度は、そっち手出し始め・・・(でも想定範囲内w)
挙句、トップページのソースまで書き直しはじめたと言うw
つか、一見デザインは前とはなんら変化ないと思いますがw
「今の時代」に合わせて、ソース全て書き直し始めたって事w

ちなみにトップは以前はフレームセットで分割して使ってました。
ですが、フレームももう時代的に色々とアレらしいのでw 
(まー、インラインフレームは今も使ってるけどw)
今度は、同じデザインでも、テーブルタグ使って擬似フレーム的に
見せるような形でソース書き直し始めたってわけです・・・。

しかし、ホントは、オールCSSでやりたかったんだけど・・・
でもCSSだと、2カラムレイアウトはうまくいくんだけど、3カラムとなると
複雑になってきて、フロート3つ目BOXが行方不明になったり、
いきなしBOXぶっつぶれたりして、どーもうまくいかんというか、わけわからんw
そもそも、高さとか幅指定の解釈もなんかよくわかんなかったw

....で、メンドクサイので、テーブルでいいやと妥協w
(後日、3カラムレイアウトの作り方もネットで見つけたんですが、もう作ったからいいやw)


更に、今までずーっと古い知識のままだったので、今までは、
HTMLソースは全て!DOCTYPE宣言なんかしないで書いてたw
というか、今更ですが、DOCTYPE宣言って何よ?ってな状態でしたw
(独学なんで自分が必要な事以外は抜けまくっていると言う↑)
つか、HTMLもさ〜、Xとかつくとなんなのよ、5ってどんなんよ、みたいなw

...もうね、あれね。
この際、HTML基礎からキチンと見直したほうがいいだろみたいなw

けど何分それで食ってるわけじゃないし、そんなんしてたら時間いくらあっても足りないw
まずは、必要な部分からという事で、とりあえず、
DOCTYPE宣言とかいうのネットで色々読んで意味を把握しまして。
...で、結論的には、なるべく標準表示させて見せたいわぁ(-▽-)フフフ
という事で、ちゃんと内容に合わせた宣言をして書くように・・・w

でも、宣言入れた途端、CSSだのタグの表示解釈も
全部変わってしまい、余計わけわかんなり・・・
そこからまた独学し始め、もうしっちゃかめっちゃかに。

特に、高さ100%の解釈がようわらんくなった。
高さ100%の解釈が今までとは違うようで、ここで随分引っかかって苦労したわ^^;

とにかく、今までのフレームセット使ってたデザインの再現をするという事で、
まずは、テーブルで3カラム的レイアウト作り・・・そして、真ん中にあたるセルも、
上部メニュー部分のセルと、その下のメイン表示部分のセルで分けまして、
メイン表示には、インラインフレームを利用し、その部分にだけスクロールバーを出す・・・
という事したかったんですが....

その上で、全体表示を縦100%指定
(HTMLからBODYから全ての親要素に対して数値指定していくわけですが)
する部分で引っかかり、相当な時間をとられた問題発生・・・。
要は、DOCTYPE宣言(辞書有り)すると、高さ解釈が変わってしまうので、
なぜか画面下の方がブラウザに隠れてしまい(はみ出ている?)、
スクロールバーも隠れてしまって、下の方の内容が読めなくなってしまうという結果に・・・。

...どゆこと?
と、さんざん悩みましたが、どーもDOCTYPE宣言(辞書有り)だと、
インラインフレーム部分の高さ100%と解釈して表示するんではなく、
テーブル全体の高さの100%から解釈してるらしく・・・
インラインフレームをDIVで囲んで指定しても同じ結果でした^^;

つまり、つまり上部セル(メニューの部分)の高さ指定しているピクセル数値分、
内容物が、ブラウザの画面下まで押し出されていてちゃんと表示されなくなり、
そこにあるインラインフレーム部分のスクロールでは、内容がスクロールしきれなくなってしまった。

ちなみに、トップページのバックにしてある写真は、
スクロールしても動かないように固定してあるのですが、
DOCTYPE宣言(辞書有り)すると、その写真が、
上部セルで指定してある数値分、下にガクッとズレて、
3/1ほど隠れて表示される事で気がついたんですが。

で...
どうにか、メニュー部分の高さ数値分だけ、全体の高さから差し引く方法はないものかと、
さんざん調べたんですが・・・100%指定してる上では無理があるようでw
ただ、辞書なしの!DOCTYPE宣言(互換表示)にすると
思ったとおりにちゃんと反映されるんですよ・・・。

だけど、どーしても標準表示させて思い通りにしたい・・・というワガママw

それでネットでさんざん調べたんですが....
けど、やはりアタシと同じく、高さ100%指定の部分で引っかかってる人達結構いたw
ただ、私のように「部分的に高さ100%表示でそこにスクロールバー」
というデザインにしたいという同じ例の方は見当たらなく...

まぁ、JAVA使うとかいう方法はありましたが、JAVAは嫌・・・というワガママw

そんなこんなで、さんざん考えて調べましたがわかんないので、
もう標準表示諦めようかと何度も挫折しかけたのですが。。。

....でも、ある日、寝てる時に方法を思いついたのですわ!!!(寝てる時にってw)

メニューの高さのピクセル数値分を、
テーブルのMARGIN-BOTTOM指定で差し引いて(?ズラして)
やればいいんじゃねぇか?!とw

...で、それやったら....ぉおおぉぉおお、出来きましたぁぁぁぁぁ!( ´ ▽ ` )ノ

つか、その瞬間、思わず部屋で一人でパチィーン!!!!!とか柏手打って、
「うっしゃぁぁぁ!キタァァァァ!」
とマジで叫んでましたわぁ(-▽-)フフフ


ただ、それって無理やり的なやり方のような気がするし、
何分知識もまだまだ浅いので、ブラウザにより正しく表示されてるのかは、よく解りませんww
キチンと表示されてなければ、恐らく見てる人からは、メインの部分の内容が
ガクッとズレてレイアウト大幅に崩れ表示されてる可能性がw

...でももう疲れたからとりあえず言われるまではこれでいいや...w
だってそこで引っかかって4日間も悩んで時間潰しちゃったしw

...もうメンドクサイw 許してw

っていうか、誰か解る人、ソースかいてぇぇぇw
みらい、意味わかんない〜(-▽-)
 (↑こういう時だけ女になるやつw
  つかこういう女の手法、今の時代あんま通用しないとも言うがw)

...まぁ、とにかくそんなこんなで、大変でしたがw
とりあえず、ブログ新設したので、今後はサボらず色々書いていこうと思いますw
(という予定は未定www)

posted at 2013/01/31 18:09:26 | lastupdate at 2014/08/01 23:10:08

 


☆ハート Blog Top ☆ハート
◆みらいさしん

☆ハート みらい☆プロフィール(別窓)
☆ハート みらい☆人生経歴-読み物(別窓)
☆ハート みらい☆Web History(別窓)

ご注意
当ブログは、自身の価値観と主観で自由につぶやく場として独自開設している非商用の個人サイトです。
自身の出来事や問題から様々な事を考察している為、中には個人的な人間関係によるものや勝手に分析や指摘をしている記事もあります。(※個人に関しては全て仮名を使用しており特定不能な範囲としてます)
その為、ストレートな表現も含まれる事をご了承頂くと共に、閲覧についてはあくまで個人の判断の元にお願いしますw



pplog2 by Rocomotion/スクリプト配布元

素材-CANDIED 素材-ヒバナ
★みらい@うぇぶ
Design arrange and picture MIRAI

▲ Page Top