Liner Note » ウェブ標準技術絡み

スタイルシートを誰でも楽に操れるようになるような未来

hash — Fri, 08 Aug 2008 05:42:35 +0000

「CSSの未来」がどうあったらよいかと言って浮かぶのは、CSSそれ自体の進化ではなく、CSSをどう管理するかという部分の進化ですね。

ブラウザにおける CSS の解釈の違いを理解するのも CSS を学習する上で大変な部分ではありますが、CSS の基礎を学ぶのも今は何とも難しいなという気がします。先に紹介したセレクタもそうですし、属性も様々。もちろん、ひとつのプログラミング言語を覚えるのに比べたら簡単でしょうけど、初心者が中級者への道筋が険しいものになっているような気がします。

CSS Variables と CSS の未来 : could

表現力の向上やシンプルな記述の支援という観点から、CSS3セレクタやCSS Variablesなどの仕様自体の進化は確かに喜ばしいことですが、一方で上記のような危惧を考えると入門者でも（そして熟練者でも）楽に記述・管理ができていくようになるのが望ましいかと思います。そして、これは仕様それ自体ではなく、それを扱うツールが担う領域です。

例えば、以下のような機能は考えられないでしょうか。

実現したい表示方法を自然文で入力すると、それを実現するプロパティを支持してくれる機能
HTMLのプレゼンテーション要素・属性を入力すると、同様の記述がどういったCSS記述で可能なのか教えてくれる機能
ある書き方や要素の組み合わせがあった場合に特定のブラウザで意図に反した結果¹ になることを告知する機能
CSSのコードを分類（フォルダ分け）できる機能（フレームワーク、一般、ヘッダ、本文、フッタなど）
現在使っているプロパティがどのブラウザで有効か示してくれる機能
CSSテンプレートサイトからレイアウトや見出し・引用などの表示の仕方などテンプレートとなっているお決まりのCSSコードの組み合わせをダウンロードし、ソフトウェア上から1クリックで適用する機能
色彩の組み合わせなど、アクセシビリティの標準仕様と照合して、問題のある記述を告知する機能
同様の指定がある場合にCSS Variablesを使って自動整形する機能

もっとも、CSSの管理に長けたソフトウェアをあまり知らないので、「それ○○でできるよ」ということがあるなら教えていただければなと。MacRabbitのCSSEditというソフトウェアは便利そうですね。ここで挙げた機能も一部実装されているようです。

有名どころではInternet Explorer 6 の擬似要素名称の直後に空白類文字を置かないと擬似要素が認識されないバグ

そろそろブラウザの実装レベルに応じたスタイリング分けをしよう

hash — Sat, 07 Jun 2008 18:57:32 +0000

全てのブラウザで同じに見える必要はないというのは前から何度か言われていることですが、もう少し具体的な文脈に落として考えてみようかな。

例えば、引用文を引用文ぽくスタイリングしたいとする、こんな感じに。

で、とりあえずGoogle先生で調べてから頭を回してみるわけですが、

たいていは、幅固定だったり、blockquoteタグの中で使えるタグの種類や数が限られていたり、不自然な空要素があったりするわけです。要するにIE6などの後方互換性対策ですよね。こういうのは引用だけではなく、いろんなCSSスタイリングの方法論で見られます。

で、これはストリクタの戯言と言うのではなくて、なんだかスタイリングのために変な制限をかけたり、不自然なマークアップをしたりするのが、どうも機械の都合に併せて人間が動いているように思えて釈然としない気持ちになるのですね。

ちなみに私ならこう書きます。

CSSソースコード

blockquote{
  width: 70%;
  background: white url("blockquote_mark_end.png") right bottom no-repeat;
  padding: 15px;
  margin: 15px;
}
 
blockquote > *:first-child{
  background: transparent url("blockquote_mark_start.png") left top no-repeat;
}
 
blockquote p.citation{
  text-align: right;
}

これで以下のすっきりとしたコードでも、きちんとスタイリングできます（引用符のサイズが大きいため、今回は p.citation に背景画像はつけませんでした）

HTMLソースコード

<blockquote>
<dl>
<dt>引用タイトルdt>
<dd><p>あのイーハトーヴォのすきとおった風、<br />
夏でも底に冷たさをもつ青いそら、<br />
うつくしい森で飾られたモリーオ市、<br />
郊外のぎらぎらひかる草の波。 p>dd>
dl>
<p class="citation"><cite>宮沢賢治氏の小説よりcite>p>
blockquote>

引用タイトル

あのイーハトーヴォのすきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。

宮沢賢治氏の小説より

しかし、WinIE6はfirst-child擬似要素に対応していませんので、以下のように補正CSSを追加します。これでWinIE6は点線で囲まれた感じで引用を表現することになります。

CSSソースコード

blockquote{
  background: white none;
  border: 1px dotted gray;
}

このように必ずしも全てのブラウザに同じスタイリングを提供する必要はないだろうし、むしろCSSの実装レベルに応じて（実装レベルが低いものはそれなりに、高いものはそれを活かして）積極的に見せ方を変えていってもよいのではないでしょうか。

既にこのサイトはWinIE6の実装レベルやバグも考慮して（文章の読解に影響を与えない程度で）、スタイリングをWinIE6とそれ以外で区別するようにしてきました。

空要素を意識して作ったり、妙な制限に縛られたりするよりも、実装レベルに応じたスタイリングをする方が後方互換性に必要以上に引きづられることもないですし、何より楽だと思うのですがどうですかね。

You can write a document as simple as you like.
In many ways, the simpler the better.

Tim Berners-Lee

はてなブックマークでの反応に対するお答え

ブラウザに応じてとか基本的に邪魔にしか思えないからなあ。ま、どっちみち一部の受け手は発信側のページのソースをザクザクに切り刻んでスクラップにしてブラウジングするけどね。

id:imo758さんのブックマーク

邪魔にしか思えないというのはどうしてですかね。やはり違うブラウザで見たときに違う見た目になって、そのたびに考えないといけないからでしょうか。であるならば、ちょくちょくブラウザを変えて同じサイトをみることってほとんど無いですし、大きく操作に影響するほどでなければよいと思っているのですが、どうでしょう。

blockquoteの中にタイトルとか.citationとか、メタ情報を入れるのはinvalidな気がするんだ。dlで整形してるのもアウトだと思う。

id:vantguardeさんのブックマーク

