RSS用スタイルシートを適用してみました。

個人的にはもはや気にしなくなっているけど、最初にRSSファイルを見たときは、 確かにこれってソースが表示されちゃってるんじゃないの?と疑ったものだ。 (ぶっちゃけソースの方が何やってるかわかりやすいと思ってしまう時もあるけど…職業病) これはまぁ早い話、『整形前』の表示ということで。 これにスタイルシートを適用させてあげることで、見やすくなる。 さて、どっかに紹介ページがないか…と探したところ、Momomoさんのところに 導入がわかりやすくまとめてあった。 ADP: RSS用のスタイルシート 簡単に言うと、 1) W3CにRSS用CSSのテンプレートファイルがあるのでそれを活用すると楽 2) RSSファイル内に、CSSファイルを利用する宣言を記述する 3) RSSファイルをブラウザで表示できるようにMIMEタイプを設定する と言ったところ。 確かに、RSSファイルがいくら機械のものだと言っても、実体はXMLファイルなのだし ということは様式こそ多少違えどタグを基本にしているわけで、 それに適用するように記述してやれば問題ない、と。 まぁ理屈は分かります。 とはいえ、自分で1から作るのはかなりダルイので、W3Cのファイルをもらってきて加工するのが吉。 それすら面倒なときは、Momomoさん謹製のファイルが先ほどのページにあるので、 それをいただいてきて、適当な場所にそのままアップ。 (ありがとうございます) 次に、そのファイルへのリンクをRSS側に記述。 MovableTypeの場合には、『インデックス・テンプレート』の中の、 CSSに対応させたいテンプレート(例えばRSS 1.0)を開いて、2行目に、

<?xml-stylesheet href=”ファイル” type=”text/css”?>
と記述し、保存→ファイルを再構築でOK。 また、サーバによってはrdfファイルを参照するとダウンロードになってしまうので、 htaccessに以下の記述を追加(index.rdfを表示する参照)
AddType “application/xml; charset=EUC-JP” rdf
(もちろん権限が有れば、httpd.confでも良い) 以上で準備完了。 アクセスしてみると、ほほう。確かに綺麗に見えるようになってるねぇ。 さっきは、『これでも俺は分かる』と言ってたけど(笑)、 この方が遙かにわかりやすい。 欲を言えば、概要(<![CDATA[ … ]]>)のタグが全部そのまま書き出されてるのが気になるけど… 仕方ないね。 CSSは、内容はいじれないわけなので。諦めますか。 (註:CSSファイルではなく、XSLTを使うと実現できるかもしれない…詳しくないので 何が出来るか分からないのだけど) しかし、こうやって見るとぶっちゃけ、 外国のデータサイトみたいに見えるな(笑)

続きを読む

CSS: ロールオーバーメニュー。

CSSでロールオーバーメニューを作ります。 一般的に、マウスのロールオーバーによる画像の切り替えは、JavaScriptを使うのですが、 CSSのアンカー(<a>)の仕様を上手く利用してやれば、 CSSだけで実現可能です。 実際に、このサイトのナビゲーションメニューで使用しています。 このメニューの鍵は、用意する画像にあります。 例えば、このサイトのメニューの場合、青または橙に見えている部分は実は透過です。 透過に見えている部分は、実は背景色と同じ白。 そして、設定しているアンカーで、マウスが重なったときの背景色を変化させています。

