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

サイトをWindows 7+IE 9の「ピン留め」対応にする方法(3ページ目)

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

ピン留め対応オプションをもっと細かく指定

以下の3項目は、「ピン留め」機能に対応する上で必須というわけではありません。必要に応じて活用して下さい。

ナビゲーションカラーの指定(省略可/毎回読み込み)
<meta name="msapplication-navbutton-color"
      content="#CC0000">
緑(#00CC00)、黄(#AAAA00)、紫(#CC00CC)を指定してみた例

緑(#00CC00)、黄(#AAAA00)、紫(#CC00CC)を指定してみた例

「ピン留め」すると、IEのナビゲーションボタンが、サイトアイコンのカラーパレットに合わせて自動調整されます。もし、自動調整で望みの配色にならなかった場合は、上記の1行を加えることで自由に色を指定できます。

上記のソースでは、「#CC0000」という濃い赤色を指定しています。色は、HTMLで使える色指定方法で記述できます。


 
ツールチップヒント(省略可/初回のみ読み込み)
<meta name="msapplication-tooltip"
      content="生活総合情報サイトAll Aboutを開きます">
「ピン留め」サイトのヒントが表示されたところ

スタートメニュー内で、「ピン留め」サイトのヒントが表示されたところ

「ピン留め」項目の上にマウスをポイントしたときに表示されるヒント(ツールチップ)の文面を指定できます。

分かりやすい説明を記述しておけば、同じアイコンで複数のページが「ピン留め」された際に区別しやすくなります。ただし、タスクバーに「ピン留め」された場合には表示されないので、できるだけアプリケーション名で区別できるようにしておく方が良いでしょう。


 
ウインドウの初期サイズ(省略可/初回のみ読み込み)
<meta name="msapplication-window"
      content="width=1024;height=768">
初回表示時のウインドウサイズを指定

初回表示時のウインドウサイズを指定

初めて「ピン留め」サイトを起動したときのウインドウサイズを指定します。ユーザがウインドウサイズを変更した場合は、それ以後は、ユーザが指定したサイズが維持されます。

たいていのユーザは、ウェブサイト側の都合でウインドウサイズが勝手に変更されることを嫌いますから、よほどの必要がない限りは、この指定は使わない方が良いでしょう。


 
以上のオプションも全部使って「ピン留め」対応のためのHTMLを記述すると、以下のようになります。
<!-- ▼ピン留め情報 -->
<meta name="application-name" content="オールアバウト">
<meta name="msapplication-tooltip" content="生活総合情報サイト All About を開きます。">
<meta name="msapplication-starturl" content="./">
<meta name="msapplication-navbutton-color" content="#CC0000">
<meta name="msapplication-window" content="width=1024;height=768">
<!-- ▼タスク(静的ジャンプリスト) -->
<meta name="msapplication-task" content="name=デジタル; action-uri=/r_itdigital/; icon-uri=/favicon.ico; window-type=tab">
<meta name="msapplication-task" content="name=趣味; action-uri=/r_hobby/; icon-uri=/favicon.ico; window-type=tab">
<meta name="msapplication-task" content="name=ビジネス; action-uri=/r_business/; icon-uri=/favicon.ico; window-type=tab">
<meta name="msapplication-task" content="name=旅行; action-uri=/r_travel/; icon-uri=/favicon.ico; window-type=tab">
<meta name="msapplication-task" content="name=マネー; action-uri=/r_finance/; icon-uri=/favicon.ico; window-type=tab">
<!-- ▼アイコン -->
<link rel="shortcut icon" href="/favicon.ico">

「ピン留め」用メタデータの読み込みタイミング

これまでに紹介したメタデータには、

(1) ユーザが「ピン留め」操作をしたときに1回だけ読み込まれるもの
(2) ユーザが「ピン留め」サイトを起動する度に読み込まれるもの

の2種類があります。(1)の場合には「初回のみ読み込み」、(2)の場合には「毎回読み込み」と記してあります。(2)の方を活用して、ユーザに対して新しい情報を提供していくことができます。実験として試行錯誤してみる場合で、(1)のデータを更新するためには、「ピン留め」操作をやり直す(=タスクバーからピン留めアイコンを消して、再度ピン留めしなおす)必要があります。

続いて、「ピン留め」機能の目玉である、ジャンプリストの登録方法について詳しく見ていきましょう
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
  • 6
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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