レスポンシブWebデザイン制作にjQuery Masonryを利用するための5つのポイント
先日エントリーした「ブラウザの幅に応じてレイアウトをきれいに整列できる「jQuery Masonryプラグイン」」の続きで、レスポンシブWebデザイン制作にjQuery Masonryプラグインを利用するための重要なポイントについて詳しく解説します。 サンプル（リンクは２項） 手前味噌ですが、jQuery MasonryによるレスポンシブWebデザインの記事は他にも多く存在する中、実用レベルまで踏み込んでいるのはおそらくこのエントリーだけだと思います。 なお、jQuery Masonryプラグインの基本的な設定方法については割愛してますので、上記のエントリーを参照してください。 １．はじめに このエントリーでは「NHKスタジオパーク」のサイトを参考に、次の内容について解説します。 NHKスタジオパーク まず、カラムレイアウト全体をセンタリングさせるためのCSSの設定について紹介します。 ま
Twitterfeed を使って Twitter にブログの更新情報をポストする
Twitter を始めました。 といっても、Twitter がローンチされたときにアカウントだけ取得して、書籍のテスト用などに使ってました。ということで、フォローお待ちしています。 とりあえず、Twitterfeed を使って、当ブログのエントリーを投稿する設定を行ってみました（下）。 Twitterfeed は、ブログ等のフィードを取得して、Twitterに更新情報をポストしてくれるサービスです。 Twitter は初心者なのでよく知りませんが、Twitterfeed は最近リニューアルされたようで、リニューアル後から動作が不安定になっているようです。また、OpenID よりメールアドレスでのサインアップの方が安定しているという記事もあったので、以下、メールアドレスを使った設定方法を紹介します。 Twitterfeed のページにある「Register Now」をクリック。 メールアドレ
IE6/IE7/IE8/IE9の共存まとめ
Windows 7やWindows VISTAでIE6/IE7/IE8/IE9を共存させる方法です。IE9はまだベータ段階ですが、周辺ツールも対応してきた頃なのでまとめてみました。 公式ブラウザの共存はできませんが、以下に示す方法で各バージョンの表示を確認することができます。最近はIETesterが主流になってきたようなので、そこを踏まえてます。 IETesterを利用＋IETesterでIE9を確認できるようにカスタマイズする 「Microsoft Expression Web SuperPreview for Windows Internet Explorer」と「Internet Explorer Platform Preview（「Internet Explorer 9 Platform Preview」）」を併用する IE9のブラウザーモードとドキュメントモードを利用する 以下、
ウェブサイトとブログでグローバルナビゲーションを共有する
Movable Type 5 でウェブサイトとブログでグローバルナビゲーションを共有する方法です。 方法は色々あると思いますが、ここではウェブサイトのテンプレートモジュールをグローバルナビゲーションとして利用する方法を紹介します。 １．グローバルナビゲーションのメニューにウェブサイトのメインページとブログのメインページを含むケース 次のように、ウェブサイトのメインページ（ホーム）と、ウェブサイト配下のブログのメインページ（ブログ名を使用）をウェブサイトとブログで共有する例です。 １．１ ウェブサイトの「ナビゲーション」テンプレートモジュール ウェブサイトのテンプレートモジュール「ナビゲーション」を新規作成し、次の内容を設定します。 <ul> <li><a href="<mt:WebsiteURL />">ホーム</a></li> <mt:Blogs include_blogs="child
小粋空間: Fast Search でカテゴリーの絞込み検索をする
先週紹介した「Movable Type で高速検索を実現する Fast Search プラグイン」ではオプションとしてカテゴリーの絞込み検索を行うことができます。 このエントリーでは Fast Search の検索フォームにカテゴリー選択のプルダウンメニューを追加する方法をご紹介します。 プラグイン配布元ではカテゴリーで絞込みを行う場合は、検索フォームに、 <input type="hidden" name="category" value="5" /> というような input 属性を追加する説明がありますが、カテゴリー ID はプルダウンメニューから設定できるようにします。 １．デフォルトテンプレートの場合 リストの青色部分が Fast Search の検索フォームに追加した箇所です。 <div class="module-search module"> <h2 class="modu
Firebug の使い方：(X)HTML と CSS の確認・修正方法のまとめ
Firefox アドオンの「Firefbug」はご存知の方も多いと思いますが、Firefbug を使って表示しているページの(X)HTMLマークアップや CSS を確認・修正する方法のまとめを紹介します。 特に３項に記した、(X)HTMLとCSSを一発で確認する方法はおすすめです。 動作は Firefox 3.5 + Firebug 1.4.0b7 で確認しています。 １．基本：(X)HTML マークアップと CSS を表示する 確認したいページを表示した状態で、メニューバーの「表示」→「Firebug」を選択します。または F12 を押下します。 これでページ下半分に Firebug のウィンドウが表示され、左側に(X)HTMLマークアップ、右側にそのページで使われている左側のウィンドウで選択状態になっている要素の CSS が表示されます。この手順で Firebug の画面を開くと、bo
Movable Type 4.1 / MTOS における変数での算術演算子の利用方法
昨日エントリーした「Movable Type 4.1 / MTOS における配列とハッシュの利用方法」に加え、MT4.1/MTOS では算術演算子の利用が可能になりました。 詳細は後述しますが、可能な演算は、 加算（+） 減算（-） 乗算（*） 除算（/） 剰余（%） インクリメント（++） デクリメント（--） で、変数の演算結果を同一変数に保持したり、MTIf タグ等での判定や、判定と同時に演算すること等が可能です。 ということで、こちらについても以下に利用方法をまとめてみました。なお、利用可能と思われるテンプレートタグは下記の通りです。 MTIf MTUnless MTGetVar MTSetVar MTSetVarBlock MTSetVarTemplate １．加算 フォーマット op モディファイアに"+"または"add"を設定します。定義済みの変数に加算する場合は value
Google マップの貼り付け用 HTML を valid にする
Google マップをブログ等に貼り付ける「埋め込み HTML」の提供が開始されましたが、その HTML を valid にするスクリプトを公開します。 １．埋め込み HTML の利用方法 埋め込み HTML 自体の利用方法ですが、まず Google マップで任意の地図を表示させ、「このページへのリンク」をクリックします（スクリーンショット右上）。 リンクをクリックすると、HTMLコードがすぐ下に表示されます（下）ので、 「HTML を貼り付けてサイトに地図を埋め込みます」の下に表示されている、 <iframe width="425" height="350" ～ のコードをマウスコピーして、それをブログの投稿画面に貼り付ければOKです。 ２．問題点 埋め込み HTML で使われている iframe タグは HTML4.01 Strict・XHTML1.0 Strict では未定義、XHT
CSS のフォントサイズ指定が table に反映されない問題
CSS で px 指定のフォントサイズ等を設定している場合、IE.5.5/IE6.0 ではその子要素として記述された table（th/td）にフォントサイズが反映されないという問題があります。 この不具合を回避するには2通りの方法があります。 １．ページ先頭のXML宣言を削除する ひとつめの方法は、テンプレート1行目にあるXML宣言 <?xml version="1.0" encoding="utf-8"?> を削除します。 XML宣言が記述されているとブラウザが「後方互換モード」として動作するため、これを削除して「標準準拠モード」として動作するようにします（「後方互換モード」と「標準準拠モード」については後述）。 ２．th 要素、td 要素に直接プロパティを設定する 後方互換モードのままでも、例えば th, td { font-size: 10px; } と設定することで、プロパティの
小粋空間: Movable Type を始める前に設定しておきたい 10 の項目
Movable Type を初めてご利用になる方のために、「これだけは最初に設定しておきたい」という 10 項目を挙げてみました。１項から８項は設定の流れを考えて順序づけをしました。最後の2項目の優先度は低いですが、「そういう機能もあります」という意味で掲載しています。 「全てが必須」という意味ではありません。不要と思われる項目はスキップしてください。 2008.10.01 「Movable Type 4 を始める前に設定しておきたい 10 の項目」を公開しました。 １．管理画面を「詳細モード」に切り替える Movable Type の管理画面は「基本モード」と「詳細モード」の2種類があり、デフォルトは「基本モード」になっています。この状態では基本設定とプラグインの一覧しか表示されないため、コメント・トラックバックの受信設定や後に述べるアーカイブページのパス等や拡張子が変更できません。 と
小粋空間_カテゴリーリストにカスタムフィールドの画像を表示する
Movable Type検索結果画面のMTIncludeタグでファイルを読み込む方法を紹介します。 １．はじめに MTで再構築するファイルの拡張子を".php"にして、そのページの中で頻繁に更新される部分を、 <?php include('foo.html'); ?> で読み込むことで、ページ全体の再構築不要で情報を更新することができます。 ただ、検索結果ページはPerlのCGIで動作するため、PHPの方法を利用することができません。 ということで、検索結果画面のMTIncludeタグでファイルを読み込む方法を紹介します。 ２．検索結果画面のMTIncludeタグでファイルを読み込む １項のfoo.phpのパスを、仮に「/var/www/html/foo.html」とします。 このファイルを検索結果画面のMTIncludeタグで読み込むには、下記の手順が必要です。 まず、mt-config
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
