概要 ▶ Windows 8のスタート画面にお気に入りのウェブページをピン留めしてタイルとして表示することができます。このタイルのアイコンやカラーはHTMLで自由に設定できます。その方法を紹介します。
みなさん、Windows 8使っていますか？
私は発売記念のダウンロード版で安く購入しました。32bit版。
結構快適に動いていますし、新しいスタート画面も、スマートフォンやタブレット端末に慣れている方なら、すぐに慣れるかと思います。マウスだとちょっと違和感を感じるのかもしれませんが、私はペンタブレットを使っているので…。
さて、そのWindows 8の新しいスタート画面にウェブサイトのブックマークをタイルとして置けることをご存じでしたか？
これはピン留めという機能で実はInternet Explorer 9からの機能です。
スタート画面のタイルとして置かれると、まるでアプリのような感じです。
登録したウェブサイトへアクセスしやすくなるので、ウェブサイトへ繰り返し来てもらうために設定しておくことをお薦めします。
このピン留めしたサイトですが、Microsoftが言うにはなんと15～50％アクセス数が増加するそうですよ！（Windows 7＋Internet Explorer9＋タスクバーへピン留め）
Developers can utilize pinned sites to better connect their site with their users and promote their site’s brand directly in the Windows start screen. We found that sites that used this feature with IE9 on Windows 7 see anywhere from a 15 percent to 50 percent increase in site visits.
Pinned Sites in Windows 8 - IEBlog - Site Home - MSDN Blogs
今回はWindows 8のスタート画面へのピン留めに大切な設定で最小限必要なものだけ紹介します。
ものすごく簡単です！
Windows 8のスタート画面へのピン留め対応のHTMLの設定
早速ですがHTMLの設定を紹介します。現在のこのサイトの設定を書くとこんな感じです。
<meta name="msapplication-TileColor" content="#003322" /> <meta name="msapplication-TileImage" content="https://jdash.info/20130205-jdash2000-tile-icon.png" />
最初のmetaタグの「msapplication-TileColor」はタイルの基本色を表します。
カラーの指定方法は「#003322」のhex RGBの形式と「rgb(0,51,34)」の形式で指定できます。
次のmetaタグの「msapplication-TileImage」はタイルアイコンの画像のURLを指定します。
以上です。簡単でしょう？
スタート画面へピン留めの実例
スタート画面へピン留めをしてみましょう。Windows 8のスタート画面からInternet Explorerを起動します。
目的のウェブサイトを表示したら（もちろんこのページでもOKです）「マウスの右クリック」またはキーボードの「アプリケーションキー」または「Windowsキー＋Z」でメニューを表示させます。
その中にある「ピン」のアイコンをクリックします。
「スタート画面にピン留めする」を選択します。
ピン留め（タイル）のプレビューが表示されますので、「スタート画面にピン留めする」をクリックします。
スタート画面のタイルの中にウェブサイトが登録されました！
このウェブサイトを見たい場合はこのアイコンをクリックするだけで開きます。
アイコンの周りにカラーの段差が出てしまう場合
metaタグでキチンとタイルのカラーを指定して、アイコンのカラーも合わせても、ピン留めすると、なぜかアイコンの周りにカラーの段差が表示されることがあります。これは仕様です。（他のOS標準アプリのタイルもそうなっている）
以下は今回の例ですが、確かにタイルの左端のカラーは「msapplication-TileColor」で指定した「#003322」になっているのですが、右端のカラーは「#003E29」と少し明るくなる様にグラデーションがわずかに掛かっています。
まとめ
ウェブサイトのピン留め自体は、今回紹介したmetaタグがなくてもできなくもないです。しかし、アイコンが滑らかでなかったり、タイルのカラーを自分の好きなカラーに指定できなかったりするので、ウェブサイトで決めたアイコン・カラーがあれば、ぜひmetaタグで設定しましょう。
たったの2行です。
<meta name="msapplication-TileColor" content="【タイルのカラー】" /> <meta name="msapplication-TileImage" content="【アイコン画像のURL】" />
それでは、よいWindows 8ライフを。
| できるWindows 8 (できるシリーズ) | ||||
|
| Microsoft Windows 8 (XP・Vista・7からのアップグレード用) | ||||
|
