jQueryでCSSをまとめて書き換える方法のまとめ
jQueryでCSSをまとめて書き換える方法をまとめました。 １．問題点 jQueryでCSSを書き換えるには次のように記述します。 $("p").css("color", "#f00"); 複数のプリパティをまとめて書き換えるにはメソッドチェーンを使う方法があります。 $("p").css("color", "#f00").css("background-color", "#00f"); が、よりスマートに書く方法が分かりません。 ２．jQueryでCSSをまとめて書き換える（基本） jQueryでCSSを書き換えるには、css()のパラメータにハッシュ形式（全体を{}で括り、プロパティ名と値をコロンで区切る）で記述する方法があります。 $("p").css({ "color": "#f00" }); そしてプロパティをカンマで区切ることで、複数のプロパティをまとめて記述することができま
jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」（実装解説つき）
jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」を紹介します。 jQuery hashchangeプラグイン １．機能 Ajaxを使って切り替えたページについては、通常、ブラウザの「戻る」「進む」が使えません。 が、hashchangeプラグインを利用すれば、Ajaxを使って切り替えたページについてもブラウザの「戻る」「進む」が有効になります。 例えば下の図の①～⑤のページ遷移で、通常は「戻る」「進め」ボタンで②～④の遷移は行われませんが、hashchangeプラグインを使えば②～④のページ遷移も実現できます。 具体的な仕組みですが、まず基本的なJavaScriptの動作として、フラグメント（「index.html#abc」の「#abc」）を使ってページを切り替えた場合、フラグメント「#abc」が「location.hash」に
WordPressのTwenty Elevenテーマ解説：メインインデックスのテンプレート (index.php)
WordPressの勉強も兼ねて、Twenty Elevenテーマの各テンプレートについて解説してみたいと思います。確認バージョンは3.2.1です。 メインインデックスのテンプレート (index.php) Twenty Elevenテーマの「メインインデックスのテンプレート (index.php)」で出力されるページは次のようになります。 テンプレートのソースコードは次のとおりです。 <?php /** * The main template file. * * This is the most generic template file in a WordPress theme * and one of the two required files for a theme (the other being style.css). * It is used to display a pa
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
HTML5のcanvasを使ったお絵かきツール詳説
HTML5のcanvasを使ったお絵かきツールを勉強がてら作ってみました。下記の画像リンクをクリックすればサンプルページにジャンプします。 サンプル 以下、サンプルのHTMLとJavaScript（jQuery）を使って、canvasのお絵かきツールについて解説します。 探しきれてないだけと思いますが、お絵かきツールのjQueryでの実装が見つからなかったので、自力で書いてみました。いろいろ間違ってたらすいません。 １．HTML サンプルのHTMLは次のようになっています。 <canvas width="500" height="400">お使いのブラウザはHTML5のCanvas要素に対応していません。</canvas> <ul> <li style="background-color:#000"></li> <li style="background-color:#f00"></li>
CSSファイルやJavaScriptファイルを読み込むときの末尾にあるクエリー文字列は何のためにあるか
あちこちのウェブサイトのHTMLソースを見ると、CSSファイルやJSファイルを読み込むlink要素やscript要素のファイル名の末尾に「?xxx=123」のような、いわゆるクエリーがついているのを頻繁にみかけます。 例えばWordPressでjqueryを読み込んだときなど、 <script src="http://user-domian/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script> と、jQueryのバージョン番号を示すクエリー文字列がついています。CSSファイルやJavaScriptファイルはCGIではないので、このクエリーを解釈して使っている訳ではありません。 知っている人は「な～んだ」って感じだと思いますが、この「?ver=1.6.1」の役割について紹介します。 １．キャッシュを制御する ページ読み込みと同時に読み込まれ
jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説
jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します（2012/01/11頃まで）。 このエントリーで紹介する情報は2011年12月のものです。 １．ThemeRollerへのアクセス方法と全体レイアウト jQuery Mobileのトップページにある「Themes」をクリック。 ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。 冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べるこ
jQuery lightBoxプラグインで拡大画像の幅・高さを制限する方法
拡大画像を表示するJavaScriptライブラリ「jQuery lightBoxプラグイン」で、拡大画像の幅・高さを制限する方法を紹介します。 jQuery lightBoxプラグインの使い方は、下記の公式サイトやネットの情報をご覧ください。 jQuery lightBox plugin １．問題点 jQuery lightBoxプラグインは元画像である拡大画像の表示サイズを設定できないため、元画像のサイズによっては次のように期待通りの表示にならないケースがあります。 対処前の拡大画像（ブラウザの幅を超えて拡大） 本エントリーの対処を行うことで、拡大時のサイズを制限することができるようになります。 対処後の拡大画像 ２．jquery.lightbox-0.5.jsの修正 jQuery lightBoxプラグインに含まれる、jquery.lightbox-0.5.jsを任意のエディタで開き、
Movable Typeで携帯サイト向けに画像を縮小表示する「ImageSizeModifierプラグイン」
Movable Typeで携帯サイト向けに画像を縮小する「ImageSizeModifierプラグイン」を公開します。 １．目的 スマホサイト向けのページは「jQueryでスマホサイト向けに画像サイズを縮小する方法」で紹介した通り、jQueryで画像サイズの変更が可能ですが、携帯サイトではJavaScriptが使えないキャリアがあるため、再構築によるページ出力時にimg要素のwidth属性を書き換えて、画像を縮小表示します。 変更可能なimg要素の属性は、次のルールで並んでいる必要があります。 src属性の後方にwidth属性・height属性あること width属性・height属性の順序は不定。ただし属性間に別の属性が含まれないこと alt属性はimg要素の直後かsrc属性の直後のみ許容 width属性またはheight属性の前のclass属性・style属性は許容。ただしclass属
jQueryでスマホサイト向けに画像サイズを縮小する方法
jQueryでスマホサイト向けに画像サイズを縮小する方法を紹介します。 １．サンプル 次のようなPCサイト用のページがあります。この場合、Movable Typeでページを出力しています。ページで使っている記事内の画像サイズは幅470pxです。 このページをスマホサイト向けに別のページを作り、画像サイズを縮小して表示します。画像サイズは幅280pxに縮小しています。 ２．カスタマイズ サイズを変更するには、下記のスクリプトをページ内にあるhead終了タグの直前に追加します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(function(){ $('img').each(functio
jQueryのlive関数を使ってAjaxで取得したコンテンツにイベントハンドラを登録する
jQueryのlive関数について紹介します。 live関数の使用例として、コンテンツの折りたたみをサンプルに用います。 １．コンテンツの折りたたみ h3要素をクリックしたときに、h3要素の次にあるul要素全体を折りたたむには、次のようなjQueryのコードを記述します。実際の動作は「サンプル1」のリンク先で確認できます。 サンプル1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> $(function() { $("h3").click(function() { $(this).next().slideToggle(0); }); }); </script> <h3>最近のブログ記事</h3> <ul> <li>モバイルサイトオープン</li>
Movable Type 5を始める前に設定しておきたい10の項目
Movable Type 5を始める前に設定しておきたい10の項目を紹介します。 このエントリーは、「Movable Type 4を始める前に設定しておきたい10の項目」のMT5版です。MT4から機能が拡張・改善され、画面構成も変更されており、以前の記事では対応できなくなったので、全ての記述をこのエントリーで見直すことにしました。Movable Type 5を利用する場合の参考になれば幸いです。 掲載順序は、ブログ作成－サイトの設定－記事投稿－記事公開－コメント投稿という流れに沿って並べています。全ての項目が必須という意味ではありません。不要と思われる項目は適宜スキップしてください。 このエントリーではMTの基本機能だけを使った項目に絞っています。プラグインを利用した設定については別途エントリーしたいと思います。 また、ここに掲載していることよりも大事なことがあれば適宜追加しますので、ご連
Movable Type 5.0 新機能のまとめ
Movable Type 5.0 の機能についてまとめましたので、管理画面および Movable Type 4 との違いを交えながら簡単に紹介します。 この記事は、Movable Type 5.0 ベータ1を元に作成しています。 １．ウェブサイトとブログ Movable Type 5 ではサイト全体の構成に「ウェブサイト」という概念が加わりました。まず最初にイメージを図示します。 MT4 では、インストールした Movable Type のサイトの単位は「ブログ」であり、メインページやウェブページはブログの中の構成要素となっています（下）。例えば、ウェブページだけを作りたい場合でも、最低1つのブログを作成する必要がありました。 MT5 では、「ウェブサイト」という概念が加わり、ブログは「ウェブサイト」の構成要素になりました（下）。また、メインページやウェブページも「ウェブサイト」の構成要素
Movable Type 4 を始める前に設定しておきたい 10 の項目
Movable Type 4 を始める前に設定しておきたい 10 の項目を紹介します。 このエントリーは、バージョン3 の時代に投稿した「Movable Type を始める前に設定しておきたい 10 の項目」のMovable Type 4 版です。今でもそちらのエントリーにトラックバックやブックマークが寄せられ、大変嬉しいのですが、バージョン3 から Movable Type の機能が大幅に拡張・改善され、画面構成も変更されており、以前の記事では対応できなくなってしまったので、全ての記述をこのエントリーで見直すことにしました。Movable Type 4 を利用する場合の参考になれば幸いです。 設定が重要と思われるものから順番に並べています。前回同様「全てが必須」という意味ではありません。不要と思われる項目はスキップしてください。 また、項目によっては運営中に設定するものもあります（２項後
小粋空間: Movable Type 4.1 カスタムフィールドの使用方法
Movable Type 4.1 で追加された「カスタムフィールド」の利用方法です。 この機能は以前、CustomFields プラグインとして公開されていたものが、MT4.1 で新たにアドオンとして追加されました。カスタムフィールドを利用すれば、ブログ管理ユーザがブログ記事投稿画面等に任意のフィールドを新たに追加することができます（下は追加例）。 この機能はプラグインとして配布されている頃から有名でしたが、当ブログでは一度も紹介したことがなかったので、今回は気合を入れて、設定方法およびサンプルによる使用例を記してみました。 １．設定方法 ブログ管理画面より「設定」→「カスタムフィールド」をクリック。 「フィールドを作成」をクリック。なお、左のメニューにも「カスタムフィールド」が追加されています。 このような画面が表示されます。 以下、ブログ記事に「関連リンク」というフィールドを追加する例
小粋空間: Movable Type プラグイン一覧（MT4対応）
Movable Type 4 対応のプラグインの一覧です。国内サイトで配布されているプラグインでMT4専用、あるいはMT3.xからのアップグレードまたはMT4での動作確認等が配布先で明示されたものを掲載しています。 2010.05.01 本エントリーの更新は終了し、「Movable Type プラグイン一覧（MT5対応）」に移行しました。 先日まで「Movable Type プラグイン一覧」にMT4版を一部追加していたのですが、対応・非対応が明確に区別できないことや、それによりMT4対応のプラグイン検索に手間がかかることから、新たにエントリーを分けることにしました。 本エントリーに掲載されていないプラグインでも、MT4で動作可能なものは多く存在しますので、「Movable Type プラグイン一覧」等から配布サイトへ進み、動作状況を確認するか、あるいは実際にお試しください。 注意事項 プラ
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
feed meter「ランキング Top 300」で一番多く使われているブログは何か？
以前より利用している feed meter でずっと2つ星の状態が続いていましたが、最近採点方式が変わったのか、突然3つ星を頂きました。が、順位はかなり下がり、いつ2つ星に戻るか分からないので、今のうちに記念エントリーしておきます。 その指標となる「ランキング Top 300」も、ファビコンやサイトへのリンクが追加され、華やかな印象になりました。 で、ふと「最近 WordPress が流行っているけど、この中で一番良く使われているブログは何だろう？」と思い立って、昨日のランキングを元に調べてみました。 まずはブログツール・ブログサービスの総合トップ10です。ココログと TypePad の集計に誤りがありましたので修正しました（Typead 3サイトをココログとして+3カウント）。 総合トップ10 順位名称利用数 1Movable Type71 2はてなダイアリー53 3livedoorブロ
小粋空間: RSS フィードにスタイルシート（CSS）を適用する
ブログで配信する RSS/Atom フィード（index.xml や atom.xml）にスタイルシートを適用する方法です。 ブログを始めてちょっと経った頃、このテクニックについての記事を見たことはあったのですが、特にエントリーしていませんでした。今回ご質問を頂きましたので、このエントリーで紹介致します。 １．概要 RSSリーダーが普及した現在、RSS/Atom フィードのリンクをクリックして驚く人は少なくなったのかもしれませんが、ブログ（Movable Type）を始めた頃、ページ右下に表示されている「Syndicate this site」の index.rdf のリンクをクリックすると XML フォーマットの文書が表示され（あるいはダウンロードのダイアログが表示され）、「これは一体何だろう？」と不思議に思ったものです（下）。 このリンクは RSSリーダ／アグリゲータ等が認識するための
小粋空間: Movable Type を始める前に設定しておきたい 10 の項目
Movable Type を初めてご利用になる方のために、「これだけは最初に設定しておきたい」という 10 項目を挙げてみました。１項から８項は設定の流れを考えて順序づけをしました。最後の2項目の優先度は低いですが、「そういう機能もあります」という意味で掲載しています。 「全てが必須」という意味ではありません。不要と思われる項目はスキップしてください。 2008.10.01 「Movable Type 4 を始める前に設定しておきたい 10 の項目」を公開しました。 １．管理画面を「詳細モード」に切り替える Movable Type の管理画面は「基本モード」と「詳細モード」の2種類があり、デフォルトは「基本モード」になっています。この状態では基本設定とプラグインの一覧しか表示されないため、コメント・トラックバックの受信設定や後に述べるアーカイブページのパス等や拡張子が変更できません。 と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
