サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
www.halawata.net
CSS3で新たに作られたプロパティ、transition。 これを使うとJavaScriptを使わなくても簡単にアニメーションの動きを付けることができます。 今回はCSS3プロパティ、transitionについてまとめてみました。 まずはちょっとしたデモ マウスを乗せるとなめらかに色が変わっていくのがわかると思います。 こうしたアニメーションを付けられるのがtransitionプロパティです。 transitionの使い方 上のサンプルを使って解説していきます。 まずは変化前と変化後を指定します。 #test { background-color: #CCFFFF; } #test:hover { background-color: #00FFFF; } もちろんこの状態ではアニメーションにはなりません。このCSSにtransitionプロパティを加えます。 #test { backgro
今回はブログの記事部分のHTMLをschema.orgのスキーマ(語彙)を使って構造化する方法を紹介します。 schema.orgとはGoogle、Microsoft、Yahoo!の3社が共同で開発している構造化データマークアップのためのスキーマのことで、セマンティックウェブを実現するためのものです。(schema.org以外にも様々なスキーマがあります)セマンティックウェブを実現することによって、検索エンジンなどのコンピュータがHTMLの構造を正しく理解することができるようになり、効率よく情報を収集し、ユーザーに提供できるようになります。 例えばパンくずリストを構造化のスキーマを使ってマークアップすることで、検索結果にパンくずリストを表示させることができるようになります。このブログでもHTML5 microdataを使ってWordPressでパンくずリストをGoogleに表示する方法を書
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;
このブログは結構前からHTML5で動かしているのですが、HTML5に移行してからも各所のページでHTML5を勉強するにあたってかなり修正を行ってきました。 最近ではHTML5について詳しく書かれているサイトも増えてきましたので、それらを参考にしつつ今回は「ブログをHTML5に移行する方法」を題材にして順を追って書いていきたいと思います。 HTML5で何が変わるのか HTML5にすることでできるようになることは数多くありますが、今回、ブログをHTML5にする一番の目的は、セマンティックなページ、つまりブラウザが意味を解釈できるようなページ構造にすることです。 例えば、ヘッダー部分を作るとき、XHTML1.0では <div id="header"> ... </div> と書いていました。 人間はこれを見ればヘッダーであることが分かりますが、ブラウザには他の多くのdiv要素との違いがわか
CSS3プロパティのbox-orientとbox-directionは、フレキシブルボックスの配置を指定するためのプロパティです。 フレキシブルボックスとは配置やサイズを相対的に指定することができるボックスのことです。 要素を横並べにする方法でもbox-orientについて触れましたが、今回はbox-orientとbox-directionについて紹介したいと思います。 box-orientとbox-directionを指定するには、まずフレキシブルボックスにしておく必要があります。 要素をフレキシブルボックスにするには、ブロックボックスにはdisplay:boxを、インラインにはdisplay:inline-boxを指定します。 ここで注意しておくことは、フレキシブルボックスは並べたい要素に指定するのではなく、それを囲む要素に指定するという点です。 なお、現時点(2011年10月)
WordPressのショートコードプラグインの作り方を紹介します。 ショートコードとは、WordPressの記事の中に直接埋め込むことができるコードのことです。 実際の記事中では、そのショートコードごとに定義されたHTMLが吐き出されて記事に表示されます。 簡単に記述できるのでいろいろなプラグインに使われています。 記事の中でよく使うHTMLをあらかじめプラグインとして作っておけばショートコードで簡単に呼び出すことができるようになるので、配布を目的としないような自分専用のプラグインを作ってしまうのもおもしろいと思います。今回はYouTubeの動画を簡単に埋めこむことができるコードをサンプルとして紹介します。↓のようなショートコードでのYouTubeの動画の埋め込みが目標です。 プラグインの情報を記述する プラグインはPHPファイルに記述していきます。 まずプラグインを記述するPHPファイル
WordPressでは投稿記事とは別に固定ページを作ることができますが、カテゴリーやタグがつけられません。 このサイトのWorkページを作る際、サイドバーにカテゴリーごとにページリストを作ろうと思ったのですが、ページを分類するカテゴリーやタグが付けられないためページを増やすごとにサイドバーにも追加しなければならなくなってしまいます。 今回はそういった問題を解決する方法としてカスタムフィールドによるカテゴリー付けを紹介します。 カスタムフィールドとは、記事にメタデータを付加することができる機能です。 付加したメタデータはテーマファイルの中で利用することができます。 カスタムフィールドを設定する カスタムフィールド入力欄が表示されていない場合は、投稿編集やページ編集の画面の右上にある表示オプションからカスタムフィールドにチェックを入れて表示されます。 今回はページにカテゴリーをつけるのが目的な
今回の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 番目の
WordPressではバージョン2.9から、アイキャッチ画像(サムネイル画像)を設定する機能が備わっています。アイキャッチ画像の機能を使うことでこのブログのようにトップページに記事のサムネイルを表示させたりすることができます。 WordPressにおけるアイキャッチ画像とサムネイルの違いについて アイキャッチ画像の使い方について紹介する前に、WordPressのサムネイルという言葉に注意しなければなりません。 WordPressの管理画面では「サムネイル」も出てきますが、これはアイキャッチ画像とは別のものです。 まずアイキャッチ画像は、記事ごとに一つの画像を設定することができ、テーマファイルの中でWordPressタグを使って呼び出すことができます。(やり方については後述) なので、トップページの記事一覧でアイキャッチ画像を呼び出して使うことができます。 一方サムネイルとは、記事内で画像を
前回はAdobe Edgeの基本的な操作方法や簡単なアニメーションの作り方について書きました。 今回はActionsについて解説したいと思います。 なお、本記事ではタイムラインパネルでの現在の再生時間を表しているやつをAdobe Flashにならって再生ヘッドと呼びますが公式にどう呼ぶのかはわかりません。なので本当は再生ヘッド(仮)と書くべきかもしれませんが、便宜上そのまま再生ヘッドと書いていきます。 Actionsって何? Actionsは簡単に言うと、JavaScriptのイベントを設定するための機能です。Actionsを使うことで、長方形ツールやテキストツールを使って描画したオブジェクトにクリックイベントやマウスオーバーイベントを設定し、処理を実行させることができます。 例えば、ステージをクリックすることでアニメーションを開始させたり、指定したURLへ飛ばしたり、といった処理も簡
AdobeはHTML5を使ったアニメーションの制作ツールとしてAdobe Edgeを無料で公開しています。 2011年8月にpreview1が公開され、1か月ごとに新しいプレビューが公開されているので、2011年10月現在ではpreview3になっています。 今回はそんなAdobe Edgeについて全体の概観や簡単な操作方法を紹介したいと思います。 Adobe Edgeのインストール まずAdobe EdgeをHTML5 tools, Animation tools – Adobe Edge Preview | Adobe Labsからダウンロードします。 ダウンロードにはAdobeのアカウントが必要です。 ダウンロードしたファイルを解凍したらセットアップ用のファイルを実行してインストールしてください。特に迷う部分はないと思います。 なお、Win版はOSがVistaか7である必要がありま
WordPressで人気の投稿を表示するプラグインといえば、Popular Postsや、WordPress Popular Postsが有名です。ただ、これらのプラグインは、キャッシュを作って表示を速くするプラグインとの相性が悪い場合があり(特にPopular Posts)、かくいう私もPopular PostsやWordPress Popular Postsがうまく動かず困っていました。 しかし、そんな悩みを解決してくれたのがGoogle Analytics Popular Postsです。前述のプラグインと違って、このプラグインはGoogle Analyticsのデータを読み込んで人気の投稿のデータを作るため、他のプラグインとの相性を考える必要がありません。作者は日本人の方なので日本語対応です。面倒な日本語化も必要ありません。ナイスなプラグインです。 Google Analytics
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を
今回はSVGをfaviconとして使う方法を紹介したいと思います。 faviconはサイトごとのアイコンで、ブックマークのリストの横に表示されたり、タブのタイトルの横に表示されたりするアレです。 SVGは、JPGやPNGと違ってベクトルデータであり、パスによって記述されるため、拡大させてもギザギザになったりすることはありません。Illustratorで作られた画像と同じ原理です。拡大縮小で画像が粗くならないため、図やグラフの出力に適していると言われます。 また、SVGはアニメーションをさせることもできます。その機能をフルに活用した作品としてカヤックが公開したSVG女子が一時期話題となりました。マイクロソフトのIE9のデモとしてアメリカで発表された作品です。技術はもちろんのこと独特の世界観がおもしろい作品になっているので、見たことのない(試したことのない)方は一度触って見ることをおすすめしま
WordPressはもともとページの表示があまり早くない上に、使っているとデータベースを無駄に消費してどんどん重くなっていきます。 それを解決するのに役立つのがWordPressの高速化や最適化のためのプラグイン。 ページの表示速度は最近ではSEOにも重要な要素と言われますので、これらのプラグインは必須と言えると思います。 ということで今回はWordPressの高速化や最適化に役立つプラグインをダウンロードページと解説が載っているページをセットにしてまとめました。 WP Hyper Response WordPress › WP Hyper Response « WordPress Plugins WordPressを高速化するプラグインを作りました | Stocker.jp / diary WordPressサイト及び管理画面のヘッダ(CSSファイルを読み込んだ直後)にPHPの fl
これひとつで何でもできる、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の固定ページで擬似的にカテゴリーを使う 改訂版»
このページを最初にブックマークしてみませんか?
『HALAWATA.NET』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く