WEB上で文書のアイコンを配置する方法

会社の掲示板を担当しており、会社から「アップロードしたファイルの拡張子に合わせて、アイコンを表示するようにしてほしい」と言われました。
掲示板は無料の「concrete5」を使用しており、導入から３～４年経過していることもあり、CSSがどこにあるのかもよくわかっていない状況です。

都度HTMLに記述すれば可能であるのはわかるのですが、
利便性も考慮して条件設定などできないかを教えていただきたいです。
できれば、HTMLの記述だけで対応できると助かります。
（例：.pdfならPDFのアイコンを、.xlsxならExcelのアイコンを自動で反映）

よろしくお願いいたします。

No.2 回答者： fujillin 回答日時： 2022/09/03 14:51

No1です。

＞そもそもCSSファイルなどを保管するサーバーなども一切わからない状態でして、、、
HTMLファイルの存在はわかっているのでしょうか？
それともHTML自体もプログラム等から出力される仕組みなのでしょうか？

少なくとも表示はできているのでしょうから、そのソースを見ることで、CSSがどのように適応されているかはわかるものと思いますけれど？
サーバーにCSSファイル等をアップすることも不可能なのでしょうか？

＞javascriptでできるなら教えていただきたいです
上記のような状態で、どうやってjavascriptを組み込めるのかも不明です。
「スクリプトなら可能で、CSSだと不可能」とおっしゃる意味もわかりません。
また、文書構造すら不明のまま「スクリプトを教えろ」と言われても、抽象的な回答しかできませんけれど、ご質問のご様子から想像する限り、それが質問者様の役に立つとも思えませんけれど・・

簡単に言うなら、「文書全体から対象要素を特定して、画像要素を埋め込めばよい」ということになります。
　document.querySelectorAll('a').forEach(e=>{
　　// eに対して該当するかチェック
　　// 該当するなら画像を追加挿入
　});
みたいな感じでしょうか。

この回答へのお礼

なんでそういう言い方できないんですかね。
子供っぽい言い方しかできないんですね、、、

お礼日時：2022/09/03 14:53

No.1 回答者： fujillin 回答日時： 2022/09/03 14:23

こんにちは

実態がどのような構成になっているのか不明のままではどうしようもありませんけれど・・

例えばの例として・・
仮に、ファイルの指定がリンク要素等になっているものとします。
　<a href="hoge.pdf">hoge.pdf</a>
とか
　<a href="fuga.docx">fuga.docx</a>
などのように。

上記の場合であれば、使用しそうなアイコン画像をそれぞれ用意しておいて、
a[href$=".pdf"]::before {
display: inline-block;
width: 24px; height: 24px;
margin-right: 5px;
vertical-align: middle;
content:" ";
background: center / cover url("./icons/pdf.png");
}
のようなCSSを設定しておくことで、拡張子に応じたアイコンを表示することが可能になると思います。


実態が不明なのでなんともわかりかねますが、実際の構造に応じて上記のような要領で適用することが可能ではなかろうかと推測します。

別法として、javascriptで上記と同じことを行うという方法も考えられますが、（失礼ながらご存じではないと思いますので）ハードルは高いのではないかと想像します。

この回答へのお礼

回答ありがとうございます。
CSSを設定するのはわかっているのですが、そもそもCSSファイルなどを保管するサーバーなども一切わからない状態でして、、、
javascriptならHTMLとの親和性も高いので、javascriptでできるなら教えていただきたいです

お礼日時：2022/09/03 14:26