img要素でCSS Spriteする方法
「CSS Sprite」は背景画像などの複数の画像ファイルをひとつの画像にまとめて、画像の中から表示させたい部分の座標をbackground-positionプロパティで指定するという手法です。これにより画像ファイルのHTTPリクエスト数を減らすことができます。 この手法は背景画像での利用が一般的なのですが、img要素でも利用することができるようなので、本エントリーで紹介します。 本エントリーでは、次のソーシャルブックマークボタン用の4つの画像を1つにまとめて、CSS Spriteを行ってみます。 背景画像の場合はbackground-positionプロパティでさくっと表示できるのですが、img要素として表示させるのにかなり苦労しました。ということで、コピペで使えそうなサンプルも用意しました。 「そういう場合、背景画像に変更するのが本来では？」というツッコミはなしでお願いします（笑）。
jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説
jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します（2012/01/11頃まで）。 このエントリーで紹介する情報は2011年12月のものです。 １．ThemeRollerへのアクセス方法と全体レイアウト jQuery Mobileのトップページにある「Themes」をクリック。 ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。 冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べるこ
「8.8.8.8,8.8.4.4」より速い「129.250.35.250」
iPhoneのDNSの設定変更が話題になっているようなので、レスポンスの速いDNSサーバがないか調べてみました。便乗記事です。 ネタフル - iPhoneのWiFi接続を高速化する魔法の数字「8.8.8.8,8.8.4.4」 測定ツールはWindows用の「DNS Nameserver Performance Benchmark」です。ツールの詳細は割愛しますが、測定するには下のスクリーンショットの「Nameservers」タグの右側にある「Run Benchmark」をクリックするだけです。 Bフレッツ接続のPCで測定しています。 １．ベンチマーク結果 まずはベンチマーク結果をご覧ください（クリックすればちょっと拡大します）。 測定している値は次の3種類です。それぞのれの意味については「私家版 ITプロフェッショナルの仕事術 - GRCのDNS BenchmarkでDNSをスピードアップ
FacebookのJavaScript SDKがOAuth 2.0サポート
2011年7月22日より、FacebookのJavaScript SDKがOAuth 2.0サポートを開始しました。 Updated JavaScript SDK and OAuth 2.0 Roadmap 以下、上記の記事からの抜粋です。 １．OAuth 2.0の有効化 まず、OAuth 2.0を有効にするには、FB.initにoauthパラメータを追加します。 FB.init({ appId : YOUR_APP_ID, // other parameters, oauth : true }); ２．レスポンスデータ OAuth 2.0を有効にした場合、レスポンスデータのsessionをauthResponseに置き換える必要があります。 sessionの利用 FB.login(function(response) { if (response.session) { console.l
JSONデータをソートする方法
JSONデータをソートする方法を紹介します。 ブラウザやPC環境等に依存するかもしれませんが、FirefoxやGoogle Chromeといった最近のブラウザであれば数千行のデータでも1秒かからない程度でソートして表示されます。すべてのブラウザで確認していないので不具合があったらすいません。 引用サイトは下記です。 How to sort a JSON array ? １．基本 次のようなJSONデータがあると仮定します。 var data = [ {"id":"foo", "number":"2000"}, {"id":"bar", "number":"3000"}, {"id":"hoge" "number":"1000"} ]; JSONデータをソートするには、次のsort_by()関数とsortを組み合わせます。 var sort_by = function(field, reve
FolderLink プラグイン
Movable Type 4 で、ウェブページのフォルダリンクを出力するプラグインを作りました。 フォルダ名に対応するパス（URL）を再帰的に出力します。空のフォルダでも無条件に出力するので、各フォルダには index.html があることが前提です。 上の画面は、「IBM ThinkPad」という製品情報のウェブページが属する、「製品情報」「コンピュータ」「ノートPC」という、階層化されたフォルダを表示した例です。 このプラグインは次の記事を参考にさせて頂きました。ありがとうございました。 Blog | AKINAKANO - ＜MTParentFolders＞を使って、MT4のウェブページにパンくずリストを設置 １．プラグインのダウンロード 下記のリンクからプラグインアーカイブをダウンロードし、任意のフォルダに保存してください。 FolderLink ２．インストール プラグインアーカ
予約変数一覧 for Movable Type 4（その2）
MTIf タグ等でアーカイブ種別を判定するための、Movable Type 4 で予め用意された予約変数一覧です。「予約変数一覧 for Movable Type 4（その1）」でまとめたものは変数に"1"が設定されているものですが、今回は、 archive_class という変数に設定されている文字列をまとめました。 大体お分かりと思いますが、この変数はアーカイブ種別を判定するためのものです。 前回同様、lib/MT/WeblogPublisher.pm に記載されています（使用方法は後述）。 アーカイブ種別変数名 年別datebased-yearly-archive 月別datebased-monthly-archive 週別datebased-weekly-archive 日別datebased-daily-archive ブログ記事entry-archive ウェブページpage-
ブログ記事の画像挿入時に表示位置を指定しないプラグイン
ブログ記事の投稿で、記事内に画像ファイル等を挿入する場合、ファイルの表示位置を指定しないオプションがありません（下）。 このプラグインでは表示位置を指定しないラジオボタンを追加します。 このプラグインは、crema さんの記事を元に作成したものです。 El diario de la diseñadora viviendo en tokio：Movable Type4で画像挿入するときの位置設定とか。 が、やや先に Junnama さんがよりリッチなプラグインを投稿されていました。 Junnama Online (Mirror)：MT4で画像挿入の際にclassやstyleが付くのが嫌! なあなたに。 私の作成したプラグインは簡素なので、style 属性が設定されなくなるだけです。class 属性の設定は残ります。 １．プラグインのダウンロード 下記のリンクより、プラグイン InsertAs
サムネイルリストの表示を変更する for Movable Type 4
Movable Type 4 のデフォルトテンプレートでは、ブログ記事にアップロードした画像のサムネイルの一覧を表示する「Photos」がサイドバーにあります（下）。 ただし、Perlモジュールの Image::Magick がインストールされていない環境では、MTAssetThumbnailURL タグが正常に動作しないようで、「Photos」にサムネイルが表示されません。 レンタルサーバをご利用であればこのような事象に遭遇することはないと思いますが、もし表示されない場合は、モジュールテンプレートの「サイドバー(2カラム)」または「サイドバー(3カラム)」の下記の赤色部分 <MTIf name="main_index"> <MTIfNonZero tag="AssetCount"> <MTAssets type="image" lastn="10"> <MTAssetsHeader> <
Movable Type 4 Beta 3 のインストールウィザードを日本語表示にする方法
Movable Type 4 Beta 3 で日本語対応になりましたが、日本語表示されるのはログインした後からになります。インストールウィザードが日本語でなかったので「あれ？」と思われた方も少なくないのではないでしょうか。 日本語でなければインストールできないという方のために、ウィザードから日本語表示する方法を下記に示します。変更方法は過去記事へのリンクのみに留めておきます。 Movable Type 3.31英語版を日本語環境で利用する 上記の記事にある、MT/MT.pm と mt-check.cgi の変更（行番号は異なります）を行ってからインストールウィザードを実行すれば日本語で表示されます。なお変更に際してはご自身の責任で行ってください。 以下、日本語表示版ウィザードとインストール手順を全て掲載しておきます。英語ではインストールできないという方の参考になれば幸いです。 と書いておき
Movable Type 3.35 日本語版リリースと 3.34 日本語版との差分
Movable Type 3.35 日本語版がリリースされました。 Movable Type 3.35 日本語版の提供を開始 本日より、Movable Type 3.35日本語版 (以下3.35-ja) の提供を開始いたします。 3.35-jaの主な修正点は、3.34以降に発見されたセキュリティ上の不具合への対策と、インストールの簡略化です。 既存のユーザーの皆さまは、アップグレード後に手作業が必要になります。詳細は下記をご参照ください。 同時に Movable Type Enterprise 1.53日本語版もリリースされています。 Movable Type Enterprise 1.53日本語版の提供を開始 １．Movable Type 3.35-ja の変更点 Movable Type 3.34-ja から Movable Type 3.35-ja の変更点は次の通りです。 インスト
小粋空間: Movable Type を始める前に設定しておきたい 10 の項目
Movable Type を初めてご利用になる方のために、「これだけは最初に設定しておきたい」という 10 項目を挙げてみました。１項から８項は設定の流れを考えて順序づけをしました。最後の2項目の優先度は低いですが、「そういう機能もあります」という意味で掲載しています。 「全てが必須」という意味ではありません。不要と思われる項目はスキップしてください。 2008.10.01 「Movable Type 4 を始める前に設定しておきたい 10 の項目」を公開しました。 １．管理画面を「詳細モード」に切り替える Movable Type の管理画面は「基本モード」と「詳細モード」の2種類があり、デフォルトは「基本モード」になっています。この状態では基本設定とプラグインの一覧しか表示されないため、コメント・トラックバックの受信設定や後に述べるアーカイブページのパス等や拡張子が変更できません。 と
小粋空間: RSS Feed（フィード）を表示する
RSS Feed（フィード）をブログのサイドバー等に表示するテクニックです。方法は色々あるみたいですが、ここでは「Feed2JS」を利用した方法を紹介します。 Feed2JS はフリーのツールです。RSS フィードを HTML として表示させる仕組みは、まずこの Feed2JS に対し、ブログに表示したい RSS フィードのURLを入力して、それに対応する JavaScript を生成します。そしてこの JavaScript をブログに貼り付けまておきます。あとはページを表示することで、JavaScript から Feed2JS のPHPを起動し、さらにPHPのプログラムから RSS フィードを取得し、HTML に変換して表示する、という訳です。 異なるドメインのRSSも利用することができ、表示方法もきめ細かい設定が可能で、単純なテキストとして取得することも可能です。 Feed2JS はサ
MTIgnore タグ
Movable Type 3.3 では、MTIgnore というコンテナタグが追加されました。このタグで括られた部分は再構築で何も処理されません。HTML のコメントアウト（<!-- ? -->）ではコメントアウトした部分が HTML ソースに残りますが、このタグを使用すれば HTML ソースにも表示されなくなります。 例えば下記のようなタグ、 リスト1.1 MTIgnore タグの使用例1 コメント１ <MTIgnore>コメント２</MTIgnore> コメント３ とすれば、HTML には リスト1.2 リスト1.1 のHTMLソース コメント１ コメント３ という表示になります。 コメント文字列だけでなく、MTタグを MTIgnore で括ることも可能です。リスト1.3 のように括れば、生成された HTML ページに MTEntries タグの内容は何も表示されません。 リスト1.3
小粋空間: IE7 の CSS ハック
「IE7 で閲覧すると表示が異なるのですが」というご質問を頂いたので、CSS ハックを利用して、IE7 のスタイルのみを変更する方法を紹介します。結論だけ述べますと、IE7 に異なるスタイルを適用する（=他のブラウザと表示を合わせる）場合、該当のセレクタの前に *:first-child+html を付与します。例えば、IDセレクタ #banner に適用させる場合、 *:first-child+html #banner { ： [IE7用のスタイルを記述] ： } となります。 なお、それ以外のブラウザのために、元の #banner の設定は、この追加したセレクタより前方に記述します（下記）。この順番を間違えると期待する表示にならないのでご注意ください。 #banner { ： [IE7以外のスタイルを記述] ： } *:first-child+html #banner { ： [IE7
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 要素
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