本筋とは別の話ではあるんですがコメント、議論参照先はこのへん。

blockquote内は引用内容のみ入れるべきで、メタ情報は入れるべきではないと言うことですかね。私はこれについては議論はあって賛否両論あるけれども、少なくともXHTML仕様的にはinvalidではないと思っていたんですが。どっちかというと言語文法的にinvalidということですかね。それならわかります（引用タイトルを混ぜたのは確かにまずかったと思います）

UAが対応してくれるのなら、できればblockquote要素のcite属性およびtitle属性のみですませるのが一番良いのですが、それは現状できませんので（かといって、javascriptを動員するのは大げさな気がしますし）。

リテラシの低いお客さんはそれだと納得してくれません。/ 分からない人はどんな説明しても分からないからなぁ / ブラウザによって見た目変えるのはいいけど、個人的にはその辺どうすんの？とか思った。

id:rusicaさんのブックマーク

仕事だったら、jQueryとかのjavascriptライブラリを使ってでも、無理矢理同じ見た目にすると思います。ただ、仕事以外ならあんまり取りたくない面倒くさい手なので、今回は修正CSS使って対処しとこうよという風に書いたのです。

プロの人はたいへんだ。

id:ageha0さんのブックマーク

いちいち修正CSS書いたりするんだったら、ちょっとぐらい変なマークアップするよ的な意見（だと読み取ったんですが）も想定してました。僕はちょっと修正CSSを書いた方が変なマークアップ繰り返すより楽かなと思ったんですよね。まぁ、提案であって押しつける気はないんでまた機会があったら考えてみてください。

言及されました、クロスブラウザ対応は運営者が楽な方法で、なるべく多くの環境に適応できるといいですね ::: creazy photographという記事もあわせてどうぞ。

Google検索を少し見やすくするユーザースタイルシート

hash — Thu, 05 Jun 2008 17:28:30 +0000

小ネタですが、少し前から使っているGoogle検索向けユーザスタイルシートを公開してみます。どのような表示結果が万人にとって見やすいかはわかりませんが、個人的にはそこそこ見やすくなったと感じています。

適用前
適用後

変更点は以下の通り。

横幅を40文字程度に設定
検索結果に番号を振った
検索フォームを右下に貼り付けるようにして、フォーカスがある場合以外は半透明状態にした
関連ページやメモを取るなどのリンクは削除
一部のサイトへアイコンを追加（Wikipedia, amazon.co.jp, .go.jp, .ac.jp）
ファイルタイプが特殊な物にアイコンを追加(PDF, Microsoft Word）
検索行動にあまり関係のない情報を削除

なお、AutoPagerizeと併用すると、より快適になるかと思います。

適用方法

特定のサイトにCSSを適用するための@-moz-documentルールを使っているので、現時点ではMozilla FirefoxやFlockなどのブラウザ以外では使用できません。

適用についてはユーザスタイルシートの作成方法に沿って、以下の内容をuserContent.cssとしてプロファイルフォルダに保存してください。StylishというFirefox用アドオンは、ユーザCSSを一元管理できるのでとても便利です。

CSSソースコード

@namespace url(http://www.w3.org/1999/xhtml);
 
@-moz-document url-prefix("http://www.google.co.jp/search"),
url-prefix("http://www.google.com/search"){
 
div#tads, /* Ad */
table#mbEnd, /* Ad */
table#sft h1,
table#sft td.xsm,
span.xsm{
    display:none !important;
}
 
body {
    margin: 0px !important;
    padding: 7px 20px 0px 20px !important;
}
 
/* グローバルナビゲーションの枠線 */
 
body > div > div#gbar{
    padding-bottom: 15px !important;
}
 
body > div > div.gbh{
    border: none !important;
    padding-bottom: 10px !important; 
}
 
/* 検索ボックステーブル周りの調整 */
 
table#sft{
    width: 100% !important;
}
 
table#sft tr[valign="top"] > td + td{
    width: 450px !important;
}
 
table#sft tr[valign="top"] > td + td,
table#sft tr[valign="top"] > td + td table{
    padding: 0px !important;
    margin: 0px !important;
}
 
table#sft tr[valign="top"] > td + td{
    padding-bottom: 6px !important;
    position: fixed !important;
    bottom: 0px !important;
    right: 0px !important;
}
 
table#sft tr[valign="top"] > td + td table{
    padding-bottom: 6px !important;
}
 
table#sft tr[valign="top"] > td + td table tr{
    display: block !important;
    float: left !important;
    padding-top: 7px !important;
}
 
table#sft:hover tr[valign="top"] > td + td{
    background-color: white !important;
}
 
table#sft tr[valign="top"] > td + td input{
    font-size: 90% !important;
    opacity: 0.6 !important;
}
 
table#sft tr[valign="top"] > td + td input[name="q"]{
    display: block !important;
    background-color: white !important;
    border: 1px inset #666 !important;
    float: left !important;
    width: 350px !important;
    padding: 4px 6px !important;
}
 
table#sft tr[valign="top"] > td + td input[name="q"]:focus{
    border: 1px solid #94bbdf !important;
    outline: 1px solid #b3cfe8 !important;
}
 
table#sft tr[valign="top"] > td + td input[name="q"]:focus,
table#sft tr[valign="top"] > td + td input[name="q"]:focus + input[name="btnG"],
table#sft tr[valign="top"] > td + td input[name="q"] + input[name="btnG"]:active{
    opacity: 1.0 !important;
}
 
table#sft tr[valign="top"] > td + td input[name="btnG"]{
    margin-left: 10px !important;
    padding: 3px !important;
}
 
/* 関連ページ、メモへのリンクを削除 */
 
a[href*="q=related"],
span.bl{
    display: none !important;
}
 
/* 検索結果の幅 */
 
div#res table{
    width: 100% !important;
    max-width: 40em !important;
}
 
/* 各検索結果を下げ */
 
.s{
    margin-top: 0.3em !important;
    margin-left: 2em !important;
}
 
/* カウンタを生成 */
 
div#res{
    counter-reset: head !important;
}
 