CSS抜粋
<style> a:link{background-color:#000066;}  # 通常のリンクの状態 a:visited{background-color:#000066;} a:active{background-color:#ff6600;} a:hover{background-color:#ff6600;}  # マウスがリンクに乗った時の状態 </style>
種明かしをすれば非常に単純なことです。 しかし意外と分からないし、JavaScriptより遙かに簡単。 【応用編】 今回のような疑似文字色変化に加えて、 設定するCSSを、背景色ではなく背景イメージにして、 置く画像をそれに合わせた透明画像(Spacerなど)にしてやれば、 普通の画像によるロールオーバーも可能です。
← マウスを置いてください
コード例
<style> a:link {background:url(https://www.nobodyplace.com/img/icon/diary/54.gif) #000066;border:none;} a:visited {background:url(https://www.nobodyplace.com/img/icon/diary/54.gif) #000066;border:none;} a:hover {background:url(https://www.nobodyplace.com/img/icon/diary/51.gif) #ff6600;border:none;} </style> <a href=””><img src=”http://www.nobodyplace.com/img/spacer.gif” width=14 height=14></a>
これらを利用することで、多少はJavaScriptを減らすことが出来るのではないでしょうか。 (JavaScriptが悪いとは言いませんがユーザを選ぶことも事実なので) もちろん、スイッチが画像以外にある場合や、より複雑な処理が必要な場合は、 CSSでは対処できません。 素直にJavaScriptに頼りましょう。 (個人的はそういう装飾は、避けますけど)

続きを読む

自アクセスのカウント回避

このサイトのアクセス解析は、自作のソフトを使ってるんだが、 意外と重要なのは、自分のアクセスを解析しない、ということ。 一日、多くても40アクセスくらい(blog記事に直接飛んでくるから)だし、 自分が何度もアクセスするとかなりカウントされてしまう。 解析するときに面倒だし。 そういうわけで、自分だと思うアクセスを回避するんだけど、 情報は、USER AGENTとHOSTしかないわけで。 もし、同じ地区の、同じOS&ブラウザを使ってる人であれば、 見分けがつかない。 今まではそれで無理矢理やってきたけど…なかなか難しい。 仕方がないので、こちらのUAをいじることにした。 Donutや、Sleipnirといった、ブラウザだと、設定でUAをいじれる。 要するに、『偽装』ということなのだけど、そこまではやらなくても、 たとえば、最後に自分だとわかる文字を付け足してみれば、 それを手がかりにできる。

例) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0;NOBODY)
実際、これで上手くいってるんだけど… サイトによっては、いじったUAでのアクセスを許してくれないサイトもあるので… まぁその辺はIE他でアクセスするしかないね。 アクセス解析を行ってる他サイトの管理者に、 『こいつ…何やってるんだ?』と思われてるであろうことが 若干恥ずかしいが。まぁいいやね。 というわけで、メモでした。

続きを読む

ブラウザ対応問題:垂直配置に悩む。

お詫びしておかなければいけないんですが。 MUTTER をCSSに切り替えた結果、IE以外のブラウザに対応できなくなってしまいました。無念。 具体的にどこが問題かというと… FireFox/Operaなどで確認すると、 MUTTERのテキストが長い場合に、 ページフッタの上に被さって伸びて行ってしまう…のです。 IEでこれを見て問題がないのは、 中身の大きさによってブロック要素の高さを勝手に変更してしまうという 柔軟だけどある意味お節介すぎる仕様のせいです。 本来、親要素の高さ指定を具体的にしていなければ、 IE以外のブラウザでも高さを調整してくれるんですが、 MUTTER にはそうしたくない理由がありまして… ていうのは、左側の文章は、 文章が短いときのページ内垂直配置をセンターに持ってきたい、そういう希望があるから。 文章自体は改行を含んでいるし、<div>のブロック要素なので vertical-align(垂直配置。HTMLで言うところのvalignだが、インライン要素にしか使えない) は使えない。 となると残る方向は、テーブルを組むしかない。 出来るだけテーブルは使いたくなかったが、この場合は仕方ない… しかし、ここにも問題があり、テーブルを使って垂直配置する場合には、 セルに対して高さの指定が必要。 コレを指定しないと、セルの高さは内容物の高さになってしまい、 垂直配置どころではなくなる。 そしてコレを指定してしまうと、前述のはみ出し問題が発生するわけである。 うーむむむ… このまま放置するのも良いんだけど、気付いちゃった以上気持ち悪い。なんとかしたい。 方向性としては、4つ。 1) 垂直センター配置を諦める。 2) 文章の行数を計算し、PHPで切り替え 3) overflow:scrollを設定する 4) FireFox 対応を諦める 2) の方法はまだ試していないが、改行(¥n)の数で、文章の行数を割り出し、 そこから実際のテキストのおおよその高さを割り出し、 或る一定以上の高さ(はみ出しが発生する高さ)の時はテーブルの高さを指定しない、 それ未満の時は高さをして垂直に配置する。 出来なくはないが…処理が遅くなりそうで嫌だ。 EntryのBodyだけテキストのみで保存している実現は十分可能だが。 3) のoverflowはセルにスクロールバーを付けるというもの。 デフォルトでは、overflow:visibleの為、はみ出して見えてしまうが、 overflow:scrollにしてやれば、はみ出た分はスクロールバーで調整可能…なんだけど… ちょっと見栄え悪いよね、やっぱり。 ヘッダ、フッタとの整合性がイマイチだし。 正直に言うと、垂直配置を諦めてもいいかなぁ…とも思う。 右メニューが長くなってきてしまって、文章が短いときに テキストがページの下の方へ行きがちだからだ。 ウィンドウサイズが小さいと、アクセス時に読めないこともあるかもしれない。 うーん…そうなんだよなぁ… でもその場合、すかすかのテキスト下を何に利用するか、 というのもなかなか考えどころ… ただただ、『意図のない空白』になってしまうのはちょっと。 むむむ……

