はてなブックマーク

jQueryはプラグインの種類も豊富なのでそれだけで事足りることがほとんどではありますが、prototype.js等のライブラリと併用したいというときもたまにあります。 そういう場合に起こるのがライブラリ同士のコンフリクト（衝突）で、$関数がそれぞれで異なる定義をしているために起きてしまうものです。よってこれを何とかしておかないとエラーになってしまいます。 回避方法その1 – $関数ではなくjQuery関数を使う 回避方法その1は$関数ではなくjQuery関数を使う方法です。jQuery関数と$関数は名前が違うだけで中身は同じです。 まず、1行目のjQuery.noConflict();$関数を他のライブラリに開放します。これで$関数が使えなくなるので、代わりとしてjQuery関数を使います。 そのため、jQueryスクリプト内の$はすべてjQueryとする必要があります。 jQuery.

CSSで要素を横並びにする方法をまとめてみました。 それぞれの違いがわかるように基本となるコードを用意します。 div要素3つとそれを囲むdiv要素1つです。3つのボックスには高さと横幅を80px、マージン、パディングともに10pxを指定します。 <div class="boxContainer"> <div class="box">BOX1</div> <div class="box">BOX2</div> <div class="box">BOX3</div> </div> float – 方法1 .box { float: left; } .boxContainer { overflow: hidden; } /* clearfix */ .boxContainer:before, .boxContainer:after { content: ""; display: table;

jQueryはプラグインの種類も豊富なのでそれだけで事足りることがほとんどではありますが、prototype.js等のライブラリと併用したいというときもたまにあります。 そういう場合に起こるのがライブラリ同士のコンフリクト（衝突）で、$関数がそれぞれで異なる定義をしているために起きてしまうものです。よってこれを何とかしておかないとエラーになってしまいます。 回避方法その1 – $関数ではなくjQuery関数を使う 回避方法その1は$関数ではなくjQuery関数を使う方法です。jQuery関数と$関数は名前が違うだけで中身は同じです。 まず、1行目のjQuery.noConflict();$関数を他のライブラリに開放します。これで$関数が使えなくなるので、代わりとしてjQuery関数を使います。 そのため、jQueryスクリプト内の$はすべてjQueryとする必要があります。 jQuery.

今回はブログの記事部分のHTMLをschema.orgのスキーマ（語彙）を使って構造化する方法を紹介します。 schema.orgとはGoogle、Microsoft、Yahoo!の3社が共同で開発している構造化データマークアップのためのスキーマのことで、セマンティックウェブを実現するためのものです。（schema.org以外にも様々なスキーマがあります）セマンティックウェブを実現することによって、検索エンジンなどのコンピュータがHTMLの構造を正しく理解することができるようになり、効率よく情報を収集し、ユーザーに提供できるようになります。 例えばパンくずリストを構造化のスキーマを使ってマークアップすることで、検索結果にパンくずリストを表示させることができるようになります。このブログでもHTML5 microdataを使ってWordPressでパンくずリストをGoogleに表示する方法を書

今回のCSS3プロパティは線形グラデーション（linear-gradient）についてです。 今までは背景やボタンでグラデーションを使いたければ背景画像を使わなければなりませんでしたが、CSS3のlinear-gradientを使うことでグラデーションをCSSで設定することができるようになりました。 Firefoxやwebkit系ブラウザでは比較的早い段階から実装されていましたが、当初はそれぞれで書き方が違うという非常に面倒な状況でした。 ですが最近ではwebkitでもFirefoxと同様の書き方ができるようになり、Operaでも実装されたりと、ようやく使えそうなレベルまで来ました。 線形グラデーション（linear-gradient） 開始位置には、x座標とy座標を指定します。left/center/right、top/center/bottomのキーワードのほか、パーセンテージやpxを

CSS4セレクタ (Selectors Level 4) の新機能 CSS4セレクタ (Selectors Level 4)が公開されていました。$selector記法とか新機能が色々追加されてます。 それにしてもCSS3セレクタもしっかり使いこなしていないのにもうCSS4セレクタかよ、って気もするので、これを機にCSS3のセレクタでわかりにくい部分をまとめておきたいと思います。 nth-of-typeの使い方 CSS3では多くのセレクタが加えられました。 CSS3対応のCSSセレクタ一覧 – CSSデザインノート この中で使う機会が多そうなのが、nth-of-type、nth-childだと思います。 工夫次第でいろいろな場面に応用できそうなnth-of-type、nth-childですが、使い分けには注意が必要です。 解説には、nth-of-type(n)は兄弟関係にある n 番目の

JavaScriptを使って簡単にSVG（とVML）を描画するためのライブラリとしてRaphael.jsというものがあります。このライブラリを使うと簡単にSVGを描画してブラウザに表示することができます。jQueryなど他のライブラリに依存しておらず、単体だとファイルサイズが大きい（82kb）のが難点ですが、ベクターグラフィックを描きたいときは使いやすいライブラリだと思います。IE6でも描画できます。 このサイトのWorkページにSVGを使ったドローツールというのがありますが、こちらはRaphael.jsではなくjQuery SVGを使っています。どちらのライブラリも深く使ったわけではありませんが、Raphael.jsの方がコードがすっきりして分かりやすい印象です。 以下簡単なコードでRaphael.jsの記述方法を紹介します。 //svgStageというIDの要素に300×300のSVG

CSS3ではFirefoxやChromeに遅れをとっている感のあるOperaですが、フォームまわりに関しては無双状態です。日付選択やカラーピッカーのUIもブラウザのデフォルトとしては十分なレベルだと思います。 Chromeもある程度は対応していますが、Operaに比べるとUIが雑です。日付選択関係はもう少しなんとかしてほしい。 Firefoxはほとんどだめで、バージョン4のときから全く対応が変わっていないのも問題です。 IEはいつもどおりの対応です。 フォームコントロールUIギャラリー 新しく追加されたInputを並べてみました。使っているブラウザが対応しているかどうかが分かります。（search,tel,url,emailはテキストフィールドのままなのでわかりづらいですが） search tel url email datetime date month week time dateti

HTML5はmicrodataを使って要素にメタデータを付加することができます。 今回はそのmicrodataを使ってWordPressのサイトでパンくずリストをGoogleに表示させる方法を、いろいろなサイトを参考にしながら紹介したいと思います。 microdataの基本 本題に入る前に簡単にmicrodataについて簡単に触れておきたいと思います。 microdataを使うことで、通常の要素に属性をつける形でメタデータを付加することができます。 まず、メタデータを定義している要素を囲んでいる要素にitemscope属性を指定します。この囲んでいるdiv要素の開始タグから終了タグまでをアイテム（item）と呼びます。 もし名前空間がある場合は、itemtype属性でURLを指定します。名前空間（NameSpace）は、ここでは属性の意味を定義するためのものです。サンプルでは適当なURLを

これひとつで何でもできる、SEOのためのWordPressプラグイン、HeadSpace2を紹介します。 SEOのWordPressプラグインといえばAll in One SEO Packも有名ですが、こちらのほうがより詳細な設定を行うことが可能です。 HeadSpace2の導入 管理画面の新規追加からプラグインをインストールするか、HeadSpace2のプラグインページからダウンロードして解凍した後、WordPressのプラグインフォルダにアップロードします。 WordPress › HeadSpace2 SEO « WordPress Plugins HeadSpace2の設定 ページモジュールの設定 HeadSpace2の設定は、管理画面の設定からHeadSpaceを選んで設定画面を選びます。 初回の設定は、ページセッティングよりも先にページモジュールの設定をしておいたほうがい

WordPressの投稿にはカテゴリーやタグがありますが、固定ページにはありません。 ですが、ページごとにカテゴリーを設定して表示を切り分けたいときがあります。（サイドバーにカテゴリーごとのページへのリンクを載せたりとか […]Continue reading «WordPressの固定ページで擬似的にカテゴリーを使う 改訂版»