ナビゲーションバーのボタン画像化に関して

Question

前提・実現したいこと

CSSでナビゲーションバーのボタンを画像する作業を行っています。
全部で８個のアイコン画像を入れる予定です。

発生している問題・エラーメッセージ

文字を並べるところまでは分かったのですが、画像の入れ方がわかりません。
どのように記述すればよいでしょうか？

該当のソースコード

<style type="text/css"> nav{ text-align: center; } nav ul{ margin: 0 ; padding: 0 ; } nav li{ list-style: none; display: inline-block; width: 10%; min-width: 90px; } nav li:not(:last-child){ border-right:2px solid #ddd; } nav a{ text-decoration: none; color: #333; } nav a.current{ color: #00B0F0; border-bottom:2px solid #00B0F0; } nav a:hover{ color:#F7CB4D; border-bottom:2px solid #F7CB4D; } </style> <nav> <ul> <li><a class="”current”> <li><a href="%E2%80%9D#%E2%80%9D" target="_top"> 季節商品</a></li> <li><a href="%E2%80%9D#%E2%80%9D" target="_top">防犯カメラ</a></li> <li><a href="%E2%80%9D#%E2%80%9D" target="_top">小型カメラ</a></li> <li><a href="%E2%80%9D#%E2%80%9D" target="_top">スポーツ＆アウトドア</a></li> <li><a href="%E2%80%9D#%E2%80%9D" target="_top">PC・通信</a></li> <li><a href="%E2%80%9D#%E2%80%9D" target="_top">家電・AV</a></li> <li><a href="%E2%80%9D#%E2%80%9D" target="_top">衛星用品</a></li> <li><a href="%E2%80%9D#%E2%80%9D" target="_top">その他</a></li> </ul> </nav>

試したこと

補足情報（FW/ツールのバージョンなど）

楽天コンパスというCMSを使っていて、フリースペースから入力しています。

Comments

[Lhankor_Mhy]

画像をどこに入れるのですか？　a要素でしょうか？
その場合、今現在はいっている文字は削除するのですか？

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

> 楽天コンパスというCMSを使っていて

そのCMS知らないんですが、タグ「CSS」だけで分かる人が見るでしょうか。
例えば下記は必要では。
https://teratail.com/tags/CMS

[Daito111]

a要素に画像を入れて、文字は削除せずに使おうと思っています。
もし、それが出来ない場合は画像の中に文字を入れます。

「CMS」タグを追加しました。

Answer 1

こんにちは。

以下のようなことでしょうか？

<li><a href="%E2%80%9D#%E2%80%9D" target="_top"><img src="【画像のURL】" alt=""> 季節商品</a></li>

Comments

[Daito111]

表示できました。ありがとうございます。