Music and other topics

今日も急ぎ足です。すみません。

Music: Alyson AvenueがSapphire Eyesにバンド名を変更
現NightwishのボーカリストAnette Olzonが以前加入していたAlyson Avenueが、Sapphire Eyesというバンド名に変更としたそうです。
Source from: MelodicRock.com (4/21)
Music: Dreamtideの新サイト?
ドイツのメロディックロックバンドDreamtideの新作情報がやっと(?)MelodicRock.comにも掲載されたのですが、その際参照されていたドメインがhttp://www.dream-and-deliver.com/。新オフィシャルなのか、新アルバム紹介ページなのかは機会があれば調べて追記してみます。
Website: Harbotがサービス終了へ
このサイトのホームページにもいる、ハーボットのサービスが7月31日に終わってしまうそうです。Another-HTML Lintさんに頼っていた頃はXHTMLではinvalidだったコードが悩みの種でしたが(問い合わせしたら、「たとえinvalidでも訂正してはいけない」といわれたこともあります)、色々なイベントをみたり、ゲームしたりして楽しかったです。なんとも寂しい限り。
Source: Harbot サービス終了に関するQ&A

WordPressに移行

ブログエンジンをNucleusからWordPressに移行しました。Nucleusは大好きなのですが、アップグレード時に何かとエラーに出くわすことが多いので(私の責任によるところもあるとは思いますが)、ねごろぐでも使っているWordPressに思い切って移しました。Movable Typeと悩んだのですが、個人的な使い易さでWPに決定。Nucleusは別サイトで使う予定。

とりあえず移行したもののまだプラグインなど入れておらず、トラックバックも無効になっています。デザインも含めて、少しずつ手を加えて行きます。

さて、せっかく移行したことだし、またがんばるぞ!

WP初挑戦

以前Negologという主に私が言い放った寝言を記録したサイトを開設したのですが、当時引越しやら何やらで何回か更新したっきりでずっとサボってました。お陰でコメントやトラックはスパムの嵐、削除するのも大変だってことでデータベースごと削除。NucleusというCMSソフトウェアで
更新していたのですが、NucleusはこのBlog’n'Diaryでも使っているし、好きなソフトではあるけれども面倒な部分も結構あったりするので、この際他のブログソフトウェアを使ってみようと考えました。

で、色々調べたりして、最後に候補として挙げたのは結局メジャーなソフトウェア2つ。Movable TypeWordPressです。Movable Typeも一度は使用したことがあるのですが、ライセンスの取得が面倒だし(って、たいした作業は必要ないのですが)、再構築が面倒だったし(新しいバージョンではなくなったらしい)といったイメージが未だにあるので、今回はWordPressに挑戦してみました。

で、せっかくのWP初挑戦なので、インストールからの様子を不定期で載せていこうかと思っています。これからWPを使ってみようかと思っている方やWPってどんなんだろう、と思っている方の参考になれば良いな、なんて思います。

デザイン変更

サイトデザイン変更しました。ローカルでチェックした時には「まあ大丈夫かな」と思っていましたが、それはスウィートな考えで、アップしてみるとあちこち穴だらけ。しかも各ブラウザのサポート状況等を考慮するのが面倒になってしまい、IEFx&OperaではCSSを振り分けて違うデザインにしちゃった。

そんなこんなありましたが、少し直したらマシになってきた気もするのでとりあえず変更を有効にしました。あとはXHTMLで記述しているところを整えてXSLTも作って(当初はPHPで生成しようかと思っていましたが、せっかくXHTMLで記述しているので頑張ってXSLTを作ろうかと考え中)、RDFを生成出来るようにしたいなぁ、と。特に他サイトではRDFを手作業で編集するというそれなりに手間がかかることしちゃっているので、このサイトで実験して生かしたいなぁ、と。

Read the rest of this entry »

HTML崩壊 meltdown.js

Melt Down面白いには面白いけど、有用な使い道は?ときかれても答えるのが難しいものって結構好きだったり。そんなJavaScriptをご紹介。

HTML崩壊meltdown.js – KAZUMiX memo
紹介されているコードをコピーして、崩したいページを開いたらアドレスバーにコピーしたコードを貼り付けして(アドレスを上書きする)、開けばOK。流れるようにサイトの中身が落下。リロードすれば元通り。ただし、ブラウザがクラッシュすることもあるそうなので、利用には注意が必要。

