xegraphics

Comments

Take13S | 2006/08/23 03:56 PM

お久しぶりです。
元「ST Graphics」の Takekawa (Take13Sにハンドルネーム微変更)
です。

プルダウンメニューの件。
プルダウン（メニューボックス表示）しますが、肝心のメニュー内
のリンクをクリックできません。
具体的には、
ボックス内へカーソルを移動しようとすると、ボックスが消えてし
まいます。
親カテゴリー（例.Gallery）のみアクセスできます。

Javascript エラー発生。
CSS にもエラーがあります。

CSSエラー：
プルダウンと直接関係ない部分かも知れませんが、直すべき部分
---------------------------------------
nomal → normal
align → text-align
widht → width
---------------------------------------

Javascriptエラー:
Opera9エラーコンソールでエラー箇所が表示されてますが、原因は
わかりません。（IE6同様）
どこのスクリプトを利用されたのでしょう？

Syntax error while loading: line 8 of linked script at http:
//www.xegraphics.net/tree.js :
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i

----------------------------------------
その他：
IE6で、レイアウト崩れ。
右「RECENT GALLERY」以下が下にずれて落ち込んでいる。

Take13S | 2006/08/23 04:16 PM

2度書込みすみません・・・
＞align → text-align
は、class「.gallerythm」の align です。
(意図されたスタイル記述が、「text-align:left;」なのか、「float:left」なのかはわかりませんが。）

み | 2006/08/23 08:17 PM

すいません〜
なんかwindowsいじってたらIE起動できなくなっちゃいまして確認できません（アホか
覚えてる限りではtake135さんと同じ症状です。
あと、オリジナルページのキャラのケンイチさんとコーネリアさんもRECENT GALLERYと同様下にずれ込んでいました。

参考になれば幸いです。

shu-shu | 2006/08/23 10:58 PM

take13Sさん(こちらのHNでよろしいですか?)
お久しぶりです。
またまた(もう何回目になるでしょう)
お世話になります。

症状は皆同じようですね。
親カテゴリーのみアクセス〜は救済処置として慌ててリンク付けました。でもこれでは不足ですね。

CSSご指摘ありがとうございます。normalは他のプルダウンメニュー試している時に気づきましたが訂正してませんでした。
一応訂正してありますが直ってますか?

javascriptエラー〜tree.jsということは…
JUGEMカスタマイズ講座のツリー化スクリプトVer.2です。
アドレス→nz.jugemers.net/log/eid31.html
別ファイルにしたのが原因だったりして…

プルダウンはwinIEで動作確認している方のものを試してみようと思います。
今のはどこのスクリプトか忘れてしまいました。macではないと思うのですが…

レイアウト崩れについては今のところ解決策がないのでインターネット廻って対策考えたいと思います。

shu-shu | 2006/08/23 11:07 PM

みさん
再びありがとうございます。
ていうかパソ大丈夫ですか!?

オリジナルページについてはmacIEとおそらく同じ症状…
利用者の多いwinIEでまともな表示になるようインターネットで調べてみようと思います。

Take13S | 2006/08/24 12:55 AM

CSS のエラー直ってますね。（確認しました）
Mac 版 Firefox が使えるのでしたら、Webページを作るとき、あるいはその後でも、Firefox でページを開いてみて、「ツール」→「Javascript コンソール」を開いてみてください。
Javascriptエラーのみならず、css のエラーをも行番号付で指摘してくれます。（Win 版と同様かどうかわかりませんが、とても便利で助けになります）
マイナーと呼ばれることがある Opera 愛用者ですが、同様の機能があります。

あと、Web ページを作るのに役立つのが、「Validator」サイト。何もかも「Valid！」になる必要はないのですが、「ブラウザコンソール」同様にエラー箇所やミスを見つけるのに役立ちます。
URL→validator.w3.org や
URL→jigsaw.w3.org/css-validator/validator-uri.html
その他、ページの表示確認には、
URL→browsershots.org/
（混んでるときは、確認できるまで1時間以上かかったりするのであまり公に教えたくないのですが、助けになるでしょうから記しておく、既にご存知かも・・）
主要ブラウザ、IE6、IE7、Firefox、Safari、Opera、Netscapeなど自分で確認したいブラウザを選択して、スクリーンショットを撮ってくれます。（2回ほど利用した記憶が・・）

レイアウト崩れ：
ボックスの幅の解釈が問題となること多し。参考になるかどうかわかりませんが、私がいつも利用しているCSSハック技。（Mac版IEを意識して使ってるのではなく、ボックスをきっちり作りたいがために利用）
URL→jugem.jp/manual/manual.php?mode=css04
項目の4番目。
IEでfloatボックスの margin が2倍になるバグ回避方法。（display:inline;）で解決
URL→positioniseverything.net/explorer/doubled-margin.html

Javascript、CSS以上に頭痛い（tree.js 見てクラッとしました）ので、あまり考えたくないのですが、プルダウンメニュー、自サイト「ST Winds」のデザインやカラーを考えながら、無難なもの（あまりscriptに依存しないもの）をサーバーにアップしてお遊びテストしてみたい。（プルダウンを使うほど、私にはたくさん選択メニューがないので、無用の長物ですが、おいおい何かの役にたつでしょう・・・）

Take13S | 2006/08/24 10:13 PM

唐突ですが、なんとなく原因がわかったような気がします。
（プルダウンボックスがIEで消えてしまう原因）
他のブラウザでは、class="mainmenu"ボックスとclass="submenu"ボックスが上下でしっかり隙間なく隣あっているのに、IEでは 2px ほど上下で隙間が生じてます。
小さな隙間があるだけで、上下のボックス間でカーソル移動ができなくなります。隠れていたボックスを表示させ続けるには、カーソルがボックスにしっかり乗ることが必要です。

応急的な試し処置として、スタイルシートファイルの、
「.submenu」の中の
top:20px; を top:18px; に値を下げて変更するか、

left: 0px;
top: 20px;
という座標位置指定を消して、
margin-top: 20px;　←（あるいは 18px に）
margin-left: 0px;
を変わりに入れる。（Macで見た場合のボックスの重なりが変になるかも知れませんが・・・）

プルダウンメニューを試験的に作りながら、わかったことです。（上記処置をして事態が悪化したらごめんなさい）

shu-shu | 2006/08/25 12:16 PM

Take13Sさんありがとうございます。
プルダウン、最初の
"top:20px; を top:18px; に値を下げて変更する"
を試してみました。
どう映っているでしょうか?

レイアウト崩れについてはよくわからなかったので
後でゆっくり試したいと思います。

Take13S | 2006/08/25 02:27 PM

プルダウン・ボックスへカーソルを移動できるようになり、ちゃんとプルダウン・メニュー内のリンクをクリックしてページへ飛べます。（IE で確認しました）
（隙間がなくなったことで、以前のようにボックスが消えてしまうことがなくなりました。）

＞どう映っているでしょうか?
IEでみたところ、値を 20px から 18px へ少なくしたことで、各々のプルダウン・ボックスが下から 1px ほどメニューバーの上に重なっております。IE以外のブラウザ、Firefox、Opera では、2px ほどの重なり具合です。デザイン上、ボックスが親メニュー（ex. ABOUT、GALLERY、ORIGINAL ...）の文字リンクに重なるようなこともなく、色味もグリーン系で統一されてることから、違和感は特にありません。
＞「top:18px;」
無難な値でしょう・・・

とりあえず、プルダウンが機能しなかった問題は解決できたようです。（Viva! 万歳！！）

＞レイアウト崩れについてはよくわからなかった
＞＞右「RECENT GALLERY」以下が下にずれて落ち込んでいる
で、原因がボックスの幅なのでは？と思ったので解決策になればとリンクを紹介いたしました。ブラウザ間でボックス（ex.＜div＞＜/div＞）の解釈が違うので、float させたときに幅が障害となってうまくfloatできないことがよくあります。それに加えて、案外IEってバクが多かったり・・・
参考にして頂ければこれ幸い。

Take13S | 2006/08/26 03:14 PM

唐突その２（tree.js エラーの件）
外部ファイル（別ファイルにした）「tree.js」の
コメントアウト記号「＜！-- // --＞」をはずしてみて下さい。
スクリプト記述の末尾は改行してください。
（外部 js ファイルの場合、htmlページ上に js を記述するのと違って、特にコメントアウトする必要はなかったと思います）

で、このコメントアウト記号をはずしたからといって、エラーが解決されるとは思いませんが、なにか悪さをしているとも考えられます。（エラーがなくならない場合、原因は他にあるのでしょう）
「tree.js」を眺めながら、気がついた点を報告いたしました。

遅れましたが、閉鎖「ST Graphics」のリンクを削除願います。（閉鎖後も長い間リンクを張って頂きありがとう、6月末にあのレンタルサーバーの使用を打ち切ってしまったので、サーバー管理者側でアクセス「Forbidden」となっております）
ちょっと時間かかりすぎですが、新サイト「ST Winds」がちゃんとした形になりましたら、「リンク張って！」とずうずうしく（笑）お願いに参ります。そのときはよろしくお願いします。

それと、今回のプルダウンメニューの件で、試しに作ったプルダウンメニュー（Javascriptにもろに依存・・）がありますので、URLを書いておきますので、見に来てください。時間とお手間とらせますが、Mac環境での確認報告をして頂ければうれしいです。
URL→www.stwinds.com/test01/pulldown/pulldown01.html
URL→www.stwinds.com/test01/pulldown/pulldown02.html

shu-shu | 2006/08/26 11:04 PM

何度もありがとうございます。
tree.jsの件訂正しました。
エラーは特に出ていないと思うのですが
見方がイマイチわからないので自信はないです。。。

レイアウトは1から見直したいので
動作に支障がなければこのまま放置させていただきます。

リンクの件了解しました。
サイト出来上がりましたらご連絡ください♪

プルダウンメニュー拝見しました。
macIE以外は正常に動作しています。
メインメニューが真っ黒でプルダウンが出てきませんでした。
メインメニューのリンクは出来ました。
で、新しいブログ覗いてしまいました。。。
ブログ構成凝ってて楽しかったです。
が、やはりmacIEでは表示が崩れてしまいます。
開発、配布、サポートが終了しているので下手に構わない方が無難かとは思いますが…。内容はちゃんと見られますし。
うちのブログは強制終了で見られません…。
↑これだけはなんとかした方がいいかなと思ってます。
(おそらくjavascriptの付け過ぎが原因ですが)
完成お待ちしています♪

Take13S | 2006/08/27 01:13 PM

やはり、tree.js のエラーはなくなりません。
IE6 and Opera9 でエラーを確認、Firefox ではエラー表示されず・・・謎・・・
コメントアウト記号をはずしたこと自体に間違いはないのですが、それが特に悪さをしていなかったということのようです・・・（当初の報告どおり syntax エラーで、私には知識がない・勉強してないので、もうわかりません）Give Up !
で、このエラーがあるからといって、特に表示崩れや閲覧に支障があるわけではないので、私はもうタッチしません。（プルダウンがうまく機能しなかったことと関係があるのかなと疑ってましたが、やや神経質な私の報告で逆にお騒がせした感もあり・・・）

プルダウン動作確認ありがとうございます。
やったぁ！使えるじゃん！（何かに応用できそうなので Keep !）
＞macIE以外は正常に動作しています。
Mac IE を考慮したページ作り・・・それを使い続けてる Mac ユーザーさんに失礼かもしれないが、もはや考えてません。考えるときっとハゲル・・・
＞開発、配布、サポートが終了しているので下手に構わない方が無難
は〜い！（子供の声で元気に返事）
＞ブログ構成凝ってて楽しかった
ありがとうございます。長期工事中（いつまで工事しとるんじゃ！）のホームページ見ていただけましたか。
最新版 Movable Type のデフォルト・テンプレートからすべてのスタイルを取り除き、骨の状態からマニュアルを見ながら、Movable Type 独自タグの勉強と自分なりの css スタイルを入れていくもんだから、時間ばかりかかる。
構成はほぼ完成・・・あとは、Photoshop で色味や適当なデザインを考えるだけですが、けっこう悩む。
とりあえず、「普通のホームページのようなブログ」そんなことを過去に言っていた記憶がありますが、それにちょっと近づけたかなという感じです。

Take13S | 2006/09/10 05:11 PM

＞IEでレイアウト崩れしてますか?
＞CSSプルダウン上手く機能していると良いのですが…
＞2006.09.10 Sunday 00:10
お疲れ様です。
スクリーンキャプチャー撮りました。参考にしてください。
URL→ www.stwinds.com/test01/xg/xegra_060910.html

shu-shu | 2006/09/12 01:22 AM

お返事遅くなってすみません。。。

キャプチャー参考になりました。
…IE6今までで一番ひどい…
やはりwinは文字が大きく表示されますね〜。
NEW ENTRIESだけでもなんとかしたいところです。

プルダウンは解決策がなかったので結局前のに戻しました。
そしてIEでだめだった理由を1つ思いつきましたので試してみます。
「.mainmenu」に付けていた
「border-bottom: 1px solid #000;」を削ってみました。
で、「.submenu」のtop:18px;をtop:20px;に戻してみました。
お時間があるときで構いませんのでサブメニューが選択出来るか確認お願いします。

これがだめなら「.submenu」をtop:18px;に戻してプルダウンは終わりにしたいと思います。

オリキャラページはまだ手をつけていないので
ゆっくり直したいと思います。

ありがとうございました。

Take13S | 2006/09/12 12:11 PM

＞「border-bottom: 1px solid #000;」を削ってみました。
＞で、「.submenu」のtop:18px;をtop:20px;に戻してみました。
隙間があいて、うまくプルダウンメニュー内にカーソルを移動できなかったところですね。
で、この変更自体に間違いはないと思いますし、IE6で上下隙間なく綺麗に隣接してます。
（デザイン上美しい）
しかし、それでも、IE6では、カーソルを移動する前にプルダウンメニューが消えてしまう・・
（プルダウンメニュー内にカーソルを移動できない）

それで、私の方でもっと早く気づけばよかったのですが、
IE6を対象とした「XHTML仕様のWEBページ」を作る際には気をつけなければならないことがありました。
それは、現時点では「xml宣言文を書かない方がよい」ということです。
ページソースの最上部にありながら、あっさり見落としていたのですが、

<?xml version="1.0" encoding="EUC-JP"?>

この宣言文を書くと IE6 は古いブラウザに対応した「過去互換モード」で動作し、表示などに問題を引き起こすことがあります。私自身記述してません、削除しましょう。

「xml宣言文」を削除したら、以下のようにエンコーディング指示文を＜head＞〜＜/head＞間に追加してください。

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />

で、検証してみた。
ブラウザでアクセスしたxegraphicsトップページのページソースをコピーし、HTMLエディターにペースト。上記修正をソースに行い、エディターからブラウザを呼び出して、少々強引な表示テストをした。（アクセス解析にローカルなアクセス記録が残っていたら、私です・・・）

URL→ www.stwinds.com/test01/xg/xegra_060910.html#pd060912

あくまでWin環境の私のテスト結果ですが、IE6 でもプルダウンは正常に機能しましたので、トップページ（index）を含め、その他全てのページ（テンプレート）で上記修正をしてみてください。この修正によって、プルダウンのみならずオリキャラページの表示崩れも直るかも知れません。直らなければ、Give Up ...

「過去互換モード」に関する参考・・というか、絶対見てもらいたいURL記事
URL→ adp.daa.jp/archives/000265.html
URL→ html.dspt.net/mode.html
URL→ www.lucky-bag.com/archives/2004/11/xml_1.html
URL→ www.animegif.net/tips/html/doctype-html-public.html
URL→ blog.livedoor.jp/cola_papa/archives/7314284.html


＞やはりwinは文字が大きく表示されますね〜。
フォントサイズはユーザーのブラウザ設定によって異なってくると思う。

xegraphics のスタイルシートをあっさり見た限り、小さいフォントサイズが目につきました。たとえば「10px」のフォント。私には小さく、読みづらいと感じるフォントサイズです。したがって作成するWEBページのフォントサイズも「最小」で「12px」に指定します。
ブラウザにも「最小フォントサイズ設定」があります。
身近なブラウザで「Firefox」ですが、「オプション」→「コンテンツ」→「フォントと配色」→「詳細設定」と開いていくと、「最小フォントサイズ」設定「なし〜9〜24」があります。（Macも同じかな？）
私はやはり「12」に設定してます。この設定がスタイルシートの絶対値「10px」を無視してフォントが大きく見えてる・なってる原因。（最小設定をしたら、それ以下にならない）
試しに最小フォントサイズを「なし」に設定しxegraphicsページを開くと、小さいフォントで表示されました。

上の実験をするために、作ったテストページ・・・（テストばかりだな・・・）
URL→ www.stwinds.com/test01/font/font_size_test.html

shu-shu | 2006/09/12 03:38 PM

確認ありがとうございます。
xml宣言文のことは知っていたのですが
(絶対見てもらいたいURL記事の一番上の記事を前に読んでました)
それ以外の方法で何とかならないかと思って悪あがきしてました。
しかし、これ以上テンプレートに時間を割いても仕方ないので
Another HTML-lint gatewayの文法チェックでは減点になりますが(それでも81点)
W3Cの文法チェックでは「This Page Is Valid XHTML 1.1!」をもらえたので妥協しておきます。
…お手数お掛けしました。

文字サイズは見る側の設定に委ねられるということですね。
ということは、やたら字が小さくて読めないサイトとかもこちらのブラウザで最小値を設定しておけばいちいち文字サイズを変えなくても読めるということですね。
いろんなサイトを見て試してみます。

Take13S | 2006/09/13 01:02 AM

＞xml宣言文のことは知っていた〜悪あがき
WinIEのバグの対処方法など、知識としてもっていても、それを自分で確認する方法がなければ、実践しても無味乾燥だし、ご自分で確証が得られないよね。気持ちはわかりますが疲れます・・・（本音）
XHTMLでxml宣言することはどこかで強く推奨されているようですが、ブラウザ環境がある程度のレベルに達してから言ってもらいたい。（バグと付き合ってられないや・・・ボヤキ）

で、プルダウン、IE6できちんと動作してます。（xml宣言の影響がプルダウンで出ていたなんて！）

Validator関連サイト、私はわりと気にする方で、Validもらえるまで頑張ったりする。でも、100点満点取るのも大変だ・・・妥協点は90点ぐらいか・・。最近は、スペルミスの発見に利用。
＞Another HTML-lint gateway
検索で調べる（本人、知らなかったらしい）。試してみようと。

ブラウザの最小フォント設定については、ここでフォントサイズのことが話題に上がらなければ、私も意識しなかったでしょう。そいうことだったのか！とあらためて認識。

shu-shu | 2006/09/13 02:54 PM

確認ありがとうございます。
IE6で動作しているとのことなのでとりあえず一安心ですが
IEが7になったところでよくなるかどうか…。
ブラウザ環境はなんとかしてほしいところです。

Validator関連サイト、今回の件までほとんど気にしていませんでした。
わたしも今はスペルミスの発見に使ってます。
今までスペルミス見つけるのにタグをなめ回すように見ていた自分がバカらしいです。。。

Another HTML-lint gatewayは日本語なので英語がわかれば本家で十分な気もしますが、わたしのように英語に疎い人には重宝するし点数で出してくれるので面白いです。

久々にコメントを頂いてから約20日間…
貴重なお時間を割いていただいて申し訳ないです。
今回のことでまたいろいろ勉強になりました。
本当にありがとうございました!!