CSS3 PIE(PIE.htc)が上手く動作しない際の注意点

2010年11月17日

マイクロソフトのブラウザー Internet Explorer(6・7・8)に
一部のCSS3のスタイルを機能させる
CSS3 PIE(PIE.htc)はとても便利なJavaScriptです。

CSS3 PIE(PIE.htc)によって現在、
IEに機能するようにできるCSS3のスタイルは次の通りです。
(「lojjic's PIE at master - GitHub」)

  • border-radius(ボックスを角丸にする)
  • box-shadow(ボックスに影をつける)
  • border-image(境界線に画像を使用する)
  • multiple background images(背景に最大4つの画像を使う)
  • linear-gradient as background image(背景にグラデーション)

文章を読みやすく、伝わりやすくデザインするという点では、
充分ありがたいスタイルですね。


CSS3 PIE(PIE.htc)のダウンロード先

  ▶ Downloads for lojjic's PIE - GitHub

通常は、一番上の「PIE-1.0beta2.zip — PIE distribution, version 1.0 beta 2」をダウンロードし、「PIE.htc」を使います。php用の2ファイルは使いません。
(ダウンロードするのに、サインアップする必要はありません。)


ところが、CSS3 PIEのホームページに書いてあるように設定しても、
以下の事柄に注意しないと、上手くいかない場合があります。

注意点1
CSSにはCSSファイルから「PIE.htc」への相対パスではなく、
「PIE.htc」を使用しているHTMLファイルから「PIE.htc」への相対パスをCSSに書き込む必要があります。
(絶対パス=フルパスを設定しても自分の場合、動作しませんでした。)


注意点2
各要素に以下の設定をしないと、CSS3 PIEが上手く動作しない場合や、同じセレクタ内の他の要素のエラー原因となる場合があります。

  position:relative;


注意点3
サーバーの仕様によって動作しない場合があるので、
その場合は「.htaccess」ファイルにて以下の設定が必要になります。
(この設定でサーバーに、拡張子.htcのファイルがテキスト形式のファイルであることを伝え、サーバーで適切に使用できるようにする。)
(その他の「.htc」ファイルの際も有効。)


  AddType text/x-component .htc


(なお、注意点につきましては、「CSS3PIE(PIE.htc)が効かないと思ったら」を参照させていただきました。感謝です!)


ラベル:


URL末尾のスラッシュについてのグーグル検索での扱われ方

2010年11月5日

URL末尾のスラッシュの有無と検索エンジン側の扱いについて
グーグルが結構わかりやすく、詳細に取り上げていたのでメモ。

  ▶「URL 末尾のスラッシュは必要?
   (2010-11-05、グーグル・ウェブマスターブログ)


その中でも一番のポイントとなるは次の2つ。

1.ウェブサイトのトップページの場合

ドメインにおけるトップページ(=ルートURL)については、
末尾にスラッシュがなくても、スラッシュがある場合と同一に扱われる。

  http://example.com
  http://example.com/

上の2つの例の場合、2つのURLは同一のもの(一般にはスラッシュのある方 http://example.com/ )として扱われます。


2.ウェブサイトのディレクトリの場合

ドメイン以下の階層(=ディレクトリ)レベルの場合、
URLの末尾のスラッシュ有無により、それぞれ別物として(そして、同等に)扱われる。

  http://example.com/food/
  http://example.com/food

上の2つの例の場合、2つのURLは別物として扱われます。

通常、
末尾にスラッシュのある http://example.com/food/ はディレクトリを、
末尾にスラッシュのない http://example.com/food はファイルを示します。

ただし通常、ホームページが入っているサーバーでは、
末尾にスラッシュのない http://example.com/food が入力された場合、末尾にスラッシュのある http://example.com/food/ にリダイレクトされるように設定されているため、同じURL(一般にはスラッシュのある http://example.com/food/ )として扱われます。

また、その場合、
末尾にスラッシュのあるURL http://example.com/food/ が、
グーグルの言うところの “優先URL” ということになります。


なお、末尾にスラッシュのない http://example.com/food がファイルとして扱われるケースは、主にこのURLがプログラムによって書き出された動的URLである場合が当てはまります。
(動的URLと静的URLについては、かなり間違った情報がネット上に出まわっているので、改めて別の機会に取り上げたいと思います。)


ラベル: ,


ヤフー検索のグーグル検索エンジンのへの移行、先ずはMac版Firefoxから

2010年11月1日

数日前、先のブログ「ヤフー検索のグーグル検索エンジンへの移行は年内に切り替え完了へ」で取り上げた時に、ヤフー検索のグーグル検索エンジンへの移行をおこなった検索結果を確認できたらお伝えすると書きました。

どうやら Mac版の Firefox(ver. 3.6.12)から
ヤフー検索にアクセスして検索すると、
グーグルの検索エンジンを使ったヤフー検索結果が表示されます

今日、いくつかの検索キーワード(=検索クエリ)で試してみましたが、
Mac版の Firefox でヤフー検索すると、
全てグーグルの検索エンジンを使った結果が表示されます。
(米ヤフーエンジンかグーグルエンジンかの違いは検索結果ページの最下段に米ヤフーのクレジットの一文「Search Results provided by Yahoo! Inc.」の有無で判ります。)

下の画像は2つとも今日おこなった検索キーワード「ハロウィン」での検索結果。

【グーグルの検索エンジンを使ったヤフー検索結果(Mac版 Firefox)】
グーグルの検索エンジンを使ったヤフー検索結果(Mac版 Firefox)


【(米)ヤフーの検索エンジンを使ったヤフー検索結果(Mac版 Safari)】
米ヤフーの検索エンジンを使ったヤフー検索結果(Mac版 Safari)


他にも、同じ検索キーワードを使って、
異なる種類のブラウザーでヤフー検索を試してみましたが、
米ヤフーベースの検索エンジンのままです。

Mac版 Firefox 以外で試したブラウザーは次の通りです。
(以下のブラウザーでヤフー検索しても、グーグルの検索エンジンを使用した検索結果ではありませんでした。Win版の Firefox もダメでした。)

 Mac版
  • Safari 5.0
  • Google Chrome 7.0
  • Opera 10.6

 Win版
  • Internet Explorer 8.0(7)
  • Internet Explorer 6.0(XP)
  • Firefox 3.6(7)
  • Firefox 3.5(XP)

どうやらヤフーによる検索エンジン移行のテストは、
Mac版の Firefox のみでおこなっているみたいですね。
(特定のブラウザーを識別して、表示させることは簡単。その他にもパソコンのある地域を特定して限定表示させることも可能。)


実は以前、弊社ブログ「ウェブサイト・検索エンジン動向」の中で、
グーグル検索が、「検索結果には同一ドメインから2ページまで」の原則を変更したという投稿を3本書きました。

確か2本目(2010-09-07、グーグルの「検索結果には同一ドメインから2ページまで」の原則を変更は既に日本でも始まっている?か3本目(2010-10-11、グーグルが「検索結果には同一ドメインから2ページまで」の原則を撤廃した後のウェブ戦略についてのブログ投稿を書いていた頃、
検索結果をチェックするため、
ブラウザーで検索結果を目にした時、
ヤフー検索でも同一ドメインから4ページも表示されている!
と驚き、既にヤフーはグーグル化されたのか、
と思ったのを覚えています。
(その時はそれがヤフーによる移行テストだと気づきませんでした。)

【同一ドメインから4ページ表示されるヤフー検索結果(Mac版 Firefox)】
同一ドメインから4ページ表示されるヤフー検索結果(Mac版 Firefox)

しかも、検索結果に現れた同一ドメインの全4ページ中、
3ページがインデント表示(=字下げ表示)されていたのをはっきりと覚えています。
今にして思えば、
それは現在の Mac版 Firefox でおこなったヤフー検索結果と
同じですから、
ヤフーは Mac版 Firefox を使って、
以前からグーグル検索エンジンへの移行テストを
おこなっていたんでしょうね。

日本では、Macユーザーが全パソコンユーザーの約10%で、
そのうち10〜30%位がブラウザーFirefox を利用していると
されていますから、
ヤフーが明かした数パーセントの検索結果にグーグル検索エンジンを
導入済みというのと合致します。


なお、幾つかの検索キーワードを使って、
現ヤフー(米ヤフーベース)と新ヤフー(グーグルベース)の
検索結果を比べてみました。(今の段階の私見です。)

  • メジャー検索キーワードでは、多少の違いのある場合がみられるが、ほぼ同じ検索結果。
  • マイナー検索キーワードでは、上位はほぼ全く同じ検索結果。

はっきり言ってしまえば、
新しいヤフー検索は、ほぼグーグルの検索結果と言えます。
(上の画像のように、同一ドメインのホームページが
 検索結果に続く時に、2つ目以降のページがインデント
 表示されるのは、とても見やすく、好感がもてます。)

もう少しヤフー色(=法人企業サイトやホームページの作りかがしっかりしているサイトが上位表示される)が出るのかなと思っていましたが、今のところそんな傾向は見られませんでした。


上述しましたが、今後はヤフーでも同一ドメインから2ページ以上
検索結果に表示されるようになりそうです。

ホームページの検索上位表示の競争は、
ドメインのブランド力も含めて、
企業ブランド力とバックリンク数(=被リンク数)の勝負に
しぼられてきそうですね。

もちろん、
きちんとしたホームページ制作が大事なのは変わりませんが . . .


ラベル: , ,


▲このページの先頭へ