小粋空間: Highslide JS でサムネイル画像を拡大表示する
サムネイル画像をクールに拡大表示する Highslide JS を利用する方法を紹介します。内容は Movable Type をサンプルにしていますが、他のブログ等でも応用できると思います。 WordPress ではプラグイン WPJ-Highslide 0.2 が利用できるみたいです。 とりあえず下記のサンプル画像をクリックしてください。拡大表示された画像の上でクリックすると元に戻ります。 拡大ツールでは、当サイトでも紹介している Lightbox JS が有名ですが、この Highslide JS は下記の特徴があります。 拡大画像の下にキャプション（タイトル）の挿入が可能 ウィンドウサイズに収まるように拡大（右下のアイコンをクリックすると 100% 表示） 拡大画像のドラッグが可能 以下、カスタマイズ方法です。ここではダウンロード時のバージョン 2.2.74.0.6 で話を進めます。
小粋空間: Internet Explorer 6 と Internet Explorer 7 を共存させる
はてなブックマーク経由で「IE6 と IE7 の共存はできませんか？」という類の質問をいくつか頂きまして、ネットを検索してみたところ、簡単に共存できる方法が書かれたサイト（下記）をみつけましたので、本エントリーにて IE6 と IE7 を共存する方法をご紹介します。 Tredosoft：Internet Explorer 7 running side by side with IE6. (standalone) 「共存」というのはやや誇張した表現ですが、IE7 Standalone 版を本来の IE のインストールフォルダとは異なるフォルダにインストールするというものです。またインストーラを利用するので簡単にインストールできます。アンインストールも可能です。当然ながら対応 OS は Windows XPのみです。 上記のページには2つの方法が紹介されていて、このエントリーでは「インストーラ
小粋空間: RSS フィードにスタイルシート（CSS）を適用する
ブログで配信する RSS/Atom フィード（index.xml や atom.xml）にスタイルシートを適用する方法です。 ブログを始めてちょっと経った頃、このテクニックについての記事を見たことはあったのですが、特にエントリーしていませんでした。今回ご質問を頂きましたので、このエントリーで紹介致します。 １．概要 RSSリーダーが普及した現在、RSS/Atom フィードのリンクをクリックして驚く人は少なくなったのかもしれませんが、ブログ（Movable Type）を始めた頃、ページ右下に表示されている「Syndicate this site」の index.rdf のリンクをクリックすると XML フォーマットの文書が表示され（あるいはダウンロードのダイアログが表示され）、「これは一体何だろう？」と不思議に思ったものです（下）。 このリンクは RSSリーダ／アグリゲータ等が認識するための
Movable Type 検索の全角スペースを半角スペースと同じ振る舞いにする
Movable Type の検索フォームで検索文字列を複数入力して、区切り文字に全角スペース（空白）を使用すると、全角スペースは検索文字として認識され、期待しない結果（おそらく検索結果として何もヒットしない）になってしまいます。 この全角スペースを半角スペースと同じ扱いにするためのカスタマイズを紹介します。 １．IME で全角入力中に半角スペースを入力する 本題からそれますが、Windows の MS-IME で全角文字入力中に半角スペースを挿入したい場合は、「Shift キー + Space キー」で半角スペースを入力することができます。また、IME のプロパティを下記のように変更することで、全角文字入力中に常に半角スペースを入力することができます。 Microsoft Office Online：スペースを全角/半角にする (ナチュラル インプット) デジタルARENA：全角スペースと
複数ブログで Ajax 月送りカレンダーを利用する方法
「Ajax 月送りカレンダー」を複数ブログで利用している場合の変更方法です。 2007.03.20 この方法は元記事に反映しました。 月送りカレンダーは表示月を cookie で保存することで、リロードや次回のブラウザ起動時に前回と同じ月を表示するようにしていますが、複数ブログで利用した場合、同じ cookie データ（=カレンダーの表示年月）にアクセスしてしまうため、一方のブログがもう一方のブログの表示年月を取得してしまう可能性があります。 仮に、ブログAに2007年3月（のエントリー）があり、ブログBにはその月のエントリーが存在しない場合、ブログBの表示でブログAの「2007年3月」という cookie データを取得した場合、ブログBではカレンダーが正常に表示されないという不具合が生じます。 ということで、とりあえずテーブル型カレンダーで複数ブログに対応するためのカスタマイズを紹介しま
Slider によるフォントサイズ変更でアクセシビリティを向上させる
以前ご紹介した Slider を利用して、ページのフォントサイズを変更するカスタマイズをご紹介します。 下のサンプルをクリックし、ページ左上にある Slider を操作すると、中央カラムおよびサイドバーにある文字のフォントサイズをダイナミックに変更することができます。 Slider は矢印キー・PageUp/PageDown・マウススクロール（これは IE のみ）でも操作可能です。IE より Firefox の方がよりスムーズに動きます。 フォントサイズ変更サンプル ここでは Movable Type 用公開テンプレートを用いて、フォントサイズ変更用 Slider の設定方法をご紹介します。Slider および本カスタマイズはブログツールやテンプレートに依存するものではありませんので、他のブログツールや異なるテンプレートでも利用可能です。 Slider のダウンロード・インストールについて
小粋空間: CSS の after 擬似要素で回り込みを解除する
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。 １．「回り込み」とは 例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト～（略）～回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト （X）HTMLでこのような表示を行う場合、先に出現する要素（ここでは img 要素）に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま
小粋空間: サンプル一覧
サイドメニューの折りたたみ ドラッグ＆ドロップできるサイドメニューの折りたたみ（その2：ブログへの適用） 公開テンプレートのサンプル Movable Type デフォルトテンプレートのサンプル サイドメニューの折りたたみ（v5.0：ゆっくり折りたたむ）サンプル サイドメニューの折りたたみ（Movable Type デフォルトテンプレート用） サンプル サイドメニューの折りたたみマークに画像を使用する サンプル 追記の折りたたみ 個別エントリーの追記の折りたたみ for Serene Bach サンプル カラム背景・背景画像 CSSでサイドバーの背景を最後まで表示する サンプル [サイドバーの背景が最後まで表示されない] [サイドバーの背景が最後まで表示される] 背景画像を固定する サンプル [固定レイアウト] [リキッドレイアウト] 中央カラムとサイドバーで異なる背景画像を表示する 中央カ
新着表示プラグイン（サブカテゴリーリスト版） for Serene Bach
現在配布中の「カテゴリーのプルダウン化プラグイン for Serene Bach」を改造して、新着エントリーのあるカテゴリーに「New!!」というテキストや画像を表示するプラグインを作成しました（スクリーンショットは完成イメージ）。これは Movable Type のカスタマイズですでに公開している「新着エントリーのあるカテゴリーに New マークをつける」を参考に Serene Bach に適用したものです。 本プラグインを適用し、ベースHTMLテンプレートに追加するスクリプトに「エントリー投稿後 n 時間以内」という指定を行うことで、該当するエントリーのあるカテゴリーに任意のテキスト（または画像）を表示することができます。 Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作を確認しています。 動作の仕組みは、プラグインを用いて、カテゴリーリストの各カ
CSS+JavaScript によるカラムレイアウト切り替え
公開テンプレート（Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ）でカラムレイアウトをリアルタイムに切り替えるカスタマイズです。ここでは公開テンプレートをサンプルに説明していますが、同様の構造であればどのようなテンプレートでも実現可能です。 とりあえず、どのような動作になるかをサンプルでお試しください（中央上部のプルダウンメニューで操作できます）。 以前、類似の記事でスタイルシート切替や3カラム可変と3カラム固定を切り替えるをエントリーしていますが、これらはいずれもスタイルシートを新たに追加する必要がありました。つまり「スタイルシートを切り替える」というカスタマイズでした。 今回のカスタマイズでは、スタイルシートの追加や切り替えなしにレイアウトを切り替えることができます。 その理由は、現在公開しているテンプレートでは1つのスタイルシートに 3カラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
