BlazorでのWebアプリケーション開発手法１【C#】B03_サイドバーのアイコンを変更する方法

前回のレクチャーで、新しく追加した「計測」ページへのリンクをサイドバーのサブメニューから起動できるようになりました。ただし、そのメニュー項目のアイコンは Weather 用のリンクをコピーして作成したため、Weather と同じアイコンのままになっています。今回はこのアイコンを、計測画面にふさわしいものに差し替える手順を見ていきます。

図1　「計測」メニューのアイコンが「Weather」と同じままになっている

アイコンの設定は NavMenu.razor と同じ階層にある NavMenu.razor.css に記述されています。このファイルをダブルクリックして開き、下の方にスクロールしていくと、クラス名の語尾が「nav-menu」になっているブロックがいくつか並んでいます。これが Home・Counter・Weather それぞれのアイコンを定義している部分です。

図2　NavMenu.razor.css を開き、既存のアイコン定義（nav-menuブロック）を確認する

今回は既存のメニューにもう1つアイコン定義を追加する形で進めます。まずは一番下にある .bi-list で始まる nav-menu ブロック（Weather 用）を、先頭の .bi から末尾の } までまるごと選択してコピーし、その下に貼り付けます。

図3　コピー元となる .bi-list-nested-nav-menu ブロックを選択する

貼り付けができたら、今度は使用するアイコンを決めます。Bootstrap はデフォルトでアイコン一式を利用できるようになっているので、検索窓で「Bootstrap Icon」と入力して公式サイトを開きます。

図4　「Bootstrap Icon」で検索する

Bootstrap Icons のサイトには、あらかじめ多数のアイコンが用意されています。この一覧から好きなものを選んで使うことができます。今回は計測値を表示する画面なので、心電図のような波形の「activity」アイコンを選びました。

図5　Bootstrap Icons のアイコン一覧ページ

図6　計測画面向けに「activity」アイコンを選択する

アイコンをクリックすると、そのアイコンの詳細ページに移動します。ここではまず「アイコンフォント」欄に表示されている bi-activity という名前をコピーします。このアイコンごとに異なる名前が、CSSのクラス名部分に使われます。

図7　アイコン詳細ページでアイコン名「bi-activity」をコピーする

コピーした名前を使って、先ほど複製した nav-menu ブロックの名前部分（.bi-list から -nav-menu の手前まで）を書き換えます。今回は .bi-activity-nav-menu という名前になります。

図8　複製したブロックの名前を .bi-activity-nav-menu に書き換えた状態（中身の内容はまだ変更前）

続いてブロックの中身（アイコンの絵柄そのもの）を差し替えます。アイコン詳細ページを下にスクロールすると「HTMLをコピー」という項目があり、その右側のボタンを押すと SVG のソースコードがクリップボードにコピーされます。

図9　「HTMLをコピー」からSVGのソースコードをコピーする

コピーしたSVGは、そのままではCSSの background-image に使える形式になっていないため、別のWebページで変換します。検索窓に「url svg」と入力し、URL-encoder for SVG というサイトを開きます。

図10　「url svg」で検索する

図11　URL-encoder for SVG のページ

このページの「Insert SVG」欄に、先ほどコピーしたSVGを貼り付けます。すると右側の「Take encoded」欄に変換結果が表示されるので、さらにその下にある「Ready for CSS」の内容をコピーします。

コピーしたCSS用コードを、NavMenu.razor.css の .bi-activity-nav-menu ブロックの { から } までの中身とそっくり入れ替えます。

図12　貼り付け対象として、ブロックの中身（既存のコード）を選択した状態

図13　「Ready for CSS」の内容を貼り付けた直後（fill はまだ currentColor のまま）

貼り付けた直後は fill=’currentColor’ という記述になっていますが、他の nav-menu ブロックと合わせるため、これを white に書き換えます。書き換えるとサイドバーの背景色に合わせて白いアイコンとして表示されるようになります。

図14　fill を white に書き換えて完成した .bi-activity-nav-menu ブロック

.bi-activity-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg
    xmlns='http://www.w3.org/2000/svg' width='16' height='16'
    fill='white' class='bi bi-activity' viewBox='0 0 16
    16'%3E%3Cpath fill-rule='evenodd' d='M6 2a.5.5 0 0
    1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0
    1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47
    8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5
    0 0 1 6 2' /%3E%3C/svg%3E");
}

CSS側の準備ができたら、最後に NavMenu.razor 側の該当する span タグの class 属性を書き換えます。「計測」メニューの span 要素は元々 Weather からコピーしたときのまま class=”bi bi-list-nested-nav-menu” になっているので、先頭の bi- は残し、続く .bi-list-nested から -nav-menu までの部分だけを、先ほど作成した bi-activity-nav-menu に置き換えます。

図15　書き換え前：「計測」メニューの span が bi-list-nested-nav-menu のままになっている

図16　書き換え後：span の class が bi-activity-nav-menu になった

<div class="nav-item px-3">
    <NavLink class="nav-link" href="measure">
        <span class="bi bi-activity-nav-menu" aria-hidden="true"></span> 計測
    </NavLink>
</div>

ここまでできたら実行して確認します。サイドバーの「計測」メニューのアイコンが、Weather と同じ横棒3本のアイコンから、心電図のような波形の activity アイコンに変わっていることが確認できます。

図17　実行結果。「計測」メニューが独自のアイコンで表示されるようになった

このように、NavMenu にメニュー項目を1つ追加するときは、①NavMenu.razor.css に新しいアイコン用のブロックを追加し、②Bootstrap Icons から使いたいアイコンを選んで名前とSVGコードを取得し、③URL-encoder for SVG でCSS用の形式に変換して貼り付け、④fill を white に統一し、⑤NavMenu.razor 側の class 属性を新しいブロック名に差し替える、という流れになります。同じ手順でメニューを増やしていくことができるので、覚えておくと便利です。