TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
複数バージョンのFirefoxを共存させる方法
複数バージョンのFirefoxを共存させる方法を紹介します。 以下、共存させるための手順を紹介します。注意事項は次の通りです。 １項のバックアップは必ず行ってください 作業の途中で新しくインストールしたFirefox起動しないでください それでも起動させてしまった場合は、６項に進んでください（１項の作業を行なっている必要があります） ここではFirefox3とFirefox4で説明していますが、最新版のFirefoxでも可能です。2014年現在、Firefox28と29で共存できることを確認しています。 １．Firefox3のプロファイルのバックアップ 作業中に Firefox4をうっかり起動してしまうと、Firefox3のプロファイル（=ブラウザのオプション設定やアドオンなどが保存されているフォルダ）が、Firefox4のプロファイルで上書きされてしまいます。上書きされてしまうと、Fir
HighSlide JS の onclick 属性を JavaScript で登録する
サムネイルをポップアップ表示する HighSlide JS で onclick 属性および onkeypress 属性を JavaScript で自動的に登録する方法です。 ここでは Movable Type と WordPress プラグインを例に説明します。 １．概略 HighSlide JS を有効にするには、「Highslide JS でサムネイル画像を拡大表示する」の５項で説明した通り、a 要素に class="highslide" に加え onclick="return hs.expand(this)" を設定する必要があります。また配布サイトでは言及されていませんが onclick 属性を設定した場合は onkeypress 属性を同時に設定することがアクセシビリティ上好ましいとされています。 つまり、HighSlide JS に対応させるためには下記の青色部分を記述する必要
小粋空間: 商品リンクをランダムに切り替える
Amazon 等の商品リンクをランダムに切り替えて表示する方法です。具体的な動作は、JavaScript の乱数を利用して、ページを表示する毎に乱数に対応する id 属性で括られたHTML（=商品リンク）を表示するという方法です。当サイトのエントリー・アーカイブで試しに使っています。 以下、設定方法です。 まず表示したい商品のリンクを、テンプレートの任意の位置に並べて記述します。その際、リストのように id 属性を付与してください。ここでは amazon0、amazon1、amazon2 という名称にしています。属性名につけられた数字は必須で、0 から開始させてください。ここではリンクを3つにしていますが、いくつ作って構いません。 <div id="amazon0"> 商品Aのリンク </div> <div id="amazon1"> 商品Bのリンク </div> <div id="ama
小粋空間: 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
小粋空間: MTIf タグの tag モディファイアでテンプレートタグの値を直接参照する
Movalbe Type 4.1 で、MTIf タグに tag モディファイアがいつのまにか追加されていました。本エントリーで紹介します。 使い方は簡単で、tag モディファイアにテンプレートタグ（ファンクションタグ）を指定すれば、変数のように値を参照できます。 １．基本 <mt:if tag="[ファンクションタグ名]"> 指定したテンプレートタグに値がある場合は true、ない場合は false を返却します。 ２．サンプル ファンクションタグの値を MTSetVarBlock タグで一旦変数に取得して判定するケース <mt:setvarblock name="count"><$MTEntriesCount$></mt:setvarblock> <mt:if name="count"> ： </mt:if> は、 <mt:if tag="MTEntriesCount"> ： </mt:
小粋空間: Movable Type 4.1 カスタムフィールドの使用方法
Movable Type 4.1 で追加された「カスタムフィールド」の利用方法です。 この機能は以前、CustomFields プラグインとして公開されていたものが、MT4.1 で新たにアドオンとして追加されました。カスタムフィールドを利用すれば、ブログ管理ユーザがブログ記事投稿画面等に任意のフィールドを新たに追加することができます（下は追加例）。 この機能はプラグインとして配布されている頃から有名でしたが、当ブログでは一度も紹介したことがなかったので、今回は気合を入れて、設定方法およびサンプルによる使用例を記してみました。 １．設定方法 ブログ管理画面より「設定」→「カスタムフィールド」をクリック。 「フィールドを作成」をクリック。なお、左のメニューにも「カスタムフィールド」が追加されています。 このような画面が表示されます。 以下、ブログ記事に「関連リンク」というフィールドを追加する例
小粋空間: IE7 の CSS ハック
「IE7 で閲覧すると表示が異なるのですが」というご質問を頂いたので、CSS ハックを利用して、IE7 のスタイルのみを変更する方法を紹介します。結論だけ述べますと、IE7 に異なるスタイルを適用する（=他のブラウザと表示を合わせる）場合、該当のセレクタの前に *:first-child+html を付与します。例えば、IDセレクタ #banner に適用させる場合、 *:first-child+html #banner { ： [IE7用のスタイルを記述] ： } となります。 なお、それ以外のブラウザのために、元の #banner の設定は、この追加したセレクタより前方に記述します（下記）。この順番を間違えると期待する表示にならないのでご注意ください。 #banner { ： [IE7以外のスタイルを記述] ： } *:first-child+html #banner { ： [IE7
小粋空間: 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つの方法が紹介されていて、このエントリーでは「インストーラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
