遅ればせながら、検索ロボットがCSSファイルをクロールしているという話を聞きつけ、ビックリしました。
先日Yahoo!JAPANがリニューアルし、検索に関するページにXHTMLを取り入れました。リニューアルの内容はもちろんデザインに関してだけでなく、Googleとの提携も解消し、独自のロボット型検索に切り替わりましたよね。せっかく頑張ったのにアレですが、私は正直、あまりの見づらさにYahooを使うのは止めようかと思ってたりして 笑。
で、CSSファイルをクロールしている件。
どうもSEO対策を逆手にとって、キーワードを盛り込んでおきながらdisplay:noneを使って表示させないというスパム対策のようなんですが、これは困ります。デザイン上の問題でdisplay:noneを使っているサイトは多いし、何を隠そうウチもそのひとつ。H1とかH2とかめっちゃ隠してるよ…('A`)。
というわけで応急処置として、display:noneをやめtext-indent:-xxxxという方法に切り替えました。これは大丈夫だと思うんだけど、どうなのかは分かりません。ま、そこまで判別できないとは思うけど。つーかそんな判別ができるなら、スパムなのかデザインなのか判別してほしいよ!……絶対無理っぽいけど。
ただ、display:noneにしろtext-indent:-xxxxにしろ、スタイルシートをオンにした上で画像を非表示にしていると何も表示されないことには変わりなく、これはアクセシビリティを考慮するとかなり宜しくない方法だとは思います。スタイルシート スタイルブックに載っていた方法で、テキストの上に画像を乗せてしまうというものがありました。例えば、
h1 { width:700px; height:50px; }
h1 span { background:url(xxxxx.gif) no-repeat; width:100%; height:100%; }
として、HTMLには
<h1><span></span>見出し</h1>
とすると、見出しという文字の前面にspanタグで指定した背景画像が表示されるというもの。これならば通常ではテキストは見えなくなって、画像を非表示にした時にはきちんとテキストが表示される…らしいのですが、私の環境ではダメでした。なので即却下 笑。
何か良い方法はないものかと、引き続き試行錯誤中です。
[2005年10月14日(金)][XHTML+CSS/MT][トラックバック(0)][コメント(0)]
今回の改装でインデックスをブログと一体化させたんですが、そこでちょっと問題が。
現在のMovableTypeの文字コードはUTF-8が標準になってるので、インデックスページがUTF-8になっちゃったわけです。ブログが完全に別ページになってるならともかく、サイトの一部(つーかトップ)がUTF-8ってすごく嫌。私だけかもしれないけど。
さらにこれも私だけ(MacIE5/9.2.2)かもしれないけど、UTF-8だとスタイルシートのpaddingが縦方向にずれるのです。つまり、div { padding:3px; } となっているのに、見た目は { padding:3px 3px 6px 3px; } みたいになってる。Safariではこんな風にならないから、9版IEのみなのかなーとは思いつつ、インデックスとなるとやっぱ気になるんで。
そこで思い切ってUTF-8からShift-JISへ変更してみました。EUCならともかく何故にShift-JIS?って意見は無しで。単純にShift-JISが好きなのです。
というわけで、忘れないように変更手順をメモっときます。
(1) 管理メニューからデータを書き出し
→ これは結局必要なかったけど、やっぱりバックアップは必須で
(2) 文字コード変換スクリプトをダウンロード+解凍して、mtフォルダ内に「mt-convert-code.cgi」をパーミッション755でアップロード
(3) /mt/mt-convert-code.cgiにアクセスし、上段:デフォルトコード/下段:変更したいコードを選択
→ 今回はUTF-8からShift-JISで上手くいきましたが、ダメな時は上段を「auto」にすると上手くいくかもしれないらしい
(4) mt.cfgの231行目に記述されている文字コードを変更して、FTPでアップロード
→ 231:PublishCharset utf-8
232:# PublishCharset Shift_JIS となっていたので、
231:# PublishCharset utf-8
232:PublishCharset Shift_JIS に書き換えました。
(5) 管理メニューからすべて再構築して完了
拍子抜けするほど簡単にできてビックリしました。や、色々読んでたら、すんなりいかない方が多いみたいだったんで。コメントの文字化けも無かったしラッキーでした。
でもUTF-8以外の文字コードにすると、トラックバック時に文字化けするみたいですね。SixApartでは「仕様です」とか言い切ってた気がするけど、潔くて好感度大だな。うちはトラックバックされるような内容じゃないので一切気にしないで変換しちゃったけどさ…('A`)。
[2005年10月07日(金)][XHTML+CSS/MT][トラックバック(0)][コメント(0)]
今ウェブサイト制作ではSEOとアクセシビリティってやつが問題になってまして。興味ない人にはどうでもいいことですが、簡単に言うと「オイてめーら!どうでもいいからコンピュータに優しいHTMLを書きやがれ!」ってな感じです。(え、どんな感じよそれ…)
もうちょっと真面目に言うと、表示されているHTMLには必要最低限の文章のみが記述されてて、かつ正しいマークアップが行われてて、装飾に関するすべての記述はCSSで行いなさいってことです。つまり厳密に言うと、ソース中にFONTタグがあるだけで駄目ソースってことです。
で、今UPしてあるサイトは結構前に作り出したので、↑のことは全然考慮してなくてですね。もう開き直ってDOCTYPE宣言すら外してしまったという欠陥ソース…す、すまん…。
そんなわけで一生懸命1から製作中です。んなことする前に情報更新しろって感じですけどね!あー。どっかに情報落ちてねーかな。←早くも夏バテ。
話は戻って正しいソースですが。こういう所でチェックすることができます。Another HTML-lint gateway
くれぐれもウチのサイトをチェックしようなどとは思わないように。
こいつがね、まったくとんでもないやつなんですよ!もうオマエ、喧嘩売ってんのかよと。最初の頃はホント頭にきて、「そういうオマエはどうなんだ!」とこのサイト自体のソースをチェックにかけてやった所、このHTMLは100点です。と出やがりました。わ、わたしがわるうございました…ゆるして…。
でも手探りでやりながらもようやく色々分かってきまして。製作中のソースをチェックにかけた所、なんとエラー0の100点が出ました!やったよ!テストで100点取った時よりも嬉しいよ!涙涙。
最近じゃネットサーフしながらも、ただサイトの見た目がいいだけじゃ飽き足らなくなって、ついついソースを覗き見。いくらゴテゴテ飾ってあってもソースが汚いとガッカリしちゃうのです。なんつーか、骨を愛するがあまり、生きてる人間を見る時でさえ「あの人の骨格ってとてもステキなの☆」みたいになっちゃったってヤツですね!※晦ネタ。