.g > .r:before{
    counter-increment: head !important;
    content: "#" counter(head) !important;
    font-size: 18px !important;
    font-weight: bold !important;
    margin-right: 5px !important;
    padding: 0px 4px !important;
    background: white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAeCAMAAAAiq38CAAAAA3NCSVQICAjb4U/gAAAAYFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADu7u7v7+/w8PDx8fHy8vLz8/P09PT19fX29vb39/f4+Pj5+fn6+vr7+/v8/Pz9/f3+/v7///9uR0UGAAAAQUlEQVQYlXXGtwGAMAAEsZ8ATHIk7L+lK5+/QZX0QdYX3ge64W1Qq4PqbIE3QwneCF346QnvAe3wbpgNCtAK74IOWSsakaslG2kAAAAASUVORK5CYII=") left top !important;
    color: #bbb !important;
    border: 1px solid #bfbfbf !important;
    -moz-border-radius: 3px !important;
}
 
/* 関連検索 */
 
div.e,
div#res > div:first-child{
    border: 1px solid #4d7032 !important;
    padding: 0px !important;
}
 
div#res.med > div.med{
    border: none !important;
}
 
div.e table#brs{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0px !important;
}
 
div#res > div:first-child td.nobr,
div.e table#brs caption{
    min-width: 100px !important;
    background-color: #6d9f52 !important;
    color: white !important;
    padding: 0px !important;
    vertical-align: middle !important;
    text-align: center !important;
    font-weight: bold !important;
}
 
div#res > div:first-child td,
div.e table#brs caption{
    padding: 10px !important;
}
 
div.e table#brs tr td{
    border: 1px solid #ccc !important;
    padding: 10px !important;
}
 
/* ファイルタイプ関連 */
 
.g > .r{
    font-size: 110% !important;
}
 
.g > .r > a.l[href*=".ac.jp/"]:before{
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAA3NCSVQICAjb4U/gAAAAYFBMVEUwMDAlTSZnaGcIoztLhlgBvEQ4qWA+uGskyWJUrXNetX0/znebnJxvu4l9wZidrqxx1ZGotLe1vL+N1qWb2q+w4r/X19u+6c7T5d7d6ejm7O3m9O7u9/b2+vj9/f3///89IAYcAAAA1ElEQVQYlWWR6Y6DMAyEXVhaoOEKR27m/d9yndBGbHb+2Bp9Go8SAnB+pP13B2UbGH70F6EM77OpxM2+Voz148h5mfa2ogklDccD1hU0zsBbVaHMdmHXJFBkny5shsw/mnMtHQWN4ELwD13QsLGJlH9p+JCmuEamLZLMhBvNEW7f1k2d8jqaaHiv5rZtmqb1Apnmcuv7He16PuLV+N7s+m1+vZ51lBLuQ8O4dej77smqx4Njrt/RUOPQd13XD6MyxK0SraVclom1LFJWpJPNEnST4JO/4bEva9NpKxAAAAAASUVORK5CYII=") !important;
    padding: 0px 4px !important;
}
 
.g > .r > a.l[href*=".go.jp/"]:before{
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAUCAMAAAC+oj0CAAAAA3NCSVQICAjb4U/gAAAAYFBMVEW8AAC2CQjNAAHsAAC7FhXIERHeCgi7KCjERkXsOjnZamrPfHvdgICvr6/gqai8vLzCwsLIyMjOzs7S1tbY29zg4OHz2tnk5ebp6enu7e3x8fHz9Pb39/f7+/v9/f3////j3z0zAAAAu0lEQVQYlbWQ3W6DMAxGoTC2FhZYSBY7/nv/t6wDVS+m3lWzIkX6dHT02Z29nO7fYxFRs/aYn7GoUsmF/FfCBngs6JBCDkuojhCdtGRAVgrTpf8Mpoh0SgCATZdh+hjH3ZhQj1hSqWJhmKaxv6nVpnGJ7Lmw1qvj/RcLI4p0xvATM4j9XodLN1eyyrVJKG7eTo3DbT58hkfv8h2Tt4S0pwRkVPncMq4Z07b6bNF5fSyv697wvzcRzG8d9g6wXC54DpXxzwAAAABJRU5ErkJggg==") !important;
    padding: 0px 4px !important;
}
 
.g > .r > a.l[href*="http://www.amazon.co.jp/"]:before{
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAATCAMAAACjpw26AAAAA3NCSVQICAjb4U/gAAAAYFBMVEUKCAYVEhEqKSc8OjlHRkVTUlFjYmJsbGt7e3qQj4+ZmZj7ji+trKz8nkL7o1O5uLj+rWP9tHHExMT8w479zJ/W1tb+1bDi4uL94Mfp6en95tH+7uLy8vL79/T9+vn///9mECSVAAAAtElEQVQYlW2RWRKEIAxEg4DgLi6AiOH+txxwprRk7K/Uo6sTEgivgqtCxD8cCfojxxi2VpaiWjO34ZBE1ycWQERbEhDPkIpLDFMBPMv261CLHIdNFlAUJMNHyp7a3B1T2Uv2ELHx4p4Qzh8bBoTSGE4q3J1L7j09TCWjrB64NFb1TcJaubSnzXhEjwGdVQnj0s37taNDKzt/W9qxGxfrnLNa9crZ5TdJtHRNUqc0ns3uMzz0AS8+JxP4ZhsWAAAAAElFTkSuQmCC") !important;
    padding: 0px 4px !important;
}
 
.g > .r > a.l[href*="wikipedia.org"]:before{
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAATCAMAAACjpw26AAAAA3NCSVQICAjb4U/gAAAAYFBMVEU/Pz9PT09aWlpnZ2dzc3N6enqCgoKKioqRkZGYmJicnJyjo6OoqKisrKywsLC2tra6urq+vr7CwsLHx8fLy8vQ0NDV1dXY2Njd3d3i4uLm5ubp6enu7u7y8vL4+Pj///9BAaonAAABB0lEQVQYlW3RSW7EIBAFUNO0zWDmYgbD/W8ZE2dahEUhHqikX2zz37U9G0V3cSVpTH55jNddrWIi6J198zWB3Ve79Dlax/f6cBz1bfEWp0/BGbvjxWPUub1exEHO0TgNBwrrdR+9FNRnrgETr7UmdDHA3aj2EMoVA4CUbF9sVZ2W0V5ct2CMUgwtTqO1nlrLJvgC2vATLy5XKqWnnE1O5L1bwd6LY66llVg6gKVSC85fi9U5Y6KYXB48WCn4vnqPFq/QsoesrVeGcYb0Z0odYoo1hCCtPfBB0BM+EJfDHQO0VVIS5L4mmAQkxqlRQvBjO3/m3c7TgbPipBjZP98ww8kpOY5DPccPrDciMXvSGh4AAAAASUVORK5CYII=") !important;
    padding: 0px 4px !important;
}
 
