CSS で table に斜線を引く方法
CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に position: absolute; を設定。 斜線（border）を適用する要素の前に を設定。 がなかったり、要素の後方に があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t
Safari の Ajax 文字化け対処
「BlogPeople 等のリンクリストによる表示の遅延を解消する（その2：Ajax編）」で「Safari で文字化けします」というご質問を頂き、不具合を修正致しました。 １．問題点 調べたところ、（今更ですが）Safari2.0 では UTF-8 でも Ajax の responseText で文字化けすることを知りました。 WEBプログラミング NOW!：Googleサジェスト--Safariで文字化け XMLHTTPを使った簡単なプログラムでもSafariは日本語が文字化けします。正しくresponseTextを取得できないようです。本来UTF-8で返されているデータなのに、ISO-8859-1として取得しています。そのために文字化けが発生しています。 この問題は日本語が含まれていなければ顕在化しませんが、BlogPeople のリンクリストは当然日本語だらけなので、Safari で
Slider の利用方法
Ajax ライブラリとしてスライダーの API が色々と公開されていますが、それとは関係なく、1年近く前にみつけてエントリーしていなかったWebFX：Slider を紹介したいと思います。 Value: Slider は Mozzila 系ブラウザで動作しなかった、同サイトで公開されていた slidebar を新しく作り直したものです。 なお、WebFX は、国内ではグラフ描画の Chart Usage がブログ等で紹介されています。 １．機能 Slider は下記の機能があります。 スライダーを操作することにより、予め設定した最小値?最大値の値を取得 予め設定したデフォルト値の位置にスライダーハンドルを固定 値の途中変更が可能 スライド方向（縦・横）を指定可能 また マウスサポート（ドラッグだけでなくクリックによる操作も可能） キーボード操作のサポート（矢印キーやPageUp/PageD
追記文章の折りたたみ 2.0 サンプル
Movable Type のオーソドックスなカスタマイズのひとつ、「追記文章の折りたたみ」の Web2.0 版カスタマイズをご紹介します。 １．特徴 JavaScript エフェクトライブラリ script.aculo.us（スクリプタキュラス）を利用し、「続きを読む」リンクをクリックすると追記文章をスライドダウンで表示します。 JavaScript が無効の場合はエントリー・アーカイブにジャンプします。 「続きを隠す」リンクは追記文章の前後に表示されますので、長い追記文章でも折りたたみやすくなっています。 ２．サンプル 追記文章の折りたたみ 2.0 サンプル ３．script.aculo.us のインストール script.aculo.us のページの「get it already!」の下にある「Downloads page」のリンクをクリック。 次のページで「current versi
Lightbox JS の rel 属性を自動付与する
Lightbox JS を起動するには a 要素の rel 属性に "lightbox" を付与しなければならないという条件がありますが、手動で付与するのは結構面倒です。 ということでご質問を頂きましたので、rel 属性を自動付与する（あるいは rel 属性を付与せずに Lightbox を起動する）方法をいくつかご紹介します。 rel 属性なしで Lightbox JS を起動する Movable Type のアンカータグ挿入ボタンに rel 属性を自動付与する Movable Type のアップロード画面からのサムネール画像リンクに rel 属性を自動付与する Serene Bach の画像リンクに rel 属性を自動付与するプラグイン １．rel 属性なしで Lightbox JS を起動する ページ内にある全ての画像リンクに対し、Lightbox JS を起動する方法です。a 要素
小粋空間: Litebox 1.0 をブログに適用する
Lightbox JS v2.0 の後継版、Litebox が出ていました。ということで v2.0 はエントリーし損ないましたが、今回は Litebox をブログに適用するカスタマイズを紹介します。 Lightbox の時代からそうなのですが、このツールは画像を表示するページのパスが変化した場合のケースまで考慮されていません。つまりブログではインデックスページや各アーカイブページのパスがそれぞれ異なることため、提供されているファイルに対し、各ページから同様の振る舞いをさせるための修正が必要になります。 下記に修正を施したサンプルを作りました。トップページと、そこからリンクされている記事ページでも動作するようになっています。 Litebox のブログ適用サンプル サンプルでは Movable Type を利用していますが、他のブログでもカスタマイズのタグ部分を適宜読み替えて頂ければ適用可能と
小粋空間: Movable Type プラグイン一覧
Movable Type 日本語環境でよく利用されていると思われる MovableType プラグインの一覧です。 海外サイトについては Googleで「Movable プラグイン」で検索した結果より、国内サイトは私が把握しているプラグイン作成者のサイトと Google 検索結果から抽出しています。Movable Type Plugins Directory からの抽出は行っていません。 また国内サイトのプラグインの概要は、配布サイトに掲載されている文言を引用させて頂いてます。 2010.05.01 MT5版のプラグイン一覧を公開しました。 2007.09.10 MT4版のプラグイン一覧を公開しました。本エントリーでのMT4版のプラグイン情報追加は終了します。 注意事項 プラグインに関するコメント等の主観的要素は含まないようにしています。プラグインの適用についてはご自身の判断で行ってくださ
小粋空間: 新着エントリーのあるカテゴリーに New マークをつける
「最近のエントリー」の新着エントリーやカテゴリーリスト・サブカテゴリーリストで新着エントリーのあるカテゴリーに「New!!」というテキストや画像を表示するカスタマイズです（スクリーンショットはサブカテゴリーリストの完成イメージ）。 「エントリー投稿後×時間以内」という指定により任意のテキストまたは画像を指定したリストに表示することができます。JavaScript で書きましたのでテンプレートにタグを追加するだけで動作します。また JavaScript OFF の場合は何も表示されないようにしています。Windows2000/XPのIE6.0・Firefox1.0・Opera8.0で動作確認しています。 動作はエントリー（カテゴリーリストは最新1件）の投稿時間をコメントタグで予め埋め込んでおき、CSSで非表示にします。そして JavaScript でその投稿時間を取得し、現在時刻との差を計算
小粋空間: CSSで画像に影をつける（ドロップシャドウ）
CSSを利用して画像に影をつける（ドロップシャドウ）カスタマイズです。ご質問を頂いたのでこちらのエントリーで紹介致します。下のスクリーンショットはドロップシャドウ完成例です。 仕組みは、ドロップシャドウ用の画像を、img タグを括る別のタグの背景画像として指定し、img タグの画像をずらして表示することでドロップシャドウの効果を出すようになっています。 参考にさせて頂いたのは下記のサイトです。ありがとうございました。 1976design.com：Easy CSS drop shadows A List Apart：CSS Drop Shadows nlog(n)：アップロードした画像に影をつけるには POCHIKING*：画像に自動的に影をつけてテキストを回り込ませる 今日の覚え書き：cssの設定で自動的に画像に影を付ける 花と写真とblogと。：画像に影をつけてみる。 最初の1976d
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
