Google検索結果の横に表示されるスクリーンショットのギザギザをCSSで表示する

Google検索結果の横に表示されるスクリーンショットのギザギザをCSSで表示する

Posted at September 18,2012 1:55 AM
Tag:[CSS, Google]

Google検索結果の横に表示されるスクリーンショット上下のギザギザをCSSで表示する方法を紹介します。

スクリーンショット上下のギザギザ

1.Google検索結果の横に表示されるスクリーンショットについて

Google検索で、検索結果の横に表示される「>>」にマウスをポイントまたはクリックすると、

Google検索結果

サイトのスクリーンショットが表示されます。

サイトのスクリーンショットが表示

スクリーンショットの縦幅が長い場合、冒頭に示したとおり、分割したことを示すギザギザが表示されます。

分割したことを示すギザギザを表示

ということで、このギザギザを表示するCSSを調査してみました。

完全に調査できていないかもしれない&かなり省略していますので、ご利用になる場合はご注意ください。また、ギザギザ画像(透過PNG)は各自でご用意ください。

Google Chrome/Firefox/IE9で表示することを確認しています。IE9は条件付きコメントで振り分けが必要です。

2.ギザギザを表示するCSS

サンプルを作りましたので、表示はそちらからご覧ください。

サンプル
サンプル

サンプルのHTML

<div>
  <a href="http://user-domain/">
    <div class="vssrd">
      <div class="vssrdi" style="border-top-width: 1px; border-bottom-width: 0px;">
        <img class="vsi" src="test.png" />
      </div>
      <div class="vstd vstbtm1">
        <div class="vsti vstibtm"></div><div class="vsti vstibtm"></div><div class="vsti vstibtm"></div>
      </div>
    </div>
    <div class="vssrd" style="margin-top: 14px;">
      <div class="vssrdi" style="border-top-width: 0px; border-bottom-width: 0px;">
        <img class="vsi" src="test2.png" />
      </div>
    <div class="vstd vsttop1">
      <div class="vsti vstitop"></div><div class="vsti vstitop"></div><div class="vsti vstitop"></div>
    </div>
    <div class="vstd vstbtm2">
      <div class="vsti vstibtm"></div><div class="vsti vstibtm"></div><div class="vsti vstibtm"></div>
    </div>
  </div>
  </a>
</div>

サンプルのCSS

body {
    background-color: #fafafa;
}
a img{
    border: none;
}
.vssrd {
    max-width: 432px;
    display: block;
    height: auto;
}
.vssrdi {
    width: 430px;
    border: 1px solid #bbb;
    border-bottom-width: 0px;
}
.vstd {
    line-height: 0;
    position: absolute;
    width: 100%;
}
.vsti.vstibtm {
    background: url("背景画像のURL") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 9px;
    width: 144px;
    overflow:hidden;
}
.vsti.vstitop {
    background: url("背景画像のURL") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 9px;
    width: 144px;
    overflow:hidden;
}
.vsi {
    width: 100%;
    display: block;
    height: auto;
}
.vstbtm1 {
    top: 231px;
}
.vsttop1 {
    top: 251px;
}
.vstbtm2 {
    top: 433px;
}

ギザギザ画像のHTMLは、次の部分で3つの画像を並べ、インラインブロックまたはインラインに変換して表示しています。

<div class="vstd vstbtm1">
    <div class="vsti vstibtm"></div><div class="vsti vstibtm"></div><div class="vsti vstibtm"></div>
</div>

div要素が3つあるのは、CSSスプライトの都合で短い画像を3つを並べているみたいです。画像作る際は長いものを1つ作ればいいかもしれません。並べる場合、中のdiv要素は改行しないでください。

表示位置は、次のCSSでtopからの指定で設定しています。Googleの場合はtopの代わりにbottomを設定して、スクロールにも対応しているようです。

.vstbtm1 {
    top: 231px;
}
.vsttop1 {
    top: 251px;
}
.vstbtm2 {
    top: 433px;
}

div要素にもstyle属性があり、style要素に書き換えてみたのですが、微妙に表示がずれてしまうようなのでそのままにしています。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)