.g > .r > a.l[href$=".pdf"]:before{
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAA3NCSVQICAjb4U/gAAAAYFBMVEW5Gg7rBADAKBvpIwfCQSrsMB/JUDHsRi6zaWH4YB7iZEm6gXL5dDjgflq/mJDviWH9nWnUqqDAwMDGyMnwubDQ0tPrycHZ2Nfe3t7z29Xk5eXs7Ozx8fH19fX6+vv////F3ylvAAAANXRFWHRDb21tZW50AE9QVFBpWCB3ZWJEZXNpZ25lciAgaHR0cDovL3d3dy53ZWJ0ZWNoLmNvLmpwL/A4MtsAAAJKSURBVDiNdZSL1rIqEIZJBAo1JOUgh+H+7/IfrL6t5H5zUcseXmYGGFJ2QarKGaB8XpRGZB9TQCy+Vb99/CHfIP5xEvjQmn7AVOy6rtbabVfcnGvm/jnSG4oy8Rh3TbNO1443KqQUdBwfo5pnJFWJ+bD8AbSlzPj78cBhHNXkSgiXjpYWWgZSFHD+GKcJJwb/53l25GW6lWl33MGS44XjJjtWl+alFzWd53O4D0/XguzGye3Gh6F/6FHVlGTf855/k/8DBeu5rJrUpNS0S3Lea3cGQdpwlvdholpbD2dwgdgoRTFDDOEERnD1MITDE7OSsAoXGkeXWkMrrBI6+ivHE1gTiym1MTo8kCl+HhxAUzZDDgjCydHngyUe9k1Qjec+/DgieFSWdIKcsvmJ0cORhJmKkHM0r19H+M8tgWVUYYDLcgXm/LmKGTBAtiXzQjD7Zgt9yR8l5BgTbtnVgBHCFwSwUrKOv7kFWsdQIL8/SqyckLu5BKsj7JVdRb88Sfd/YCra4NFympP7YtCwgpiLcT8g7+/3nhCuEeg6BJfFuyXFNusiKenvg66r4cq4dMhxiSVk18ToViF8dBiZGRCksuQFr3ULJoglSRFrRqAowzpGg/ldONa3UgCSZawg07UOF461eySmqqWsHHnu9bp0hLKyDeuOG8g6Iiu42StHXFeoL8hwDraUFozwblyzwAAQ7HrBFF5GY6BxLAFvcIjbilemttz07ftgTuDbr9Ym7W0f+4RzxmBVX+EAQn4dhZuDjHEOu0rMnwb5Dw5GmV0/r+uEAAAAAElFTkSuQmCC") !important;
    padding: 0px 4px !important;
}
 
.g > .r > a.l[href$=".doc"]:before{
    content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAA3NCSVQICAjb4U/gAAAAYFBMVEUAR7sDYMYNcNSJYTtJdKQfgtwJkfKpcTk4kN2HiIE5pPNqmcNmq96UqLu3r4Jpxfy2t7jQwlfAv77HxsXh0mbLy8rR0NDC1ebu4mfY2Nje3t/m5ubs6+vy8vL4+Pj///+VSXRiAAAANXRFWHRDb21tZW50AE9QVFBpWCB3ZWJEZXNpZ25lciAgaHR0cDovL3d3dy53ZWJ0ZWNoLmNvLmpwL/A4MtsAAAItSURBVDiNdVSLsqowEFOkioDH2tr19P3/f3myi5e5Foy2zkjIblLYQxWULCil1C84yJ5jWpFTiiF9IW4uhPiV+FoQQohACD59IR6AYwecBWo0aY+Y67EbRqXUeB9HWcNcU95VHPA78HbGAnUONcZaNoogHnQ1+ONVjrcZiq9aY9hVPNxBPIJ4ltIvzi3tKdY6Tdh6rNuo5tvtep1uvlU8dtPUY7v151FPalT3oWfo3CpyPEp1RzUOnRqGbp4noNf+U7FMhOOLkdeCJXr9CuVDsbjsAz7kifx67nzfJzEV763W2hitXehXmJwaxUrWgGbAdhGmOsXoNIiNa09M4wVFNYzDxGHuKHpnHGs6Y8I0ztfL5TrfJ5MaIhSttayIbzydLoLraVcRPC5tKP48ns/fJ/BwKbeKwUuPGsLh5/eNh22JuUYSK5qMSz8rPIiN60CGYMY6lPYLyPvcEjMTxYxjT2yM79OUyjbHxbRjlhjj5WLZKPqVRkwFl5yllsg9MkGIvDvizfq2dF6IUtxqi+NcdOO2x8gSXh5HGSvLLKo7PTqutKTLo4rHVsklFt8qJkuo7TBMyJG0Cy+4syWGhICcE8PGOYezJ+ytIsdDMIFQ2K1jOZwRbYgcOC4ThyckSdI6xNMq4qHwS1HW5e483sMU86ZHyCBKQnM+0jpzdoj/LiGYZaJLpq1rlJaoF8b/Y7/QB/E9sotoiZI8kPxofJxMkZflDYmSEA3cxHXq/gEGTplX+MrHOQAAAABJRU5ErkJggg==") !important;
    padding: 0px 4px !important;
}
 
/* AutoPagerize使用者向け（使っていない人は要削除）*/
 
div + hr + p{
text-align: center;
font-size: 130%;
font-weight: bold;
}
 
div#bsf + p,
table#nav{
    display: none !important;
}
 
}

検索テキストボックスのフォーカスが外れちゃうと、選択している状態も外れてしまうのがすこし難点ですかね。

この問題を解消するために少し書き直しました。お困りの方は新しい方の記述に書き換えてください。

あと、当然と言えば当然ですがもう少し踏み込んだことをしようとすると、ユーザJS（Greasemonkey）に手を入れざるを得ませんね。各検索結果にfaviconつけるくらいはユーザCSSでやりたい感じもしますが¹ 。

更新履歴