続きを読む

バージョンの振り方…

きっと正しいやり方は他にあると思うんだけど 人にリリースしてるわけじゃないしいいや、ってんで、 個人的なバージョンの振り方を。 大体いつも、最初の正式版のバージョンは、 『1.00.00』から始まる。 とりあえず使えるようになって運用開始した時点でこのバージョン。 で、リリースしない関係上、事実上β版は存在しないので、 ちょっとした変更や、バグフィクスなんかの場合は、 1.00.00 → 1.00.01 と、一番下を一つあげる。 なにか機能を追加して、うし、働いた、というときは、 1.00.01 → 1.01.00 と二番目の桁を一つあげる(事実上のβ)。 再設計(システムの大きな変更など)や、リファクタリングなんかのあとは、 1.01.00 → 2.00.00 とメジャーアップ。 この仕様のいいところは、自分で働いたな、という気がするところ(笑) 日々調整を続けている場合、バージョンが、3.02.23 といった感じになっていて、 おーなかなか進んできた、などと感慨に耽るコトしきり。 逆に悪いところは、仕様変更が頻繁すぎて、どこで何を足したか、ということがわからず、 万が一致命的な欠陥があった場合、どこまで戻って…というのを探しにくい。 やー…ちゃんとメモしとけよ俺、ということなんですがね… どうせWEBデザイナーの作るプログラムだし、 そこまでの詳細さは求められてないし、何より…ズボラなんでしょうな(苦笑) それほどは、人のソースを開いて精査したりしないので、 他の人がどんなリリースノートを書いてるか、意識してみたことはないけど… 一回調べてみても面白いかもなぁ… それとも何か基準があるのかな?

続きを読む

MUTTER – INDEX

現在、NOBODY:PLACEもCSSへの切り替えを検討中なのですが、 なかなか難しい。 それでも一応形にはなったので報告まで。 【現在のテストバージョン】 index_css.php※ 若干、デザインの相違はありますが、それはまぁそれとして、 ほぼ同じ形にまでできあがってます。 ただ、CSSでは、<div>など ブロック要素内の垂直中央に要素を指定することが出来ないので、 エントリの本文の記述部分は、仕方なくテーブルを使用しました。 1セルなので、アクセシビリティ的にも特に問題はないかな…と。 やれば出来るもんですねぇ…そのうち切り替えます。

続きを読む

CSS – とりあえず作業完了。

