goods and life +

ちょっといまからテストを行います パートII

ちょっと今からテストなどを行います。(終わりました、無事成功)
昨日やろうとしてましたが、なんと寝落ちしちゃいました…

やった事

メインは Tom さんが前に書いていたサイドバーカスタマイズの仕上げというところ。
JavaScript(ジャバスクリプト)で、項目ごとに違う見た目にします、ってことは項目ごとに CSS を書けるようになる。
そうすると、たぶんサイドバーのどこか任意の項目のところだけ違う装飾がおこなえるようになるのかも~って。
実はこれ、前にもチャレンジして玉砕、ほんのちょい前もチャレンジして玉砕してました。

inali はおーとえすさんのところの ファンブログのテンプレートを作ってみた第2弾[緑] のサイドカラムのピコピコ動くやつを、「最新コメント」の項目のところでやってみたかったので、そのためには項目ごとに独立した CSS を書けるようにしておく必要がありましたので、2度の玉砕にめげずまたチャレンジしてみました。

結果

今回、Tom さんにいただいたヒントにより、’value’:’ほげほげ’,’name’:’hogehoge’ は #hogehoge(id)、hogehoge プラス _body だ、つまり Valueが「ほげほげ」の要素のタイトルのidは ‘hogehoge’ になって、その項目の各リンクが「hogehoge_body」で、hogehogeに「_body」が付くんだってことがわかりました。

で、あと「 , 」とかを書き忘れたりしちゃダメじゃん、…ということなどが判明、今回は項目ごとに CSS を書けるところまでなんとかこぎつけることが出来ました!

→記述は正確に、文字化けにも注意。

fanblogsが charset=Shift_JIS なので、日本語(Shift JIS) HTML 用に設定したテキストエディタにバックアップ用の fanblogs の HTMLソースをコピペしていて、そこに後からスクリプトを追加でコピペして、その書類を再度開いた時、バックスラッシュなどが文字化けしていたり、空白スペースに &160;&160;&160; が入ってしまうことがありましたので、環境によってはその辺りもチェックが必要かもしれないです。

わかったことと新たな問題点

しかしやってみたらわかったんですけど、サイドカラムのピコピコ動くやつ、あれは右カラムだからかわいかったっんです。
右カラムってことは、普通は中の文字は中央揃えか左寄せで、それがさらに左側に動くからこそ、ピコピコかわいい動きに見えるんだな~って。

あと、これをやると fanblogs でコメントを記入しようとしたとき、自分が fanblogs にログインしていてもコメント欄のところの「名前: Email: URL:」が空白のテキストエリアの窓になっちゃって、自動的に inali とか http://fanblogs.jp/andgoods/portal とかが表示されなくなりました。
(この部分はなぜか前からちょっと不安定で、自分が fanblogs にログインしている時にはだいたい安定して表示が出ていました。)→解決しました

それと、テキストエリアに入力し、同時にクッキーに保存のチェックボックスにチェックを入れてコメントを送った後に、別のコメントを書こうとしたらまた空白のテキストエリアの窓になってしましいます。
ん~、なんでだろ?→解決しました

それから、Tomさんのところでも「ポータル画面でのみこのスタイルが適用されません。」って書いてある通り、ポータルのページではなぜかサイドバーの CSS がすべてスルーされて、テキストだけになってしまいます。

よく調べてみると、portalのページでは
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>で

その他のページでは
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ id=”categories_body”> になっています。

portal のページで id=”categories_body” がなぜか付与されないため、portalのページを表示させた時は、項目ごとに設定したCSSを反映させることが出来ません。
inali では原因も対処法もわからないです…。
→未解決です

もうひとつ、ついさっき「この記事へのコメント」のところから、みかんさんに返信したんですけど、そのときに絵文字の顔のところをクリックし、絵文字の一覧からどれを選んでもまったく反応がなくて、記述中にも絵文字が出せなくなっちゃったようです。
でも、「この記事へのコメント」のところでは絵文字が書けないんですけど、この記事中では絵文字は普通に選べて書けています。→解決しました

ん~、なんでだろ ( ´・ω・)?→ (*゜▽゜*)b

解決方法は head にある js の並ぶ順番を変えただけです。
<head> の中を見て、もし他に window.onload を使っているものがあれば <head> の中の window.onload の中にソース部分を貼り付けるという旨の注意書きがあり、inali のとこの <head> の場合は中を見てもそれは見当たらなかったのですが、でもなんとなく window.onload が怪しい気がして Tom さんのスクリプトを js の一番上に入れたところ、すべて解決できました。

URL :
TRACKBACK URL :

  • コメント ( 5 )
  • トラックバック ( 0 )
  1. 1点自己解決できました。
    絵文字が書けない、って書きかましたが、よく見ると小文字~絵文字までのすべてが反応していませんでした。
    それから、(ここにプレビューが表示さえます)ってのが表示されていなくて、テキストエリアに書いたものも下に反映されませんでした。

    ソースに書きミスなどがあるのか調べても見当たらなかったので、要素の名前をCSSのidの名前をセットで変えたりしたのですが症状変わらず、最後にheadのjsの順番を一番上に変えたところ、絵文字などの件はなんとか正常に戻りました

    それと同時に、fanblogsにログインしている時、
    名前: inali
    Email:
    URL: http://fanblogs.jp/andgoods/profile
    が自動で表示できるように戻っていました、お騒がせいたしました。。

  2. こんにちは

    かわいらしいサイトですね。

    私もTOMさんとこでやってみましたが

    撃沈

    なかなか、としいくときびしい。

  3. えー、himamiさん、としいくとて、まだまだ若いじゃないですか
    fanblogsも、いろいろ工夫して見やすくできたらきっと人の役に立つものになる(かもしれない)ですし、出来る範囲の小技を集めたらきっとそれなりのものができると思いますよ~♪

  4. サイドのマウスオーバー、素敵になりましたね!

    Webアクセシビリティ―情報ありがとうございます。
    私も気にはなっていたのですが、具体的な方法が分からなかったので
    ツール、とっても助かりました。

  5. かこさん、おはようおございます。
    サイドのCSS、なんとか項目ごとに設定できるようになった~♪

    ColorSelectorのスポイト、けっこう便利でしょ?
    ○とか×で一般から第三色覚まで判定結果も同時に右に表示されますし。
    でもあんまり厳密にやることもないかと思います。

    色覚異常の人用のコントラスト設定はパソコンの画面の環境設定でOSが用意しているはずで、それを利用している人が多いと思います。

この記事にコメントする

Return Top