はじめに
2025/1/14リリースのVer.1.4.12.0から新機能としてサイト一覧のパネルにサイト種別を識別できるアイコンを追加されました。ceruleanなどの新UIでは、従来のsunnyなどのようにサイト種別が分からなくなっていたため、それに対応するアップデートになります。
当社のサイトで早速バージョンアップをしてみたところ、こんな感じの表示になりました。
サイト画像を設定しているサイトでも、サイト種別アイコンが表示されているのでどのサイトか一目瞭然で区別が出来ます。
ただ、見た目で気になることが・・・。件数表示の左側に表示されている都合上、サイトごとに位置がバラバラになってしまっているためあまり美しくない状態になってしまっています。今回はこれを解消させる別解を紹介します。
構造をみてみよう
サイトメニューの部分ですが、HTMLはこのような構成になっています。
<li class="nav-site sites has-image ui-sortable-handle" data-value="2202349" data-type="Sites">
<a href="/items/2202349/index">
<div class="site-icon">
<img alt="image" src="/items/2202349/binaries/siteimagethumbnail/?20230814071747">
</div>
<span class="title">INNOVERA</span>
<div class="heading"></div>
<div class="conditions">
<span class="elapsed-time" title="更新日時 2025/01/21 9:09:24">44 分前</span>
<span class="reference material-symbols-outlined" title="フォルダ">folder</span>
<span class="count" title="件数">20431</span>
</div>
</a>
</li>
プリザンターではHTMLのレンダリングはサーバ側で一括して行う関係上、Razorなどのようなテンプレートは使っていないので、これらの要素をCSSやJavaScriptを駆使して変更していきます。
このような時に役立つのが拡張スタイルと拡張スクリプトです。今回はその2つ機能を駆使して変更をしていきます。
別解1「背景表示に変更する」
li.nav-siteが外枠なので、それに対してサイトの種別を表すアイコンを背景に設定してみます。作ってみた拡張スタイルはこんな感じです。
.conditions .reference {
display: none !important;
}
//サブディレクトリで運用している場合はsrcとurlの書き換えが必要
.nav-site:not(.to-parent):not(:has(img[src^='/images/icon-site-'])) {
background-position: left 0.5em bottom 0.5em;
background-repeat: no-repeat;
background-size: 2em;
.title {
padding-left: 2em;
padding-right: 2em;
}
&.sites {
background-image: url("/images/icon-site-sites.svg");
}
&.results {
background-image: url("/images/icon-site-results.svg");
}
&.issues {
background-image: url("/images/icon-site-issues.svg");
}
&.wikis {
background-image: url("/images/icon-site-wikis.svg");
}
&.dashboards {
background-image: url("/images/icon-site-dashboards.svg");
}
}
これを先ほどと同じサイトに適用すると、次のような表示になります。
レスポンシブ表示をスマホで確認すると次のような表示になります。
全体的にまとまり感を出すことが出来ました。サイトアイコンが設定済みのサイトには表示されないようにしていますが、まとまり感優先で表示させたい場合は、次のように変更すると全てのサイトで表示されます。
- .nav-site:not(.to-parent):not(:has(img[src^='/images/icon-site-'])) {
+ .nav-site:not(.to-parent) {
別解2「表示する場所を変えてしまう」
見た目で気になるところはどこかと言われると、件数表示の左側に表示されるため位置がガタガタになってしまうところです。では、件数表示の右側に表示してしまえば気にならないのでは？という解決法です。
先ほどのHTMLの<span class="reference material-symbols-outlined" title="フォルダ">folder</span>の部分を<span class="count" title="件数">20431</span>の後ろに移動させる必要があります。対象要素を探して入れ替える方法もあるのですが、今回はシンプルにCSSで既存のものを非表示にして、<div class="conditions">に要素追加する方法で対応してみます。
作ってみた拡張スタイルと拡張スクリプトは次の通りです。
.conditions .reference:not(.append) {
display: none !important;
}
//サブディレクトリで運用している場合はsrcの書き換えが必要
$('.nav-site.sites a:not(:has(img[src^="/images/icon-site-"])) .conditions:not(:has(.reference.append))').append('<span class="reference append material-symbols-outlined">folder</span>');
$('.nav-site.results a:not(:has(img[src^="/images/icon-site-"])) .conditions:not(:has(.reference.append))').append('<span class="reference append material-symbols-outlined">table</span>');
$('.nav-site.issues a:not(:has(img[src^="/images/icon-site-"])) .conditions:not(:has(.reference.append))').append('<span class="reference append material-symbols-outlined">view_timeline</span>');
$('.nav-site.wikis a:not(:has(img[src^="/images/icon-site-"])) .conditions:not(:has(.reference.append))').append('<span class="reference append material-symbols-outlined">text_snippet</span>');
$('.nav-site.dashboards:not(:has(img[src^="/images/icon-site-"])) a .conditions:not(:has(.reference.append))').append('<span class="reference append material-symbols-outlined">dashboard</span>');
これを先ほどのサイトに適用すると、次の様な表示になります。
こちらでも全体的にまとまり感を出すことが出来ました。サイトアイコンが設定済みのサイトには表示されないようにしていますが、件数表示部分のガタガタ感を消したいというのがそもそものスタートなので、全てのサイトに表示させる方が良いように思います。次のように変更すると全てのサイトで表示されます。
$('.nav-site.sites a .conditions:not(:has(.reference.append))').append('<span class="reference append material-symbols-outlined">folder</span>');
$('.nav-site.results a .conditions:not(:has(.reference.append))').append('<span class="reference append material-symbols-outlined">table</span>');
$('.nav-site.issues a .conditions:not(:has(.reference.append))').append('<span class="reference append material-symbols-outlined">view_timeline</span>');
$('.nav-site.wikis a .conditions:not(:has(.reference.append))').append('<span class="reference append material-symbols-outlined">text_snippet</span>');
$('.nav-site.dashboards a .conditions:not(:has(.reference.append))').append('<span class="reference append material-symbols-outlined">dashboard</span>');
別解3「表示はなくてもOK」
そもそも表示はなくてもOKというパターンもあるかと思います。その場合は次の様な拡張スタイルを使用します。
.conditions .reference {
display: none !important;
}
まとめ
サイトの種別アイコンのデザイン性を向上させる方法を紹介しました。今回のように拡張スタイルと拡張スクリプトを駆使すると、HTML要素の書き換えやスタイルの変更などが気軽に行えるので、是非活用してみてください。