視聴者参加型雀魂(麻雀)向け!参加型管理を麻雀風に表示するわんコメ配布テンプレート【order-mahjongsoul】

order-mahjongsoul わんコメ テンプレート テンプレート
この記事は約6分で読めます。
記事内に広告が含まれています。

今回は以前の参加型管理をちょっとオシャレにするテンプレに続き、わんコメで使える「参加型管理」の参加者が表示できる、リスナー参加型雀魂(麻雀)向けのテンプレートです。

order-mahjongsoul」についてよくご確認の上、ご利用をお願いいたします。

スポンサーリンク

order-mahjongsoulとは

order-mahjongsoul」は、わんコメのテンプレートとして動作し、参加型管理の参加者を表示するテンプレートになっています。

参加型管理デフォルトで使えるテキストファイル形式とは違い、参加者のお名前に絵文字が入っていても、基本的にはそのまま表示が可能です。

雀魂(じゃんたま)向けの表記ではありますが、カスタマイズすればその他の麻雀ゲームでも使用は可能です。

コメント表示向けの配布テンプレートは、別途ご用意していますので、そちらをご利用ください。

簡単な動作状況は、以下の動画をご確認ください。

\動画準備中/

更新情報

1.0.1 配信者用に風牌の「東」を削除(2024/03/17)
1.0.0 公開版(2024/03/17)

CSS設計完全ガイド ~詳細解説+実践的モジュール集
技術評論社
¥3,608(2024/11/20 12:38時点)
CSSのさまざまな設計手法を紹介しつつ、考え方や実践のポイントを明確化します。そのうえでボタン、ラベル、カード、テーブル…といったウェブの定番的なモジュールを網羅的に取り上げ、さらにはそれらの組み合わせ方まで、実践的なコードを紹介します。

ご利用条件

「order-mahjongsoul」テンプレートご利用にあたっては、以下の条件に同意できる方のみご利用をお願いいたします。

  • 再配布をしないこと
  • (再配布を伴わないご自身でのカスタマイズ利用は自由です)

  • 自作等のご自身で作成されたものと誤解される発言をなさらないこと
  • ご自身でカスタマイズされた場合にも配布をなさらないこと
  • いかなる問題が生じた場合にも当方が責任を負うものではないことをご理解いただくこと
  • 直接のダウンロードリンク(直リンク)を公開しないこと

再配布は禁止とさせていただくため、テンプレートをご友人や企業間などいかなる場合でも、配布はなさらないようお願いいたします。

テンプレートは直接配布なさらず、必ず当ページからダウンロードしていただきたいです。

また、ダウンロード用のリンク(直リンク)は公開なさらないようにご紹介をお願いいたします。

概要欄などで、このテンプレートを使っている表記やダウンロード元の記載(いわゆるクレジット表記)をする必要はありません。
それでも、書いてくれたり使ってみた感想をいただけると喜びます。

ダウンロード

ダウンロードにあたっては、ご利用条件の確認をいただいた上で、同意できる方のみご利用をお願いいたします。

ちょくちょくアップデートされる可能性があるため、このページをブックマークされるか、ツイッター(X)をフォローいただくのをおすすめ!
動作におかしな点がありましたら、ページ下部にあるコメント欄作者のTwitter(X)にお知らせいただけると嬉しいです。

通常版(四麻)
order-mahjongsoul 1.0.1ダウンロード

三麻版
order-mahjongsoul-sanma 1.0.1ダウンロード

ダウンロードしましたら、わんコメのテンプレートフォルダに入れてください。

動作確認は、わんコメ5.2βバージョンにて行われています。

わんコメバージョン4.Xまでとバージョン5.0以降では、カスタムテンプレートを入れるフォルダが異なるため、注意が必要です。

テンプレートのカスタマイズ

このテンプレートのカスタマイズは、ご利用条件の確認を守っていただける限り自由です。

もっと高度に調整をして使用されても、もちろん構いません。

簡単にではありますが、内蔵しているファイルの紹介やおすすめのカスタマイズを紹介しておきます。

ファイルの編集にはどのようなソフトを利用するのも自由ですが、Visual Studio Codeのような、入力補助もあるようなツールがあると便利です。