2008/09/17: 関連検索の色を修正; [PDF]などの文字を消去
2008/08/21: GoogleのHTML構造の変化に対応（加えて構造変化に強くなるよう修正）; 広告ブロック機能を強化
2008/07/31: GoogleのHTML構造の変化に対応
2008/07/24: GoogleのHTML構造の変化に対応
2008/06/19: Firefox3でテキスト入力欄の背景が表示されず原因もわからないので、とりあえず背景がない状態で調整してみました。一応、この変更でテキスト入力欄に与えたフォーカスが常にテキストの一番後ろになってしまう問題も解決しました

謝辞

base64でエンコードしていますが、アイコンは以下のものを使用させていただきました。

Another side of Liner Note – CSSのattr(Attribute name)を変数的に使いたい

Javascript付きのリンクを新規タブで開いたときに動作しない問題

hash — Wed, 21 May 2008 00:44:01 +0000

巷では、HTMLとスクリプトを分離しようなんて話が盛り上がってます¹ が、その理由の一つとして、javascriptを動作しないようにしている環境でも利便性を確保しようということがあるようです（参照："#" onclickをYahoo UI Libraryを使ってどうのこうの）

同様にjavascriptの利便性に関することで気になるのは、javascript付きのリンクを新規タブ/ウィンドウで開くと空白になってしまい、ほぼエラーに近い状態になってしまうことですね。テストケースで試してみてもわかりますが、a要素のhref属性にURLがセットされていないものは空白になってしまいます。もっとも、これは制作者側がどうこうできる話ではないのでブラウザベンダの対応をお願いしたいところですが。

主要ブラウザのほとんどがタブブラウザとなり、以前よりもタブを使うケースが増えてきたかと思いますが、なんとかしてほしいところです。スクリプトのスの字も知らない方がこういった動作を見るとブラウザが壊れているのだと勘違いしてもおかしくないでしょう。

求められる動作としてはリンク先にURLが書かれている場合は、そのリンク先を新しいタブ/ウィンドウで開いた上で、javascriptを動作させ² 、書かれていない場合はリンク先がスクリプトであって新規タブでは開けないこと、そして現在のタブでスクリプトを実行するか問うダイアログを示す事だと思います。ちなみにFirefoxだと同様の動作を実現するSmart Middle Clickというアドオンがあります。

この辺でUAに求められる動作って仕様に書いてあるんでしょうかね。

どうでもいいけど、この問題って不定期に盛り上がりますよね
もっとも原則ステートレスなWWWでそんなことをするべきなのかということはあるかと思います

別ウィンドウで開くリンクは適材適所で使い分けよう

hash — Sat, 17 May 2008 12:25:52 +0000

外部リンクを別ウィンドウで開く（方法自体はa要素のtarget属性を_blankにする、javascriptでwindow.openするなどいろいろあるので、単に「リンク先の別ウィンドウオープン」と言っておきますが）ことには賛否両論あります。

まず、前提としてミツエーリンクスの記事で解説されているとおり、仕様としては非推奨というわけではありません。その上で、リンク先の別ウィンドウオープンに反対する理由は同じ記事中で以下のようにまとめられています。

同ウィンドウで開くリンクと別ウィンドウで開くリンクの区別がつけられていないため、ユーザの意図しない動作が起こる可能性があるため
ユーザがリンク先を同ウィンドウで開く選択権が与えられないため

また、いまさらながら target=”_blank” について – まちゅダイアリーでは新しいウィンドウを開くように指定されていて嬉しいことよりも嬉しくない事の方が大きいと言っていて、その嬉しくないことの一つとしてパソコンに慣れていない人は、ウインドウが複数開くのに慣れていないということを挙げていますが、これは結構大きい理由だと思います（これについては使いやすさを考えてみる（アクティブシニア・シルバー層の現場から）の記事が詳しいです）

ちなみに、PCに割と詳しい層からは個人の使い勝手の観点（リンク集はリンク先は別ウィンドウで開いてくれた方が嬉しいetc）から別ウィンドウを支持するケースもあるようです。

とはいえ、ユーザがリンク先を同ウィンドウで開く選択権が与えられないことがそれほど悪いことでしょうか。

例えば、ECサイトで買い物をしていて、決済中に送料を確認したくなることはよくあります。その時にリンクが同ウィンドウで開けば、決済をもう一度はじめからやり直さなければならない場合もあります（この場合、システムの設計もあまりよくないでしょうが）

もちろん、そういうことを習熟しているユーザは別ウィンドウで開けばよいのですが、一方で別ウィンドウで開くことを知らないユーザもいるわけです。そのようなユーザもいる中で、ユーザにストレスフルな結果を招くリンクを貼ることは危険でもあります。

ですから、ユーザにリンク先を同ウィンドウで開く選択権を与えないことがかえって良い結果をもたらすこともあり、必ずしもそれ自体が悪だとは言い切れないと思います。

この場合、別ウィンドウで開くことがユーザを混乱させることも当然考えられますが、ウィンドウを分けて情報を見分けることもできるのだという考え方自体を学んでもらうのも、そう悪くはないでしょう（もし、ウィンドウを分けること自体が悪であるのならブラウザベンダは新しくウィンドウを作ることを禁止するのが自然でしょうし、ウィンドウのそうしたシステム自体はいずれ学ぶことです）

私の結論としてはmachuさんの言うように、デフォルトでは _blank を指定しないほうが良い。 _blank を指定するのは訪問者の大部分が幸せになれると確信できるときに限るにほぼ同じです。その上で次のようなケースは「リンク先の別ウィンドウオープン」を設定しておくのが良いだろうと思います。

リンク先を別ウィンドウで開くよう設定しておいた方がよいリンク先

同じページに戻ることができない不可逆な操作中（ECサイトで決済をしているときなど）における、その一連の操作とは異なるコンテンツ（送料・連絡先など）へのリンク先
用語集（＝文中の用語を解説しているページ）へのリンク先
リンク集¹ など一度に多くのリンク先を開くことが想定される場合のリンク先

このケースにあてはまれば必ず「リンク先の別ウィンドウオープン」を使えばいいと言っているわけではありません。例えば用語解説などは、その情報量が多くない限りは同ウィンドウ内にポップアップする形でヘルプを出すのがユーザのコスト（別ウィンドウの場合、ウィンドウを移す→閉じる→視線を移すというコストが発生する）的にも適切な手法だと思います。

どちらか微妙な場合は、リンク先を同じウィンドウで開くように設定し、別窓で開くことがわかることアイコンに別ウィンドウで開く設定したリンクを併設すればいいんじゃないでしょうか。こんな感じで。

