タイルへのタイトルと説明の表示

はじめに

タイルには 2 種類のテキストがあります。移動先を示すタイトルと、訪問者がそこで何を見つけられるかを短い言葉で伝える、省略可能な説明です。Web パーツのタイトルと合わせて、これらが Smart Tiles のパネルに表示されるすべての文字になるため、どのように表示されるかを正確に把握しておくことが重要です。この記事では、2 種類のテキスト、それらを表示、非表示、サイズ変更する設定、そしてツールヒントについて説明します。

タイトルと説明

どちらのテキストも、タイルのプロパティ ダイアログで入力します。タイルの … ボタンをクリックし、Edit Properties (プロパティの編集) を選択します。

• Title (タイトル) は、タイル内のアイコンの下に、タイルの Font Color (フォントの色) と Web パーツの Font Size (フォント サイズ) で表示されます。
• Description (説明) は、タイトルの下に、より小さく、やや薄い色のテキストで表示されます。サイズはタイトルの 4 分の 3 ですが、12 ピクセルより小さくなることはありません。

各テキストは 1 行で表示されます。タイルの幅より長いテキストは省略記号 (…) で切り詰められ、折り返されません。テキストの全文は、常にツールヒントで確認できます。

ツールヒント

タイルにポインターを合わせると、タイトルと、2 行目に説明を表示するツールヒントが表示されます。タイル上のテキストが非表示になっている場合でもツールヒントは表示されるため、アイコンだけのタイルで構成されたパネルでも、ポインターを合わせれば内容を確認できます。スクリーン リーダーは、タイルのタイトルをリンクの名前として読み上げます。

Show Titles と Show Descriptions

プロパティ ウィンドウの Appearance (外観) グループにある 2 つのトグルで、すべてのタイルのテキストを一括して制御します。

Font Size

Appearance グループの Font Size は、タイトルのサイズを 14、16、18、20、24、28、32 ピクセルの 7 段階で設定します。説明のサイズは、タイトルの 4 分の 3 になります。既定値は 3 段階目 (18 px) です。

テキストを大きくするには、より幅の広いタイルが必要です。28 px または 32 px では、2 ～ 3 語のタイトルでも Small タイルがいっぱいになります。大きなフォント サイズは、Medium 以上のタイルか、短いタイトルと組み合わせてください。

タイトルのないタイル

タイトルが空のタイル、または設定によってタイトルが非表示になっているタイルでは、アイコンが縦方向の中央に配置されます。このようなタイルにも説明を設定してください。説明はツールヒントに表示されるため、アイコンの意味がわからない訪問者にも移動先の名前が伝わります。

Web パーツのタイトル

タイルの上には、パネル全体のタイトルがあります。編集モードでプレースホルダー Web Part Title をクリックして見出しを入力します。見出しは、ページ上の他の Web パーツのタイトルと同じスタイルで表示されます。パネルに見出しが不要な場合は空のままにしてください。公開されたページでは、その場所に何も表示されません。

収まりのよいテキストの書き方

• 1 ～ 3 語のタイトル。 Help Desk、Book a Room、Expense Reports のようにします。アクションには動詞、場所には名詞が適しています。
• 情報を補う説明。 Submit hours by Friday は Time sheet system よりも多くを伝えます。既定のフォント サイズで Small タイルに収まるように、40 文字程度までにしてください。
• 繰り返さない。 説明でタイトルを言い換えないでください。補足する内容がない場合は空のままにします。空の 2 行目がないほうが、タイルがすっきり見えます。
• 一貫性を持たせる。 パネル内のすべてのタイルに説明を付けるか、どのタイルにも付けないかのどちらかにします。2 行目のあるタイルが数個だけだと、行が不揃いに見えます。