テンプレートをカスタマイズされる際には、必ず元のテンプレートをフォルダごとコピーし、フォルダの名称を変更した上で、処理を行ってください。
そうしないと、本テンプレートのアップデートをする際に、上書きされてしまいます。

雀魂 参加待ちリストの文字を変える

雀魂 参加待ちリスト」の文字は、style.cssファイルを編集(カスタムCSSに追記)することで変更できます。

style.cssを直接編集する場合は、34行目のcontent内の文字列を変更してください。

カスタムCSSに記述する場合は、以下のコードを使います。

.order-top-text::after {
  content: "変更したい文字列";
}

変更したい文字列に、たとえば「参加待ち」と入れれば、テンプレート上でも「参加待ち」のタイトル表記になります。

参加される方は概要欄参照の文字を変える

参加される方は概要欄参照」の文字は、style.cssファイルを編集(カスタムCSSに追記)することで変更できます。

style.cssを直接編集する場合は、43行目のcontent内の文字列を変更してください。

カスタムCSSに記述する場合は、以下のコードを使います。

.order-sub-text::after {
  content: "変更したい文字列";
}

変更したい文字列に、たとえば「参加したい方は参加希望とコメント」と入れれば、テンプレート上にもそのように表示されます。

また、ここの文字列自体を消したい場合は、CSSで

.order-sub-text {
  display: none;
}

と追記すると便利です。

参加時のアイコン(アバター)を消す

参加型管理へ追加されたときのリスナーのアイコン(アバター)を消す場合も、style.cssファイルを編集(カスタムCSSに追記)することで変更できます。

以下のコードを、style.cssファイルもしくはカスタムCSSどちらかに追記してください。

.avatar {
  display: none;
}

参加回数を消す

参加回数を消すためには、style.cssファイルを編集(カスタムCSSに追記)するか、HTMLファイルを編集することで削除できます。

まず、index.htmlファイルを編集する場合は、32行目~34行目のコードを削除してください。

index.htmlファイルを編集した場合は、CSSの変更は必要ありません。

CSSで処理する場合は、以下のコードをstyle.cssファイルもしくはカスタムCSSどちらかに追記してください。

.count {
  display: none;
}

HTMLファイルを編集して記述を削除した場合、コピー元のファイルを復元したり再度ダウンロードしないと元通りの表示ができなくなるため、HTMLファイルを直接編集するよりCSSで見えなくするのがおすすめです。

背景色を変える

背景の色を変えるためには、style.cssファイルを編集(カスタムCSSに追記)することで変更できます。

style.cssを直接編集する場合は、29行目のbackground内の色指定を変更してください。

カスタムCSSに記述する場合は、以下のコードを使います。

.frame {
  background: #好きな色を指定する;
}

もし背景を完全に透過させるのであれば、

background: rgba(0,123,45,0);

のように、最後の数字をゼロにすればオッケーです。


テンプレートの情報

ベーステンプレートとして、わんコメの公式サイトで配布されている「base-order-template」が使われています。

「order-mahjongsoul」テンプレートは無料でご利用いただけますが、ご利用条件にあるとおりの利用や紹介をしてください。

本テンプレートに含まれる麻雀牌とリーチ棒の画像は、麻雀王国様の素材を使わせていただいています。

テンプレートのイメージは、東南西北の風牌は卓についている参加中の方、そして点棒を出しているのは牌がほしい次回以降の参加者をイメージして作っています。

画像を置き換えれば好きな牌にも変更できるので、好きなようにカスタマイズしてほしいです。

ベースとなっているbase-order-templateは、テンプレートをカスタマイズする方向けに配布されていますが、そのまま使用することもできる公式テンプレートでもあります。

本テンプレートでは、参加型管理で「参加型の麻雀の待機している」人のリストであることを明確に記述してあるため、なんの名前が並んでいるのかわかりやすくなっています。

また、わんコメ5.2 beta.26より実装された、メタ情報も追加してありますので、それ以降のバージョンのわんコメで使えば、テンプレ一覧を開いたときにどんなテンプレートか簡易的にわかるようになりました。

本ページへのリンクもメタ情報に付与されているので、新しいバージョンを簡単に探せたり、どこからダウンロードしたのか忘れてしまっても安心です。

コメント

スポンサーリンク
タイトルとURLをコピーしました