ちなみに、F’s Garageで触れられていますが、ブラウザは別ウィンドウを同ウィンドウで開くように設定できるような機能は積極的に実装していくべきだと思います（Firefox 2.0.1.4は実装してます）

参考リンク

単にあるテーマに基づいて集められたページへのリンク集だけではなく、カカクコムの店舗先リンクなどのようなケースも含みます

本のサイズ比較をAmazon APIで

hash — Sat, 09 Feb 2008 17:20:15 +0000

3分LifeHacking：「通販で本を買ったら予想より大きかった」を解決する – ITmedia Biz.ID

本の大きさを比較するWindowsのソフトウェアがあるよという話。

amazon api使ってwebで実装すると面白そう。というコメントもあるし、「それCSSでできるよ！」と思ったので作ろうと思ったんだけど、どこかにしまった記憶を引っ張り出してみれば、CSSで使える絶対単位というのはどの環境でも同じサイズで表示されるわけではない、つまり絶対単位じゃないんですよね。

この図形は5cm×5cmの正方形として描かれているかな？

サーバサイド言語あるいはJavascriptか何かでユーザの出力解像度（DPI）と表示解像度（1024×768とか）と画面サイズ（cm単位）が取れればなんとかなるんでしょうが、そんなことができるというのは聞いたことがありません（ご存じでしたら教えてください）。まぁ、この話は以下のリソースに譲ります。

また、上記ソフトのようにあらかじめ定規でもって実測してもらって調整する（調整値をCookieとして食わせる）という手もありますが、面倒なのは変わりません。

ところで、ここでやりたいのは実際の書籍のサイズを表示することではなく、書籍がどれくらいのサイズがイメージをつかむことです。だとすれば、タバコとのサイズ比較みたいに新書とかを横に置いて比較できればいいわけです。

ということで、Amazon.co.jp 非公式検索にサイズ比較機能をつけてみました。ちなみにITmedia Biz.ID：モノの重さをわかりやすく例えるを参考にして重さを自動的に例える機能もつけてみたよ。

サンプルは以下で。

David Flanagan, 村上列『JavaScript 第5版』：Amazon.co.jp 非公式検索

…とりあえず、オライリーの本はデカくて重いということはわかりました。

いろんなサイトの検索結果にRSSへのリンクを加えるGreasemonkey

hash — Tue, 29 Jan 2008 20:12:00 +0000

このサイトの検索結果をRSSで講読できたら便利なのになーと思う時ってありますよね。世の中広いのでその検索結果をプログラミングしてRSSにしてくれている人がいらっしゃったりして、私も便利に使わせていただいています。もう少しかゆいところに手が届くようにってことで、検索結果をRSS Autodiscoveryで拾うためのタグを追加する¹ Greasemonkeyを書いたので、一応置いておきます。

オークション検索結果（aucfan）

aucfanはあらゆるオークションサイト+αを統合検索してくれるサイトです。便利なんでよく使うんですが、結局はヤフオクをよく使うので、ヤフオクのRSSがあるといいかなと。

幸い、ヤフオクは各検索語毎にRSSを生成できるので、そこにリンクを張るようにしてみます。

検索の一例

ダウンロード

スクリプトのインストール: RSS Link for aucfan

ニコニコ動画

ニコニコ動画ってマイリストのRSSはサポートされているのに、なぜかキーワードやタグで検索した結果のRSSは提供されてないんですよね。

ニコRSS ニコニコ動画/RSS配信というサイトで、検索語のRSS化をされていたので、このサイトで生成されたRSSにリンクを張ってみます。

検索の一例

ダウンロード

スクリプトのインストール: RSS Link for ニコニコ動画

Google TV番組検索

これは好きなタレントや番組名を常にチェックしておきたい人には便利かもしれません。

Googleで「TV キーワード」という感じで検索するとキーワードが含まれているTV番組のRSSをlivedoor 番組表から引っ張ってきます（「TV」を検索語の先頭につけてください、付けていない場合は処理されません）

検索の一例

このスクリプトは地域設定が必要になります。ファイルを開いて、var area = "大阪府";の大阪府の部分をお住まいの都道府県に書き換えてください。

ダウンロード

スクリプトのインストール: RSS Link to livedoor TV

以上です。便利なRSSを提供してくれているサイトに感謝ですね。

4798015350,clear

平たく言うとFirefoxだとアドレスバーにRSSへのリンクが出るようになります

サイトをiPhone / iPod touchに対応してみた

hash — Thu, 29 Nov 2007 09:11:01 +0000

やっとこさ、重い腰を上げてiPhone / iPod touchで見やすいようにスタイルを調整してみました。ちょっとだけそのプロセスを書いておきます。

Appleからはわりかししっかりしたドキュメントが提供されている¹ のですが、いざやろうとするとなにからやっていいのかという感じもします。

ビジュアルの調整は同ドキュメントの「ページを読みやすくするために最適化する」の章で説明されていますので、ここを中心にして調整していけばよいかと思います。

まず、どうやって最適化していくかについて。iPhone / iPod touchは特定のプロバイダを使っているわけではないので、UserAgent文字列から判断することになります。で、そもそもブラウザ判別が必要かと言われると、必ずしも必要ではないと思います。

iPhone / iPod touchはCSS3メディアクエリが使えますので、iPhone / iPod touchのみ適用するCSSが指定できるからです² 。ただ、それも現時点のみの話ですので、サーバーサイドで調整ができるのならば使っておくに越したことはないかと。

で、その際判別に使用するUserAgent文字列ですが、こんな感じになってます。

iPhone: Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
iPod touch: Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A110a Safari/419.3

個々の環境や今後のバージョンアップを考えると、(iPhone; U; CPU like Mac OS X;と言う箇所で判断するのがよいかと思います。PHPですと、こんな感じで判定してます。

PHPソースコード

 } if (
    ereg("iPhone; U; CPU like Mac OS X;", $_SERVER['HTTP_USER_AGENT']) ||
    ereg("iPod; U; CPU like Mac OS X;", $_SERVER['HTTP_USER_AGENT'])
    ){ ?>

 } ?>

view-portを設定する

ビューポートはmetaタグで設定するもので、Safariの初期状態での表示領域や表示スケールを設定することができます。私は以下のように設定しました。

HTMLソースコード

<meta name="viewport" content="width=320; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0;" />

