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

はじめに

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

タイトルと説明

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

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

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

ツールヒント

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

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

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

フォント サイズ

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

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

タイトルのないタイル

アイコンだけを表示するには、Web パーツの設定でタイトルと説明を非表示にします。各タイルには内容がわかるタイトルを残してください。タイトルはツールヒントに表示され、リンクのアクセシブルな名前にも使われます。タイトルを非表示にしても、縦方向の中央配置は保証されません。

Web パーツのタイトル

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

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

• 1 ～ 3 語のタイトル。 ヘルプ デスク、会議室を予約、経費精算 のようにします。アクションには動詞、場所には名詞が適しています。
• 情報を補う説明。 金曜日までに勤務時間を入力 は 勤怠管理システム よりも多くを伝えます。既定のフォント サイズで 小 タイルに収まるように、40 文字程度までにしてください。
• 繰り返さない。 説明でタイトルを言い換えないでください。補足する内容がない場合は空のままにします。空の 2 行目がないほうが、タイルがすっきり見えます。
• 一貫性を持たせる。 パネル内のすべてのタイルに説明を付けるか、どのタイルにも付けないかのどちらかにします。2 行目のあるタイルが数個だけだと、行が不揃いに見えます。

製品の詳細: https://vitextra.com/ja/products/smart-tiles