ホームページ作成/ホームページ作成テクニック、小技

サイトをWindows 7+IE 9の「ピン留め」対応にする方法

自分のウェブサイトを、Internet Explorer 9以降に搭載されている「ピン留め」機能に対応させる方法をご紹介。ユーザに使いやすいジャンプリストを提供することで、アクセス頻度の向上を図ってみましょう。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

Windows 7+Internet Explorer 9以降で使える「ピン留め」機能とは

タスクバーに固定したサイトアイコン

タスクバーに固定したサイトアイコン

「ピン留め」機能とは、お気に入りのウェブサイトを、Windows 7のタスクバーに固定できる機能です。お気に入りのサイトへ、素早く便利にアクセスできるようになります。右図は、All Aboutのトップページを、タスクバーへ「ピン留め」してみた例です。Internet Explorerやエクスプローラーなどのアイコンと同様に、All Aboutを1つのアプリケーションのように使えます。



 
タスクバーから見られるジャンプリスト

タスクバーのアイコンを右クリックすると表示される「ジャンプリスト」

「ピン留め」すると、アイコンを右クリックして表示されるメニュー内に、「ジャンプリスト」と呼ばれるリンク群が表示されます。これによって、サイト内の各コーナーへ簡単にアクセスできるようになります。このリストの一部は、ウェブサイト側から動的に変更が可能なので、新着情報をいち早く確認することもできます。


 
IEのナビゲーションボタンが、サイトアイコンの配色に合わせられる

IEのナビゲーションボタンが、サイトアイコンの配色に合わせられる

「ピン留め」したアイコンからウェブサイトを開くと、Internet Explorerのナビゲーションボタンが、あたかも「そのサイト専用ブラウザ」になったかのようなデザインに変化します。この配色は、サイトアイコン(favicon)の色をベースにして決定されるため、そのウェブサイトのイメージに合ったボタンになります。


 
この「ピン留め」機能は、サイト単位ではなくページ単位で設定できるため、下図のように、「ピン留め」するページによって、異なるジャンプリストが表示されます(作り方によっては、同じジャンプリストが表示されるようにもできます)。

同サイト内でも、「ピン留め」するページによって、異なるジャンプリストを提供できる

同サイト内でも、「ピン留め」するページによって、異なるジャンプリストを提供できる (上記の例では上部の5項目が異なっています)


上図は、左側がAll Aboutのトップページをピン留めした例、右側がAll Aboutのインターネット・パソコン活用チャネルのページをピン留めした例です。これによって、トップページをピン留めしたユーザには「All About全体の案内」が、インターネット・パソコン活用チャネルをピン留めしたユーザには「そのチャネルに限定した案内」が、ジャンプリストに表示されます。

「ピン留め」に対応した他サイト

「ピン留め」に対応した他サイト

この「ピン留め」機能に対応したウェブサイトは、他にもたくさんあります。例えば、右図はHotmailとAmazon.comを「ピン留め」して、ジャンプリストを表示してみたところです。それぞれ、直接アクセスできると便利なページが、ジャンプリストに掲載されています。

頻繁にアクセスするウェブサイトは、このように「ピン留め」しておくと、単にブックマークしておくよりも、より便利にアクセスできるようになるでしょう。


 

「ピン留め」する操作は簡単

サイトアイコンをタスクバーへドラッグ

サイトアイコンをタスクバーへドラッグ

「ピン留め」は、Internet Explorer 9以降を使ってウェブサイトを開いている状態で、アドレスバーの左端に表示されている「サイトアイコン」(favicon)を、タスクバーへとドラッグするだけで設定できます。

この操作は、Windows 7+IE 9以降で使用できます。


 
「スタートメニューにサイトを追加」

「スタートメニューにサイトを追加」

タスクバーではなく、スタートメニュー内に「ピン留め」することもできます。その際は、キーボードから [Alt]+[T]キーを押して右図のように「ツール」メニューを開き、「スタートメニューにサイトを追加」を押します。すると、スタートメニュー内にサイトを「ピン留め」できます。

この操作は、IE 9を使っていれば、Windows Vistaでも使用できます。


 

「ピン留め」のメリット

ユーザが「ピン留め」機能を利用するメリット
    ジャンプリストで新着情報が分かる

    ジャンプリストで新着情報が分かる

  • 頻繁に利用するサイトを、タスクバーやスタートメニューから簡単に開くことができる。
  • ジャンプリストを使うことで、サイト内の主なコーナーへ素早くアクセスできる。
  • 更新ページやお勧めページなど、様々な情報をタスクバー上のジャンプリストから手軽に知ることができる。


 
ウェブサイト運営者側が「ピン留め」機能に対応するメリット
    サイトアイコンが、HOMEへ簡単に戻れるボタンになる

    サイトアイコンが、HOMEへ簡単に戻れるボタンになる

  • タスクバーに「ピン留め」されれば目に付きやすくなり、アクセスアップにつながる。
  • 更新情報などを簡単に通知できる。
  • ナビゲーションボタンがサイトアイコンに合った配色になるので、ウェブサイトがあたかも1つのアプリケーションになったかのように見え、ブランドイメージの確立に役立つ。
  • ブラウザのナビゲーションボタンの隣に、HOME(スタートページ)へ戻るための専用ボタンが増え、閲覧しやすくなる。

 

サイトを「ピン留め」対応にするには、ほんの数行の記述だけでOK

数行のHTMLで「ピン留め」に対応できる

数行のHTMLで「ピン留め」に対応

自サイトをこの「ピン留め」機能に対応させるには、HTMLに数行のソースを加えるだけで済みます。ジャンプリストに動的に情報を追加するにはJavaScriptを活用する必要がありますが、ほとんどコピー&ペーストで済む短い行数で実現できます。


 
本記事では、Windows 7+IE 9の場合を例にして解説しています。この「ピン留め」機能は、今後リリースされるWindows 8やIE 10でも対応されますから、今のうちからウェブサイトを「ピン留め」に対応させておいても無駄にはなりません。ぜひ、対応させてみて下さい。

【この記事の目次】
1. ピン留め機能の紹介 (p.1)
2. ピン留め対応にするための簡単な記述方法 (p.2~3)
3. 静的ジャンプリストを作って、各コーナーへ容易に移動できるようにする方法 (p.4)
4. 動的ジャンプリストを作って、新着ページなどへ容易に移動できるようにする方法 (p.5)
5. ユーザ通知機能を使って、更新などをお知らせする方法 (p.6)

それではまずは、「ピン留め」対応に必要な数行のHTMLソースからご紹介致します
  • 1
  • 2
  • 3
  • 6
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます