にじさんじ非公式wiki 検索除外

CSSスプライトを活用したアイコンプラグインの使い方

1. アイコンシートの作成
   アイコンシート設定ページにサイズと画像ソースを記入すると、入力された情報をもとにアイコン画像が内部で結合され、1枚の画像が作成されます。

2. アイコン表示
   作成されたシートをアイコンプラグインで呼び出します。

アイコンシートの作成

シートのパス
:config/plugin/icon/ 配下のページを使用します。

シートの例
:config/plugin/icon/sheet1
:config/plugin/icon/sheet2
:config/plugin/icon/sheet3

シート作成テンプレート
以下のテンプレートを使用してシートを作成します。シートの名前は任意ですが、短くわかりやすい文字列の方が後でアイコンを指定する際に記述が容易です。

*サイズ
|width|height|pixel perfect|h
|32|32|0|

*画像ソース
|key|ref|h
|月ノ美兎|&ref(月ノ美兎/face.png);|
|勇気ちひろ|&ref(勇気ちひろ/face.png);|
|える|&ref(える/face.png);|
|樋口楓|&ref(樋口楓/face.png);|

サイズ
一括でアイコンの表示サイズを指定します。

• width: アイコンの幅 (px)
• height: アイコンの高さ (px)
• pixel perfect: 通常は 0 を設定してください。
  • 0: 大きな画像をブラウザで縮小表示し、鮮明に見せる処理を行います。いわゆる Retina 対応です。
  • 1: どのような場合でも縮小表示せず、指定されたサイズでアイコンを作成し表示します。

画像ソース
画像を指定して必要な数だけ並べます。

• key: シート内でユニークである必要があります。key の名前は任意ですが、短くわかりやすい文字列の方が後でアイコンを指定する際に記述が容易です。
• ref: ref プラグインで画像を指定します。key を変えて同じ画像を複数使うことができますが、結合ファイルのサイズが増えます。

アイコン表示

アイコンを表示するには、以下のように記述します。

&icon(sheet, key);

• sheet: アイコンシートの名前
• key: 表示するアイコンのキー

記述例:

&icon(sheet1, 月ノ美兎);

転送量にご注意

CSSスプライトを使うとリクエスト数を減らすことができますが、使い方によっては転送量が増えることもあります。
ただし、少しの増加なら問題ありません。

アイコンシート内の画像ソースの容量が一定量を超えると、結合される画像が複数に分割されます。アイコンが1つでも呼び出されると、シート内の1枚の結合画像が読み込まれるため、不要な転送量が発生することがあります。そのため、運用によってはシートを分けるか、画像ソースの並び順を調整することで転送量が少なくなります。

ブラウザのキャッシュが利用できるので最初の流入ページで使うと効果が高いと思います。

• FrontPage
• 配信予定リスト
• にじさんじGTAサーバーまとめ
• 公式ライバー
• MenuBar