これは「初期状態の表示領域を幅320pxの縮尺1.0倍（つまりそのまま）で表示しておいて、ページの拡大・縮小は1.0-2.0倍の範囲内でやって下さい」という命令です。ご覧のようにプロパティ毎に;で区切って記述してください。

なお、ここでは書いていませんがheight=xxxという形で高さを指定できますし、user-scalable=noを追加すれば、拡大・縮小を禁止することができます。

補正CSSで調整する

で、このview-portタグを指定した時にサイトを読み込むと、こんな感じに表示されます。

ご覧の通り、単に表示領域がちっこくなっただけで本文領域はでかいままです。それとロゴが邪魔で検索ボックスがつかません。ので、以下のように補正CSSを指定してその中で本文領域の設定・ロゴの差し替えなどを行ってみます。

そこそこマシにはなりましたが、そのほかにも一例を挙げると以下のような問題がありました。

グローバルナビゲーション（ページの一番上の部分）がはみ出ていて使えない
ところどころの表示がボックス領域からはみ出ている
リストや定義リストのマージンが大きすぎて表示領域が狭くなっている

(1)のグローバルナビゲーションですが、iPod touchのようにあまり表示領域が広くないUAですと、セレクトボックスに格納して選択→移動するようなものが狭いスペースにおいてもある程度の利便性を備えていてよいかなと思ったのですけど、そうなるとマークアップを変更しないといけません³ 。

ここで安易にブラウザ判別をつけてマークアップをセレクトボックスに変えてしまうと、HTMLが複雑になって利用しにくくなってしまうので、このマークアップを維持したままで、画像で表示していたのを文字で表示するように変更することで手を打つようにしました。

(2)はpositionプロパティで絶対配置・相対配置による位置調整を乱用していたのが問題で、position: static;に変更し、padding/marginで調整するようにしました。

(3)はPC向けにマージンを大きめに取っていたのが災いしていたので、少なめに設定しておきました。

で、これらも含めていろいろとやってみたらこのような感じになりました。

詳しくは実際のCSSをご覧いただきたいですが、内容としては幅やpadding/margin・positionの調整が多かったですね。あと、フォントはVerdanaを指定しておくとより綺麗に表示されるように感じます。

それに、iPhone / iPod touchは対応できないので、フォントサイズ調整スライダなんかは今回消しています。ただ、これは単にjavascriptで値を変えればいいだけなので今後はラジオボックスでフォントサイズを選べるようにしていこうかと思っています。

方向を検出する

ご存じの通り、iPhoneは縦だと320px×356px⁴ 、横だと480px×196pxとデバイスを持つ方向によって幅が変わってしまいます。

コレに備えて、補正CSSは幅に依存しないように作っています（幅を % で指定するなど）が、場合によっては調整が必要かもしれません。

iPhone / iPod toucｈはjavascriptでデバイスの方向を検出できます（出典：Safari Web Content Guide for iPhone: Handling Orientation Events）ので、これを使って補正CSSを追加したりできるよう…なのですが、手元の環境で以下のサンプルを試した限りでは縦方向のwindows.orientationが-90と言われてしまいます。これって私の環境だけの問題なんでしょうかね。

JAVASCRIPTソースコード

<script type="text/javascript">
//
window.onorientationchange = function () {
  if (window.orientation == 90){
    alert("現在、90です");
  } else if (window.orientation = -90){
    alert("現在、-90です");
  } else if (window.orientation = 0){
    alert("現在、0です");
  } else{
    alert("現在、その他です");
  }
}
//]]>
</script>

ちなみにApple Developper Connectionではビデオでのチュートリアルも公開されています、英語ですがわかりやすいです
詳しくは「iPhoneスタイルシートを指定する」の項を参照
この部分は順不同リストでマークアップしていました
アドレスバーなどの領域を除いた表示領域

Amazonアソシエイトでの商品情報表示を hReview(microformats) に対応させてみる

hash — Sat, 10 Nov 2007 12:45:25 +0000

WordPressでAmazonアソシエイトを使用するためのプラグイン”Amazon Linkage”プラグインをmicroformats対応にしてみたのだけど、その対応までのプロセスを言語化しておきます（そもそも、microformatsって何だってのはそのものずばりのid:naoyaさんの記事におまかせします）

さて、まずmicroformatsと一口に言っても、代表的なもの（ドラフト含む）だけでも以下のように結構種類があります。

hCalendar: カレンダーやイベント情報を表現するためのmicroformats
hCard: 人や組織の情報などプロフィールを表現するためのmicroformats
hAtom: 更新情報を表現するためのmicroformats（例としてウェブログの記事の情報など）、ちなみにこのサイトもhAtomに対応してます
hReview: 製品やサービスなどのレビューを表現するためのmicroformats
adr: 住所を表現するためのmicroformats、hCardの1プロパティでもあります
geo: 世界測地系に基づいて緯度・経度を表現するためのmicroformats

Amazon Linkgeプラグインでは商品情報をマークアップするわけですから、一番近いのはhReviewだと思われます。hReviewのスキーマはMicroformats Wikiによると、以下のようになっています。

hReview (hreview)

version. 任意。テキスト。

summary. 任意。テキスト

item type. 任意。 product | business | event | person | place | website | url.

item info. 必須。fn (url || photo ) | hCard (for person or business) | hCalendar (for event)

reviewer. 任意。hCard.

dtreviewed. 任意。 ISO8601 absolute date time.

rating. 任意。 fixed point integer [1.0-5.0], with optional alternate worst (default:1.0) and/or best (default:5.0), also fixed point integers, and explicit value.

description. 任意。text with optional valid XHTML markup.

tags. 任意。keywords or phrases, using rel-tag, each with optional rating.

permalink. 任意。rel-bookmarkとrel-selfを使う。

license. 任意。rel-licenseを使う

hreview-ja – Microformats

フィールドの詳細もあわせてみると、hReviewに必須なのはitemクラスとそれに付随するfn（itemの名前の整形文字列）クラスのみで、あとは全て任意扱いです。では、以下の表示を例にしてみます。
477413015X,clear

例えば、このコードは以下のようになっています（いました）。




いちばんやさしい オブジェクト指向の本 
サイト内で7人がクリック


著者 井上 樹
販売元 技術評論社
発売時期 2007年01月19日
定価 882円

これをhReview(ver. 0.3)に従って、hreview/item/fn/url/photoクラスを加えてみるとこうなります。



