WordPressをCMSとして使うための必須プラグイン集 - Trans
WordCamp Kyotoも無事に終わったので、記念エントリー。当日の様子に関しては、 レポート：WordCamp Kyoto 2009 最速レポート｜gihyo.jp … 技術評論社 WordCamp Kyoto » スポンサー・スタッフ・参加者によるレポート などをご参照ください。また、プレゼンのスライドは、WordCamp Kyoto » スピーカーのスライド & 資料集で公開されています。 さて、それでは本題。WordPressをCMSとして使用する際に必須のプラグインを自分のメモも兼ねて掲載します。 必須プラグイン //akismet.com/">Akismet:スパムコメントなどの対処。 //contactform7.com/">Contact Form 7:お問い合わせなどのフォームをどこにでも設置できる。 //www.lopo.it/duplicate-post.tar.
WAI-ARIA導入（日本語訳） - Trans
著者: Gez Lemon件名: Introduction to WAI ARIA日付: 2008年8月1日URL: http://dev.opera.com/articles/view/introduction-to-wai-aria/訳者: Arata Kojima著作: This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license. WAI-ARIA導入 ARIAにはじめて触れる人たちのためにこの記事は書かれている。障害を持つ人たちがWebを使うにあたってぶつかる潜在的な難しさとHTMLの理解を必要とする。ユーザを観察すると、いくつかのRIAと親和性が高いことが分かるだろう。 この記事を読んだあと、ARIAが何の役に立つか、Webサイトにど
Webサービスにおけるショートカットキーの原則 - Trans
Webサービスにおいてもデスクトップアプリケーションと変わらない使用用途のものが増えています。そこで使用頻度が上がるにつれてほしいなと思うのがショートカットキーです。 ショートカットキーのユーザビリティ よく使うソフトウェアにショートカットキーが実装されていると嬉しいものです。何度も繰り返す作業を簡単に行うことができるようになります。 今までは使用頻度が高いソフトウェアはその多くがデスクトップアプリケーションでしたが、Gmailを始めとしてデスクトップアプリケーションと遜色ないWebサービスが多数現れるようになってきました。 ただ、デスクトップアプリケーションと違い、Webサービスにおいてはそのショートカットキーの実装方法が共通化されているわけではありません。そこで、一度現状のWebサービスを比較し、ショートカットキーの原則を作ってみようというのがこのエントリーの趣旨です。 そのために、当
Google検索結果ページのアクセシビリティ - Trans
Googleの検索結果ページがアクセシビリティの観点からいろいろと実験されています。この動きは本当に面白いです。 Google検索結果のページ 百聞は一見にしかずということで、まずはこれを見てください。 これがGoogleの検索結果のページです。普段見ている検索結果のページとはちょっと違いますね。検索結果のアイテムにフォーカスが当たり、フォントサイズが大きくなっています。その上で、そのアイテム周りに薄い青色の背景色がかけられています。 この検索結果をどのように出したかと言いますと、 Google Experimental Searchのページへ行く Accessible ViewのJoin this experimentをクリック Google（英）で何か検索する という流れです。Official Google Blog: Accessible View: An ARIA for web
Web制作者ってとりあえずalt属性は空にしておけばいいって思ってるよね？ - Trans
アクセシビリティの基本でありながら、奥が深いalt属性。こんな視点もあるのだということを書いておきます。 追記（2008年7月14日）：文章中に誤解を招く表現がありましたので、文章を追記しました。 ある視覚障害者の意見 上のタイトルは皆さんを煽っているわけではなく、僕が実際に言われたこと。 どこのセミナーか講演会かは覚えていないのですが、決してプロレベルではないが自分でもWebサイトを制作できる全盲の視覚障害者（スクリーンリーダー利用者）がそのときに言っていた言葉。 もう少しちゃんと説明すると、もし何らかの画像があった場合に、僕たちのようなWebサイト制作者がそのimg要素のalt属性に何を入れればよいのかをパッと閃かなかったときに「とりあえず」alt属性を空にしているよね、と言われたということです。 僕はこれを言われたときに本当に胸に刺さるものがありました。思い当たる節が多すぎた（追記（
情報を重複させないサイト構造 - Trans
強調したい情報がある、だから繰り返したい！でも、それってユーザビリティ・アクセシビリティは高くないかもしれないのです。 某視覚障害者のMLにて 普段はソフトウェアの使い方や近況報告のようなMLなのですが、たまに僕たちのようなサイト制作者にとっては興味深い投稿がされます。例えば、視覚障害者からのこんな内容でした。 「JR東日本のメールでのお問い合わせが使いにくくて仕方がない」という内容。というわけで覗いてみました。 情報量が多すぎる！ まず、指摘のあったその問題のページは、JR東日本：ご意見・ご要望の受付です。当ブログからでは分かりにくいのですが、実は手前のページからポップアップウィンドウで開きます。また、お問い合わせするだけなのになぜこんなにも個人情報を入力しなければならないのか、という疑問も沸いてきます。 では、このポップアップウィンドウを開く手前のページはどこなのか。それがJR東日本：
垂直スクロールバーを左側にしたい！（CSSではなく、アクセシビリティの話） - Trans
垂直スクロールバーは一般的にユーザの右側にあります。でも、左側にあったほうがアクセシブルなときもあると思います。 文末ではてブのコメントに返答しました。（2008年6月15日1時35分） 肢体不自由者の操作の困難さ 一般的にページを縦にスクロールしたいときは垂直スクロールバーを使うことと思います。そして、そのページから1つ前のページに戻るときはブラウザやソフトウェアのツールバーにある「戻る」などをクリックすることと思います（使い慣れた人はキーボードかもしれません）。 そのときはこんな感じのマウスポインタの移動になります。 これをマウスを使って移動すれば一瞬の出来事です。しかし、マウスを使えない肢体不自由者の場合はそうではありません。例えば、下記のような支援機器を使う人の場合はどうでしょうか。 僕はこの数ヶ月の間にこういった支援機器を使う人たち（顎や舌でマウスを使う）にパソコンを教える機会が
はてなクラブとユーザビリティテスト - Trans
はてなクラブがユーザビリティのための品質向上を目指すのであれば、もっと対象ユーザを絞り込むべきだと思います。 ユーザビリティテストの肝 先日、はてなクラブの募集が開始されました（僕も申し込みました）。既にいろんな人たちがブクマコメントなどで突っ込んでいるのですが、ユーザビリティテストの考え方がちょっと甘いかなと思います。 今までのid:jkondoの発言から、はてなはキャズム越えを狙い、YouTubeやmixiのように一般ユーザが使うようなWebサービスになろうとしているのだと思います。そうすると、今一番意見を求めなければならないのははてなを使っていないユーザです（ユーザにとっての既存サービスの改善のためのユーザビリティテストであれば、ユーザを対象とするユーザビリティテストは合っているのですが）。 ユーザビリティテストを行う上で重要なのはテスターのリクルーティングだと思います。はてなクラブ
印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]
印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。 印刷用デザインをどうするか。 当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年4月にも印刷用CSSをもっとよくするための4つのTipsという内容で取り上げました。 さて、今回取り上げるのは今までと違い、印刷用CSSのコーディングではなく、純粋に印刷用デザインはどのようなものがよいか、というものです。コーディングではなく、いかにデザインするか。 ちょうどアックゼロヨン・アワード2007の結果発表もあったことなので、その受賞作の印刷用デザインを参考にしました。また、ADP: 印刷用CSSの書き方（基本編）もかなり（むしろほとんど）参考にさせてもらいました。そのポイントを以下の7つにまとめました。 なお、文末にアックゼ
![印刷用デザインをきれいにまとめるための7つのポイント - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f625aab20ef8abfef513499376656cecc29a08ae/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Faratako0%2F20080518%2F20080518141449.png)
パワーポイントでプロトタイピング（日本語訳） - Trans
著者: Jan Verhoeven件名: Prototyping with PowerPoint日付: 2003年12月6日URL: http://www.jansfreeware.com/articles/misc-prototyping.html訳者: Arata Kojima Prototyping with PowerPoint この記事では、パワーポイントを使ったデスクトッププログラムとWebアプリのインターフェースのプロトタイピングについて扱っている。 また、マイクロソフトのパワーポイントに焦点を合わせているが、OpenOfficeのようなほかのプレゼンツールでも大体は同じようにできる。 この記事のために、私はパワーポイントの2000を使った。ここで扱ったものはjansoft.pptを参考にしてほしい。 パワーポイントを使うことの利点 なぜプロトタイピングにパワーポイントを使う
base要素とナビゲーションスキップとアクセシビリティと。 - Trans
2008年4月14日21時：追記 はてブのコメントに関して書き足しました（文末）。 base要素とナビゲーションスキップを同時に実装すると、そのナビゲーションスキップは本当に機能していますか？ base要素とその使い道 いきなり引用で申し訳ないのですが、base要素とは、 HTML 文書の基準 URI を指定します。href属性に書かれた URL が、この文書の基準 URL とされ、相対参照を解釈する際に利用されます。 base要素@ばけらの HTML リファレンス(未完成) とのことでして、コードはこんなふうに使います。 <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <base href="http://www.123kobe.com" /> HTML文書のURLの起点を作るみたい
letter-spacingをマークアップする際の注意点 - Trans
body要素にletter-spacingを入れる際の注意点が分かったので、自分の備忘録としても書いておきます。 今までは、 /*\*/ letter-spacing: 0.1em; /**/というふうにbody要素に書いており、MacIEの「letter-spacingを指定した要素内の表示が崩れる」というバグをホーリーハックで防いでいました。 基本的にはこれさえ守っておけば、うまく表示されるはずなのですが、最近作ったブログではコードによっては、うまく表示されませんでした。改行しているはずの箇所が、全く改行されていない。それもWinIE6のみ。てっきり、MacIEさえ気をつけておけばOKというわけではなくて、WinIEにも配慮しなければならないよう。 では、何が問題だったのかと言いますと、br要素による改行なんですね。WinIEには「letter-spacingを指定した要素内で連続した
hn要素を各エリアに配置し、アクセシビリティを高くする。 - Trans
ページの各エリアに対してhn要素を使い起点を設けることにより、アクセシビリティを高めることができるかもしれません。 ある全盲の音声ブラウザユーザの意見 最近、ある全盲の音声ブラウザユーザの意見を聞く機会がありました。彼女が主張する使いやすいWebサイトとは以下の3つとのことでした。 ページ全体の構造がイメージしやすいこと 迷子にならないように道しるべがあること 自分の行きたい場所にすぐに行けること 1つ目はWebサイトの標準的なデザインに従えば、ある程度達成できます。このあたりは、Alertbox: ウェブデザイン標準の必要性（2004年9月13日）を参考にしてください。 また、3つ目はWebコンテンツJISにもあるナビゲーションスキップである程度対応できます。ただ、ジャンプするのはメインコンテンツだけにするべきか、それともサブナビゲーションも入れるべきかなどの問題もあるとは思いますが。
CSSの擬似クラス「:hover」で作るちょっと変わったメニュー - Trans
IE7の大きな進歩の1つといえば、a要素以外にも:hover擬似クラスが指定できるようになったこと。では、これを使ってどんなWebデザインができるのかについて3つの事例を調べてみました。 CSS hover effect | Veerle's blogより。 サンプルはKansas City Homes for Sale | Prudential Kansas City Real Estateの真ん中あたりのタブです。タブ内にマウスを持っていくと背景色が変わると思います。 これを作るためには、次の2つの画像を用います。 コードはこんな感じです。解説はCSSのコメントと一緒に書いておきました。ちなみに、事例の3つとも画像置換を使っていますが、その説明は省略しています。 <h2>4 different ways to find your Kansas City Homes for Sale</
シニア向けWebサービスってもう終わったよね、という話 - Trans
シニア向けWebサービスが最近立て続けに終了しました。それから学べる教訓を考えてみます。 Re:logとEonsとmixi 僕自身、このニュースは全くといっていいほど気付いていなかったのですが、凸版印刷の鳴り物入りで始まったシニア向けブログ「Re:log」とSNS「Re:log SNS」が今年1月でサービスを終了しています。 2007年11月19日にメールおよびサイトにてご案内をさせていただきましたように、リログは、2008年1月31日を持ちまして記事やコメントの書き込みサービスを終了させていただきます。 ログインができなくなりますので、一切のブログ管理作業もできなくなります。 はたまた、海外のシニア向けSNS「Eons」も短命ながらその役割を終えようとしています。TechCrunchにデッドプールを宣言されています。 その一方で、mixiに目を移してみます。個人的なデータなので信憑性には
WordPressテーマ（テンプレート）カスタマイズのまとめ（日本語訳） - Trans
著者: Nick La件名: WordPress Theme Hacks日付: 2007年10月15日URL: http://www.webdesignerwall.com/tutorials/wordpress-theme-hacks/訳者: Arata Kojima WordPress Theme Hacks WordPressは最初ウェブログやブログプラットフォームとして開発された。しかし、今、WordPressはとても力強く成長し、僕たちはWordPressであらゆるタイプのWebサイトを作り、CMSとしても利用することができる。 この記事では、みんながよりよいWordPressのテーマを作るために、僕の技をみんなと共有しようと思う。僕はプログラマでもデベロッパーでもない。だから、フロントエンドの開発にフォーカスしようと思う。 そういえば、言い忘れていた。私のようなプログラマーでは
CSS+JavaScriptで画像に柔軟なレイアウトを作る。（日本語訳） - Trans
著者: Aaron Gustafson件名: If I Told You You Had a Beautiful Figure...日付: 2007年9月25日URL: http://www.alistapart.com/articles/figurehandler訳者: Arata Kojimaその他: Translated with the permission of A List Apart Magazine and the author[s]. If I Told You You Had a Beautiful Figure... 率直に言って、画像というのは本当にイライラさせる。OK、ところで、たぶん画像自体が問題なのではない。しかし、画像をデザインの中でかちっとレイアウトするのは難しい。画像を使って、うまくコンテンツの意味を訪問者に知らせたいときは、特にそうだ。 もちろん、ちゃ
TRANS [hatena] - Hkon Wium Lie氏「CSSの10年とこれからの大きな動き」（日本語訳）
タイトルは誇張ではありません。僕も読み始めたときは何のことなのか分かりませんでしたが、途中で出てくるコードを読んで、やっと分かりました。「本当に、これは今のWebデザインやCSSを変えるかもしれない」と。元記事は、A List Apart: Articles: CSS @ Ten: The Next Big Thingより。著者はCSSそのものの草案者であり、今はOperaのCTOを務めるHåkon Wium Lie氏です。 追記 id:iwaimさんのはてブコメントに対する返答を文末に書きました。（2007年9月11日19時ごろ） CSS @ Ten: The Next Big Thing CSS は去年10年の節目を迎えた。このような節目は、過去に立ち返り、未来の計画を立てるための機会である。CSSは構造から見た目を分離することによって、根本的にWebデザインを変えた。CSSはデザイナ
![TRANS [hatena] - Hkon Wium Lie氏「CSSの10年とこれからの大きな動き」（日本語訳）](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d2c6afb5d6abaa426040c38409bd6b5df9565ae/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Faratako0%2F20070909%2F20070909015823.png)
TRANS - WordPressで企業サイトを作る際に押さえておくべき10個のこと
少し前に、WordPressで企業サイトを作る際によく使うプラグインという記事を書きましたが、プラグインを入れたらそれで完成、という訳にはいきません。そこで、プラグインとは別に、企業サイトを構築する際に押さえておくべき10個のことを書き出しておきますので、参考にして下さい。 そのコンテンツにはページなのか、記事なのか、それともHTMLなのか。 WPには、「ページ」というブログの時系列には影響されない個別のコンテンツを作るための機能があります。まず、はじめに考えておくべきことはWP自体をどの階層にインストールしておくのか、ということです。 同時に、あるコンテンツを作る際にそれを「ページ」で作るのか、それともブログベースの「記事」で作るのか、それともWPとは別に単なるHTMLファイルとして作るのか、そのあたりを考えておく必要があります。僕がよく使う方法は、「お知らせ」や「新着ニュース」などは「
TRANS - WordPressで企業サイトを作る際によく使うプラグイン
2009年10月30日（追記）：プラグインを見直し、こちらで公開しています。 2008年8月9日（追記）：この記事はちょっと古いです。最近よく使っているプラグインはWordPressをCMSとして使うときに必ず使うプラグイン6選-Re:Creator’s Kansaiに書いています。 WordPressで企業サイトを作る際に、僕がよく使うプラグインを書き出しておきます。簡単な説明は僕が付け加えたもの、もっと詳しい説明はほかの方が説明してくれている日本語のブログなどにリンクを貼っておきます。それでは、以下から。 追記（2007年7月11日）1点付け加え忘れていました。以下のプラグインを1つのWPに入れた場合などは、いくつかうまく起動しないことがあると思います。そのへんの使用には注意してください。 大体毎回使うプラグイン Customizable Post Listings WPのテンプレート
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
