neonテンプレートの発光をなくして縁取りやアバターが付与されたテンプレ「neon-custom-tokumei」

shinkunoshizuku · 2023 年 10 月 16 日午前 10:08

テンプレート名

neon-custom-tokumei

概要 / スクリーンショット

neonをベースにカスタマイズのトピックで話が出ていた「アバター（アイコン）画像付与」「ニコ生の184（匿名）リスナー画像指定」「neonの発光（シャドウ）なし」「文字の縁取り」などが施されたテンプレートです。

動作確認バージョン

わんコメ 5.0.4

配布先

ライセンス

改変OK, 再配布NG

制限事項

わんコメ5.0以降での動作を想定
4.x以前だと匿名コメントのアバター（アイコン）置き換えが正常に動作しない可能性あり
テンプレエディタでのカスタマイズ使用時に表示が崩れる場合あり

詳細

2つのカスタマイズ相談のトピックが構想のもとになっています。

わんコメに入っているneonでは発光していますが、このテンプレートでは縁取りに置き換えました。

人気のneonテンプレートにアイコン（アバター）を表示させたい！
ネオンの発光（シャドウ）を消して表示したい！
ネオン風の発光ではなく文字の縁取りで使ってみたい！
文字に影をつけたい！

などなど、もとから使えるneonのテンプレートに +αした味を出したいとき に使ってみてください。

テンプレエディタも使用可能ですが、アイコン（アバター）を表示するように改変してあるため、表示の崩れが発生するケースもあります。

配布先に大まかな設定項目の解説や対処法の記述がなされているため、参考にしながらカスタマイズしやすい方法を手探りいただくのが推奨です

wankomeyuza2023_9485 · 2023 年 11 月 1 日午前 8:24

ご報告
今の最新バージョン（1.0.3）でもニコ生での匿名コメントのアイコンが指定アイコンではなく、
元の匿名という文字アイコンのままの場合があるようです。
匿名表記はまず被らなそうな名前にしているのと、カマタイズの時に構築してくださったやつに、カスタムCSSで追記している方では起こらないのでまだ何らかの問題があるのかもしれません。
一応カマタイズの方にあった方にカスタムCSSに追記しているしているのを貼り付けます。（ファント名だけは5555に変えておきますがご容赦を）

wankomeyuza2023_9485 · 2023 年 11 月 1 日午前 8:28

/* テンプレカスタムここから */
@font-face {
font-family: “5555”;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/kosugimaru/v14/0nksC9PgP_wGh21A2KeqGiTv4ur_mWjfXWdNMtg65zwIiCccFzPAsA.2.woff2)format(“woff2”);
unicode-range: U+ffd7,U+ffda-ffdc,U+ffe0-ffe2,U+ffe4,U+ffe6,U+ffe8-ffee,U+1f100-1f10c,U+1f110-1f16c,U+1f170-1f1ac,U+1f200-1f202,U+1f210-1f234
}

@font-face {
font-family:“Kosugi Maru”;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/kosugimaru/v14/0nksC9PgP_wGh21A2KeqGiTv4ur_mWjfXWdNMtg65zwIiCccFzPAsA.3.woff2)format(“woff2”);unicode-range:U+fa10,U+fa12-fa6d,U+fb00-fb04,U+fe10-fe19,U+fe30-fe42,U+fe44-fe52,U+fe54-fe66,U+fe68-fe6b,U+ff02,U+ff04,U+ff07,U+ff51,U+ff5b,U+ff5d,U+ff5f-ff60,U+ff66,U+ff69,U+ff87,U+ffa1-ffbe,U+ffc2-ffc7,U+ffca-ffcf,U+ffd2-ffd6
}

@font-face {
font-family:“Kosugi Maru”;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/kosugimaru/v14/0nksC9PgP_wGh21A2KeqGiTv4ur_mWjfXWdNMtg65zwIiCccFzPAsA.4.woff2)format(“woff2”);unicode-range:U+f92d-f959,U+f95b-f9f2,U+f9f4-fa0b,U+fa0e-fa0f
}

wankomeyuza2023_9485 · 2023 年 11 月 1 日午前 8:30

途中文字制限により略

body {
font-family: “5555”,sans-serif
}

.avatar {
min-width: 38px;
width: 38px;
height: 38px
}
.comment-text,.name {
font-size: 21px
}

.comment-text img {
height: 1em;
width: auto
}

.marquee-container {
margin-bottom: -1.9rem;
}

wankomeyuza2023_9485 · 2023 年 11 月 1 日午前 8:33

詳しくないので要らない記述が多々あるとは思うのですが、
カマタイズの方にカスタムCSS追記している方では問題なく動いており、
匿名アイコンの置換も起こっていません。
なにかのご参考になればと思い書き込みました。

wankomeyuza2023_9485 · 2023 年 11 月 1 日午前 8:40

この追記部分ではなく以前カマタイズでみた記憶があったような（今は見つかりませんでした）ニコ生の匿名の場合は指定名に置き換え、匿名でない場合はそのままの名前を出すというカスタムCSSがあった記憶があるのですがそれをカスタムCSSに混ぜて使っています。