class="url" title="Amazon.co.jp: いちばんやさしい オブジェクト指向の本 （新書）">class="photo" alt="いちばんやさしい オブジェクト指向の本 のカバー画像" />

class="fn">いちばんやさしい オブジェクト指向の本 
サイト内で7人がクリック


著者 井上 樹
販売元 技術評論社
発売時期 2007年01月19日
定価 882円




version
0.3
type
product
reviewer
leva

‥えー、既にお気づきかと思いますが、このコード内にはアイテムのレビュー内容は一切含まれていません。Amazon Linkage自体にはレビュー内容は含めないという仕様にしているためです（つまりレビュー内容は別の場所にある）。hReviewなのにレビューがないってどうなんだそれって感じですが、一応規格（ドラフトだけど）には沿ってます。

えーと、hReviewの目的は（WikiのIntroductionを読んだ限りでは）レビューを機械処理して共有しやすくなるためにあるのであって、であるならばレビュー内容、つまりdescription（あるいはratingやsummary）プロパティは必須にすべきだと思います。でなければ、microformatsを持ったコンテンツを検索してもレビュー内容のない単なる商品情報だけの結果であふれかえってしまうのではないかと。

ですが、推測するに、とりあえずitemプロパティ以外は全て任意にした方がユースケースは増えるので、そうして敷居を下げた上で、より多くの情報をウェブ上に集めておいて、検索シーンにおいて「descriptionプロパティを持つものだけ表示する」とかそういう柔軟な運用方法を意図しているのかもしれません。

さて少し話がそれました、本題に戻りましょう。現在、Amazon Linkageプラグインを使ってレビューを含めることはできないので、このプラグインを使いつつレビューを書くとなると、どうしても「hReviewで表現された商品情報＋レビュー」という風に各々が独立してしまいます。かといってレビュー部分にも簡単な商品情報を書くのは煩雑で、機械の論理に同調する形になりまず人にとって読みやすいことが重要、機械はその次というコンセプトから外れてしまいます。

しかし、実はmicroformatsにはインクルードパターン(include-pattern)という便利な方法が用意されています（See also Object Includes）。これはa要素かobject要素を用いることで、あるmicroformatに同文書内にある別のmicroformatを組み込むことができるというものです。ちなみに、複数のレビューをまとめてhReviewで表現するときに何回も商品情報を記述するのを避けるためにも使えるようです。そして、この方法はhResumeとこのhReviewで使うことができるようです。

さて、ではこのinclude-patternを用いて、先ほどのコードにレビュー内容を追加してみましょう。

id="item-477413015X">

いちばんやさしいオブジェクト指向の本

サイト内で7人がクリック

著者	井上樹
販売元	技術評論社
発売時期	2007年01月19日
定価	882円

さて、今日本屋に行ったら（中略）というわけで、買ってきました。

オブジェクト指向のコンセプトを知るための初学者向けの入門書、具体例を中心に展開しているので分かりやすいです。プログラマ以外にもオススメ。10点中8点。

これでhReviewを使ったマークアップができました。もし、この記述に問題点がある場合はお知らせ下さいませ。

ちなみにFirefox 3ではmicroformatsをサポートすることが表明されていますが、残念ながら（ドラフトなので、現在のところは）hReviewはサポートされていません。adrやgeoがサポートされていますから「ドラフトなので」という理由ではないかと思いますが、Firefox 4以降でのサポートに期待したいところです。

あと、最後に余談ですが、こういう関連づけの方法って対訳のマークアップなど、2つの要素群を関連づける方法として一般化できないできないもんですかね。HTMLは同文書内の要素を結びつけることはあんまり得意じゃないものですから。

参考URL

WordPressでちょこっとSEO

hash — Wed, 03 Oct 2007 20:23:55 +0000

SEOといっても、サイトマップXMLの作成やStrictなマークアップくらいしか思い浮かばないlevaです。

もう1つ、metaタグによるSEOなんかも有名でしたっけね。昔からスパマーの餌食になって死亡宣言がとやかく言われているmetaタグですけど、Googleにもその中身を要旨としてよく拾ってもらっているので、一応ちゃんと設定してます。

（例）

metaタグの詳しい説明は神崎さんの解説に譲るとして、とりあえずmetaタグでname属性にkeywordsを設定している場合はページのキーワード、descriptionを設定している場合はページ内容の簡単な説明を書くことになります¹

で、自作スキンの中で、metaタグを生成している部分のコードをちょっと書いておきます。ちょっと変えれば、WordPress以外でも使えるでしょうね。

PHPソースコード （header.php）

 if (is_home()){ // フロントページの場合 ?>

 bloginfo('description'); ?>" />
 } elseif (is_single()){ // 単独記事ページの場合?>
 echo getCatList(); ?>" />
    if ($post->post_excerpt){ ?>
 echo $post->post_excerpt; ?>" />
 } else{
$summary = strip_tags($post->post_content);
$summary = str_replace("\n", "", $summary);
$summary = mb_substr($summary, 0, 60). "‥"; ?>
 echo $summary; ?>" />
 } ?>
 } ?>

metaタグを付けるのは上記のように一番見られると思われるフロントページ（＝ホームページ）と単独記事ページのみです。

前者について、「キーワード」は手動で設定し、「説明」についてはWordPress側の要旨を自動で流用してます。

後者については、「キーワード」はgetCatListという関数をfunctions.phpから呼び出して、キーワードを取得しています、これについては後述。

「説明」については、post_excerpt（管理画面で抜粋 (オプション)って書いてあるヤツですね）を設定している場合はその内容を、していない場合は投稿の先頭60文字をテキストオンリーで流し込みます。しかし、この処理はちょっと重いのが難点。DBに枠を設けるなり、キャッシュするなりしないと、レスポンスにちょっと影響でちゃいますね。

で、さっきのgetCatListメソッドですが、こんな感じです。

PHPソースコード （functions.php）

function getCatList(){
    foreach(get_the_category() as $categories_array){
        $list_of_cats .= $categories_array->cat_name.",";
    }
    $list_of_cats = substr($list_of_cats, 0, -1);
 
    return $list_of_cats;
}

ところで、SEOの役目って検索で上位にくるかどうかなんてより、Googleの検索結果が見やすくなるとか要旨があって見通しが良くなるとかそういうコツコツとしたユーザビリティの向上にこそあるんじゃないかなと思うところ、お客さんはGoogleじゃないわけですし。

私も最初間違えていたんですが、keywordではなく、keywordsです。