どうやっているのか非常に興味深いけど、とりあえず細かいことは気にせずに楽しんでます。

IEでposition:fixed;

IEでposition:fixedを再現するFixed positioning[to-R]

Fixed positioningはIEで固定配置つまり、position:fixedが利用可能になるjsライブラリです。

CSSでデザインしている時に、例えばメニューを特定の位置に配置して、スクロールしてもその場所を維持したい(固定したい)、というときにposition: fixed;とするとOperaやFirefoxやInternet Explorer7では良いんだけど、IE6以前では実装出来ないので諦めるか、JavaScriptで別途メニューを実装したりすることになる。JavaScriptで別途作るとなると、手間もかかるし、さらにJavaScriptを無効にしている人のためにnoscriptで中にメニューを書かなければ不親切だし、わずかだけどファイルの容量も大きくなってしまう。

そんなときに良さそうなのが頭で紹介記事のあるブログへのリンクを書いてある”Fixed positioning”。head内にと1行加えるだけでIE6以下でもposition: fixed;が有効となる。これならJavaScriptを無効にしていてもnoscriptを書き足さなくてもメニューは固定されないだけできちんと表示されるし、1行加えただけなので容量にも優しい。よく思いつくものだなぁ。

久々に

Todd Plantのサイトがリニューアルされたことに連動して?Milleniumのサイトをリニューアルしてみました。
http://millenium.melodicscape.net/
idやclassに頼りまくっている上にデザインが悪いのと頭の悪い文章が一番の欠点。ブラウザ間の見栄えの相違も激しい。特にIEからだとみれたもんじゃないです。というか、IEにあわせたCSSを書くのが一番大変でした。

それでもアップしたのは気に入った部分もあったからです。IE以外でならみることが出来る右上のサイトマップとかRSS等のアイコン部分とblockquoteとまだ完全に完成とはいえませんが、CSSのみで実装したなんちゃってギャラリー。Fxでみるのが一番綺麗かもしれません。

オンラインCSSエディタ「CSSEZ」

サイトを作成する前にやっておきたい作業といえばまずは、内容を決めること。内容を決めたら、大まかなデザイン。デザインのアウトラインを作ってみるだけでも、CSSだと結構面倒。 そんなときに便利そうなYSIWYG型オンラインCSSデザインツール【CSSEZ】。使い方はただマウスで好きなように選んでいくだけ、と非常に簡単。作成したものはMovable Typeなどのブログのテンプレート形式でもダウンロードが可能。

吐き出されたコードをみてみると、「background: #ffffff;」など気になる人には非常に気になる記述がされていたりしますが、きちんと改行がなされており見やすいのが非常に好印象。作りこんですぐにサイトに反映させるのも良いかと思いますし、自分でやってみたいことがあるけどどう指定したら良いかわからない、という時に参考にするという使い方も出来ますね。

prototype.jsを利用した折りたたみブロック

Accordion v1.0 Demoというサイトでprototype.jsを利用した折りたたみブロックを実現出来るJavaScriptスクリプトが配布されています。「折りたたみメニュー」を実現しているサイトでは様々なネーミングをしていますが、個人的にはこの「アコーディオン」がシンプルかつストレートで気に入りました。縦方向、横方向それぞれのサンプルもあり有用性も高そうなのですが、折りたたみ実現のためだけにclassをあてがうのがどうも気に入らないところ。

が、折りたたみにしたいブロックにもしidで意味付け(という言い方はおかしいですが)してあるなら、それを利用しつつスクリプト内のclass云々の記述のところを書き換えれば何とかなるのかな、との気もします。

CSSをシェイプアップ

Clean CSS – A Resource for Web Designers – Optmize and Format your CSSというサイトでCSSを最適化が出来ます。例えば、margin-top: 5px; margin-right: 3px; margin-bottom: 9px; margin-left: 4px;なんてのがあったとしたら、margin:5px 3px 9px 4px;というように変換してくれます。その際どれだけ容量が減った、とかも表示されてある意味安心感にも浸れます。多分。