無知のコメントで申し訳ないですが、1.0.3で稀に起こる問題がカスタムCSSに追記している方では全く起こっていません。なにかのご参考になれば。

wankomeyuza2023_9485 · 2023 年 11 月 1 日午前 8:41

追記
ニコ生の匿名の場合は指定名に置き換え、匿名でない場合はそのままの名前を出すというカスタムCSS
この部分がどれだったかは私にはわかりませんご容赦を。

wankomeyuza2023_9485 · 2023 年 11 月 1 日午前 8:44

文章が前後して申し訳ないですが、
問題が全く起こっていないのは、

にカスタムCSSを追加して使っている方です。

shinkunoshizuku · 2023 年 11 月 1 日午前 11:54

ご報告ありがとうございます。

現状1.0.3ですと、アバターの置き換えは以前のテンプレートカスタマイズで使っていた [data-user="匿名"] .avatar というものから [data-mail="184"] .avatar に置き換えてあるため、ニコ生側の機能としてなふだを使わない匿名状態（184状態）に反応するよう設計し直しました。

配布している1.0.3テンプレートのCSSですと、現在55行目から62行目にかけて、アバターの置き換え処理がなされています。

当方環境でコメントの取得と置き換え状況を確認したところ、配信者から見て「なふだがON」であるとリスナーの名前を取得してきますが、「なふだがOFF」だと184（匿名）状態となり、184.pngへの置き換えがなされているようでした。

[data-user="匿名"]を使わなくなったため、わんコメ設定内にあるニコ生の匿名表記の設定には依存していません。

差し支えないようであれば問題が発生している配信で生成されたコメントのログファイルのご提出、もしくは問題がよく確認できるライブ配信を教えていただければ、どのような状況で

が発生しているのか、確認できるかもしれません。

コメントログを出力するためには、別途設定が必要です。

p.s. ニコ生のギフト類（ニコニ広告など）の問題を別途見つけたため、バージョン1.0.4で修正してあります。
修正したため、置き換え処理は1.0.4だと52行目～59行目に変化しています。

makorist37 · 2023 年 11 月 8 日午後 12:52

質問主です。
素敵なテンプレートを作成いただきありがとうございます！
早速使わせていただきます。本当に感謝します

makorist37 · 2023 年 11 月 8 日午後 1:25

ちなみになんですが、アイコンのアバターをコメントの左に置くことはできますか？コメントした人の名前は非表示希望です。

shinkunoshizuku · 2023 年 11 月 15 日午後 11:43

お返事遅くなり申し訳ございませんでした。

アバターをコメントの左に置く
名前を非表示

この2つの項目自体はHTMLとCSSを少しカスタムしていただければ可能です。

one-marqueeがカスタム時になかなか難しい動きをするため、力技ではありますが、以下のような例があります。

例：

HTMLの編集

41行目のコピー

<img alt="" v-if="comment.data.profileImage" :src="comment.data.profileImage" />

40～57行目を削除し、41行目でコピーしたものを37行目に貼り付け。

<img alt="" v-if="comment.data.profileImage" :src="comment.data.profileImage" /><div class="comment-text" v-html="comment.data.comment"></div>

37行目に貼り付けたimg（アバター）にavatarのclassを付与

<img class="avatar" alt="" v-if="comment.data.profileImage" :src="comment.data.profileImage" /><div class="comment-text" v-html="comment.data.comment"></div>

以上を保存しHTMLの編集は終了。

CSSの編集

CSSの下部（60行目以降）に以下を追記

.comment-text {
    display: inline-block;
}
.avatar {
    margin-left: 0px;
    margin-right: .5rem;
}

avatarのマージンは、お好みで調整できます。

これで、名前を表示せずコメントの左隣にアバターが表示されるようになるはずです。

（見づらいですが表示イメージ）

問題点としては、one-marqueeに影響されるようできているため、長文でneonのコメントが流れる場合にはアバターごと流れていくことでしょうか。

カスタム方法を変えmarquee-containerにinline-block処理を無理にほどこそうとすると、今度は長文の文字が流れなくなり見切れるため、もう少しうまいカスタム方法を考える必要もあるかもしれません。

makorist37 · 2023 年 11 月 23 日午後 2:23

自分でいじった影響もあったので少し手直しが必要でしたが、完璧です！これが実装したかったものです！ありがとうございます！
この配信(チャンネル)で使わせていただきます！

トピック		返信	表示
neonテンプレでアイコンを表示できるようにしたうえで、匿名アイコンを指定画像に置き換えたいカスタマイズ	7	725	2023 年 10 月 11 日
テンプレートのneonと［PRO］neon-exが同じになっているのですが… 不具合	3	79	2024 年 5 月 22 日
neonテンプレにおける文字の折り返しについて質問	2	756	2022 年 9 月 4 日
ネオンがチカチカと点滅するテンプレート「neon-flicker」テンプレート配布	0	419	2024 年 8 月 17 日
テンプレートの保存先について質問	1	387	2023 年 11 月 19 日