方法 : SiteMapPath Web サーバー コントロールの外観をカスタマイズする

  • [アーティクル]

更新 : 2007 年 11 月

サイト ナビゲーション コントロールの外観は、コントロールの属性を設定するか、またはコントロールに使用可能なテンプレートを構成することによってカスタマイズできます。テンプレートおよびスタイルは、SiteMapPath の Remarks セクションに記述する 2 つの優先順位規則に従ってリンクに適用されます。

また、コントロールにテーマまたはコントロール スキンを適用したり、必要な表示になるようにカスタムのサイト ナビゲーション コントロールを開発したりできます。Web コントロールへのテーマの適用方法の詳細については、「方法 : ASP.NET CreateUserWizard コントロールをカスタマイズする」を参照してください。

SiteMapPath コントロールはナビゲーション パス (階層リンクまたはアイブローとも呼ばれる) を表示します。これは、Web サイトの現在のページからホーム ページに戻るパスをリンクとして表示したものです。ASP.NET ページでは、SiteMapPath コントロールは次のように表示されます。

[ホーム] > [サービス] > [学習]

また、TreeView コントロールおよび Menu コントロールもサイト マップ データを表示します。これらは SiteMapPath コントロールに似ていて、他のほとんどの Web コントロールと同様にカスタマイズできます。このトピックでは、SiteMapPath Web サーバー コントロールの次のようなカスタマイズ機能の使用方法について説明します。

  • リンク間に表示される文字またはイメージを指定する。

  • ナビゲーション パスの方向を反転させる。

  • 表示される親リンクの数を指定する。

このトピックに示す手順では、サイト マップと、SiteMapPath コントロールを含むページが既に作成されていることを前提としています。「ASP.NET サイト マップ」にあるサンプル Web.sitemap ファイルを使用できます。

リンク スタイルのプロパティをカスタマイズするには

  1. SiteMapPath コントロールを含んでいる ASP.NET Web ページ内で、コントロールに次のプロパティを追加します。

    RootNodeStyle-Font-Names="Verdana"
RootNodeStyle-ForeColor="Orange"
RootNodeStyle-BorderWidth=2

    たとえば、SiteMapPath コントロールのコードは次のようになります。

    <asp:SiteMapPath ID="SiteMapPath1" Runat="server" 
  SkipLinkText="Skip Menu"
  RootNodeStyle-Font-Names="Verdana"
  RootNodeStyle-ForeColor="Orange"
  RootNodeStyle-BorderWidth=2 >
</asp:SiteMapPath>

    CssClass プロパティなど、Style クラスと FontInfo クラスで説明されているほとんどのプロパティを使用できます。

  2. 各リンクに異なるスタイルを設定するときは、SiteMapPath コントロールの ParentNodeStyle プロパティ、CurrentNodeStyle、プロパティ、および PathSeperatorStyle プロパティについて前の手順を繰り返します。

    ms178419.alert_note(ja-jp,VS.90).gifメモ :

    NodeTemplate を使用してすべてのリンクのスタイルを一度にカスタマイズすると、効率的に作業できます。詳細については、「ASP.NET Web サーバー コントロール テンプレート」を参照してください。

リンク間に表示される文字をカスタマイズするには

  • SiteMapPath コントロールを含んでいる ASP.NET Web ページ内で、コントロールに PathSeparator プロパティを追加します。

    たとえば、SiteMapPath コントロールのコードは次のようになります。

    <asp:SiteMapPath ID="SiteMapPath1" Runat="server" 
  PathSeparator=" :: ">
</asp:SiteMapPath>

    SiteMapPath コントロールは次のように表示されます。

    [ホーム] :: [サービス] :: [学習]

    任意の文字列をリンクの区切り記号として使用できます。ただし、イメージを使用するときは次の手順に従います。

リンク間に表示されるイメージを指定するには

  • SiteMapPath コントロールを含んでいる ASP.NET Web ページ内で、コントロールに次のコード行を追加します。

    <PathSeparatorTemplate>
  <asp:Image ID="Image1" Runat="Server" 
    Width="20" 
    ImageUrl="Images/PathSeparatorImage.jpg" />
  </PathSeparatorTemplate>
</PathSeparatorTemplate>

    たとえば、SiteMapPath コントロールのコードは次のようになります。

    <asp:SiteMapPath ID="SiteMapPath1" Runat="server" >
  <PathSeparatorTemplate>
    <asp:Image ID="Image1" Runat="Server" 
      Width="20" 
      ImageUrl="Images/PathSeparatorImage.jpg" />
    </PathSeparatorTemplate>
  </PathSeparatorTemplate>
</asp:SiteMapPath>

SiteMapPath コントロールによって表示されたパスの方向を反転させるには

  • SiteMapPath コントロールを含んでいる ASP.NET Web ページ内で、コントロールに PathDirection と PathSeparator を追加します。

    たとえば、SiteMapPath コントロールのコードは次のようになります。

    <asp:SiteMapPath ID="SiteMapPath1" Runat="server"
  PathDirection="CurrentToRoot"
  PathSeparator=" <-- " >
</asp:SiteMapPath>

表示される親リンクの数を制限するには

  • SiteMapPath コントロールを含んでいる ASP.NET Web ページ内で、コントロールに ParentLevelsDisplayed プロパティを追加します。

    たとえば、最大で 2 つの親リンクを表示する SiteMapPath コントロールのコードは次のようになります。

    <asp:SiteMapPath ID="SiteMapPath1" Runat="server"
  ParentLevelsDisplayed="2" >
</asp:SiteMapPath>

ユーザー補助

通常、サイト ナビゲーション コントロールは Web サイトのすべてのページで使用されます。スクリーン リーダーおよびその他の補助デバイスは、ページへのアクセスやポストバックが発生するたびにナビゲーション コントロールのテキストを読み上げます。

SiteMapPath サイト ナビゲーション コントロール、TreeView サイト ナビゲーション コントロール、および Menu サイト ナビゲーション コントロールには SkipLinkText という名前のプロパティが含まれるため、後続のページまたは同じページのビューで繰り返される情報をスキップできます。

ユーザー補助のスキップ機能を使用するには

  • ナビゲーション コントロールを含んでいる ASP.NET Web ページ内で、コントロールに次のプロパティを追加します。

    SkipLinkText="Skipped Menu"

    たとえば、SiteMapPath コントロールのコードは次のようになります。

    <asp:SiteMapPath ID="SiteMapPath1" 
  Runat="server" 
  SkipLinkText="Skip Breadcrumb">
</asp:SiteMapPath>

参照

処理手順

方法 : ASP.NET CreateUserWizard コントロールをカスタマイズする

概念

ASP.NET サイト ナビゲーションの概要

ASP.NET Web サーバー コントロール テンプレート

SiteMapPath Web サーバー コントロールの概要

TreeView Web サーバー コントロールの外観と操作性のカスタマイズ

ASP.NET のサイト ナビゲーションの保護

データ アクセスのセキュリティ保護

その他の技術情報

ホストされた環境での ASP.NET アプリケーションのセキュリティ