まだ公開は出来ないけど、CSSを使って作ってたページがほぼ、完成しました。 一応、WinIE6/Opera7/FireFox/MacIE5.2/Safari1.2 で 確認、出来るハズ… そうは言ってもコレは一つの作業と言うよりは、 自分のウェブデザインの中の一つの流れであって、 いままで思いっきり無視してきた方向へ、 今後一気に流れてく可能性がある…いやむしろ決定、かな。 エンジニア的視点で眺めれば、やはり、 構造と装飾とが分離されてるサイトってのは扱いやすい。 仕事では、大体どちらも中途半端なスキルなんだけど 事実上兼ねてるから、どちらも分かる、 デザイナー的には、一つのファイルで直感的に分かりたいし、 エンジニア的には、修正するべき部分がなるべくわかりやすい方がよい。 もしCSSに習熟してソースから直感できるなら… それはやっぱり分離する方が便利だろうね。 コレは結構、オブジェクト指向に似た感じのような気がする。 PHPにもSmartとか、PEARとかあるけど、それらも含めて、 道具と、処理、という分離の仕方がこれから必要になってくる。 や、本当は何年も前からそう言われ続けてきたんだけど ようやく、認知度が高まってる感じを受ける。 ブラウザの対応も含めて。 今後、仕事でも、NOBODY:PLACEでも、その他のサイトでも、 徐々にその方向に切り替えていくつもり。 仕様、バグが混在してて、本当に混乱するけど(苦笑) コレまでが、IEに頼りっきりの手抜き工事だったってだけだわな。 ひとつの区切り、ということで。

続きを読む

<form>タグ前後の空白を消す

今までこの仕様にどれだけ悩まされてきたことか… apeskin作成、フォームプログラムのデザイン、その他諸々。 もう半ば諦めてて、<form>使うときはtable併用がデフォルトになってました。 そうしたら…うお、コレってCSSで回避できるの?? table使わずにCSSで全て記述、っていっても これだけはどうしようもないだろうなぁ…と思っていたから驚き。 方法は簡単で、<form>に対して、margin:0px;を指定してやるだけ。

form {margin:0px;}
な、なんてことだ…こんなに簡単だったなんて。目鱗。 多分、今日から、関係してるサイト全てで、この設定がされることでしょう。 古いブラウザ(IE3,NS3,4)では回避できないてってそんなこと知るか! tableで挟むのもね、悪くはないんだけど、 どうやらXML的判定では不整合ってことで弾かれちゃうみたい。 (XHTML化なんて面倒すぎてまだやる気ありませんけどね) それに、ソース的に見たって、 囲むべきところをきちんと<form>~</form>で囲まないと、 意味が分からないもんなぁ… つうか、なんでブラウザがこの仕様ほっといてるのか理解に苦しむけど (何か意味があったんだろうか?) 回避できるようになったってことで…一安心。 THANKS!! 【参考】 HTML,CSSバグ&回避法リスト : 2. HTML関連 http://www.keynavi.net/ja/bugh/html.html#_title_2_2

続きを読む

今日の目鱗。【refactoring】

リファクタリング 【refactoring】 読み方:リファクタリング プログラムの振る舞いを変えることなくソースコードを変更すること。 ソフトウェア開発では、ソースコードの作成が進むにつれて、 中途での設計変更やバグフィックスなどでプログラムは冗長で汚いものとなっていくことが多い。 これらの問題点を解決し、将来の仕様変更に柔軟に対応できるよう ソースコードの手直しを行なうことを「リファクタリング」という。
あーなるほど! なんでもかんでも横文字を使うのはPC用語の悪いところでもあるけど でもコレって俺が言いたかったことを実に端的に表現してくれてる。 自分はひとりで開発してるんだけど、 それでもこういうこと、頻繁にあるよね…

続きを読む

CSS – スクロールバーに関する設定に関する注意

IE拡張として、スクロールバーに色を付けられる仕様がありますが、 これをHTML向けと同じように記述しても、MTでは反映されません。 というのも、MTでは厳密に言うとHTMLではなく、XHTML1.0 を採用しており、 XHTMLではモードにより、<body>へのスクロールバーへの指定が無効になってしまいます。 その対策として、対象を<html>へ変更すれば、反映されます(->..:. La Franc .:..: スクロールバー変更)が、 今度は、IE5.5以前のブラウザでは無効になってしまいます。 そのため、確実に設定を反映させるためには、 <body><html>両方への設定が推奨されています。

html{ scrollbar-base-color:#214573; scrollbar-shadow-color:#666666; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#CCCCCC; scrollbar-arrow-color:#ffffff; } body{ scrollbar-base-color:#214573; scrollbar-shadow-color:#666666; scrollbar-darkshadow-color:#999999; scrollbar-highlight-color:#CCCCCC; scrollbar-arrow-color:#ffffff; }
参考:CYBER@GARDEN > CSS Tips > スクロールバーのデザインを変える

続きを読む