« 2006年10月 | メイン | 2006年12月 »
Highslide JS用アトリビュート追加-Movable Type（ムーバルタイプ）埋め込み画像カスタマイズ - WEBデザイン BLOG：より。
このカスタマイズをすることでMovable Type（ムーバルタイプ）で簡単にHighslide JSを使えるようになります。
CMS.pmファイルのコードを変更してというので、もう少しスマートな方法をご提案。IDはMTEntryIDを利用します。
今回動いているのはRightFieldsというMTのプラグインを利用しているのですが、概要や追記、あるいはキーワード欄に拡張子抜きの画像ファイル名を入れれば同様に利用できそうです。PhotoBlogなどではよく使われてきた方法ですね。下記リンク先はまだ正式に公開していないテストページです。デスクトップファクトリー：work。
ちょっと作業フローの関係で癖のあるソースです。汎用性を持たせからと思ったのですが、とりあえずそのままアップしてみます。
BlogPeople 等のリンクリストによる表示の遅延を解消する（その2：Ajax編）：小粋空間より。
BlogPeople やドリコム RSS がサービスとして提供しているリンクリスト。ご自身のページに直接HTMLでリンク集を作成するより、表示件数のカスタマイズやサイトの更新状況がわかる等、大変便利なサービスなので利用されている方はかなり多いと思います。
しかしながら、リンクリストはサーバに一旦アクセスしてから表示される仕組みになっているため、少なからずタイムラグが発生します。
そこで、Ajax（＋cgi）を利用しようというアプローチ。素晴らしい。この方法流行するんじゃないでしょうか。
さっそく101Blogの方に実装。来訪者への見えない心配りですね。
IEの場合、<object>タグにスタイルでサイズを指定しないと見えないので注意が必要です。
XHTMLではiframeタグは禁止されているのでValidにしたい場合はこっちを使ったほうがよいらしいです。
<--[if IE]>
<![endif]-->
を利用したハックなんですが、これは便利そう。少しだけ堂々と利用できそう。まあハックではありますが。
やりたかったんですよね、この企画。
以前「Step by Step」という米国の雑誌がありまして、IllustratorやPhotoshopのノウハウを公開していました。多くの影響をうけたものです。僕自身もMacintosh専門誌の「MACLIFE」などで同様の連載記事を書いたりもしていました。
この101WebDesignが徐々に変わっている様を「Step by Step」でお伝え出来ると面白いなあと。とりあえずスタート :-)
まずは現状のデザインまでの流れ。
MovableTypeはデフォルトのテンプレートやCSSが付属しています。いろいろと学ぶ点が多いので、データは残しておきながらも、まずは思い切ってCSSをリセットします。
MovableTypeのテンプレートで4つほどのCSSを追加。
僕はMovableTypeではCSSの管理名には「■」を、インクルードするファイルには「□」を着けて管理しています。これは結構便利。
リセットCSSはYahoo! UI Library (YUI)をベースに。これで全てのデザインがリセットされます。これでいいのだ。
次にレイアウトCSS。1〜3段組み、右メニューや左メニューなどの基本的な設定を指定します。将来的にはYahoo! UI Libraryに移行したいとは思ってるのですが、今の所MovableTypeのデフォルトデザインをベースに。 フォントCSS（/css/fonts.css）でフォントサイズを調整します。フォントサイズはデフォルトで13px。ただし指定は%です。フォントサイズの指定はここではおこなわずに、フォントCSS（/css/fonts.css）で行います。フォント指定はYUI Fonts CSSを参照。フォントの色指定などもこのCSSで。
ベースCSS（/css/base.css）では、各モジュールなどの共有のCSSを設定します。どうしてもこのCSSは大きくなりすぎるので、将来的には分割した方がいいかなあ。まあ今回はそのままで。
加えて、■カスタムCSS（css/custom.css）を追加。これは各ディレクトリ独自のcssです。
styles-site.cssに、
を追加すれば準備はOK。続いてカスタムCSS（css/custom.css）もリンク。
そして楽しいCSSデザインの道は開かれるのです。
イメージ無しのblockquoteで引用を表示するCSSサンプル - WEBデザイン BLOG:より。
blockquoteでの引用を美しく表示するCSSサンプル:phpspot開発日誌のエントリーを読んでみて、イメージ無しでのblockquoteでの引用を二重引用符で表示するCSSサンプルを紹介してみることに。
「WEBデザイン BLOG」は恥ずかしながら最近知ったのですが、内容もデザインも素晴らしいサイト。思いっきり影響受けました。
blockquoteに関しては僕も長い事悩んでいまして、最近A List Apart: A List ApartのCSSを参考に（……というかほとんどそのまま）利用する事に落ち着いたばかり。こちらはオーソドックスに画像での処理。
一方紹介してくれているひとつは画像ではなく文字を<span></span>でくくる方法ですが、やはりちょっと美しくはないですよね。普通に、
<blockquote><p>引用文</p></blockquote>
で行きたい所。
CSS疑似要素要素（:beforeと:after）を利用するのがやはりいいのかな。IEでは適用されませんけれど、htmlソースをデザインのためにいじるのは最後の手段かなあと思います。インクルードしているヘッダやフッタなどはOKだと思いますけれどね。
MovableTypeには標準で検索機能がついているのですが、どうも最近挙動がおかしいので、思い切って「Google Co-op」を導入する事に。Google Co-opはユーザーが自由に検索エンジンをカスタマイズできるサービス。導入方法は「5分でわかる Google Co-op 導入方法 | WWW WATCH」がとても分かりやすい。
僕の場合は101lab.netというドメインの下に、/blogとか、このページのように/webdesignなどと複数のブログをあたかもひとつのサイトとして運営しているので話は少々やっかい。クロスブログに関しては又後日お話するとして、検索機能に関してはやはりgoogle閣下にお願いするのがいいかなと。
設置方法は上記のWWW WATCHを参照してください。
僕は設置したコードだけ記述。
検索結果のページには、
という感じです。
これらのhtmlソースはgoogle閣下がほとんど作ってくれますので、コピーペースとでOKです。いやあ便利です。
設置された検索ページはこちら（検索ページ）
検索機能をGoogleに変更したこともあり、しっかりとクロールしてもらうためにGoogle Sitemapsを利用します。ついでなので、Google Analyticsなども設置してみる事に。
Google Sitemapsは、MovableTypeのテンプレート作成で
と表記すればOK。出力ファイル名は任意ですが、僕の場合は普通に/sitemap.xmlとしています。その後Google Sitemapsに場所を伝えておきます。実際のコードは「MTEntries」ではなくて「MTMultiBlogEntries」を利用しています。マルチブログ対応に関しては後日追記。プラグインも必要ですし、RSSなどにもからんできますから。
Google Analyticsは出力されたJavaScriptコードを貼付けるだけ。僕の場合はテンプレートで外部ファイル化して、phpでインクルードしています。
見えない所ですが、案外大事な準備です。Google Analyticsに関してはまた後日追記。本買ったんだけどほとんど読んでないや（笑）