セトリスタのオリジナルデザインをつくろう！
2025年10月25日現在、セトリスタには37種類のスキン(枠デザイン)が公開されています。ネタが思いつき次第今後も増えていくかと思われます。
そんなバリエーション豊富なセトリスタですが、それでもまだご満足いただけない、自分だけのオリジナルスキンがほしい！という場合、取りうる選択肢はみっつあります。
作者はシュダンの屋号でデザインを営んでおります。料金表にも記載しているのでご確認の上お問い合わせくだしまし。デザインから実装まで一貫対応できます。
デザインだけ別の方に依頼して作ってもらう形です。セトリスタ、だいたいのことはできますが何でもできるわけではないので、制作時に気を付けねばならない制限もある程度あります。そのあたりで僕とコミュニケーションを取ってお仕事ができる方であれば対応可能です。僕ひとりに依頼するよりは若干割高にお金がかかると思われます。
ここからが本題です。セトリスタはWebアプリなので、OBSのブラウザソース中にあるカスタムCSS欄で既存のデザインに干渉することができます。実際、一部のスキンには専用のCSSが用意されており、色やテキスト等をお好みに合わせて変更できるようになっています。
ならばカスタムCSS欄に丸ごとデザイン情報をぶち込めば、オリジナルのスキンが作れるのでは？
実にYesです。なんならそのための環境も既に用意されています。必要なのはちょっとしたCSSの知識。そんなに難しいことではありません。やっていきましょう。
いつも通りセトリスタのコントロールパネルを開きます。スキン選択のセレクトボックスで「plain」を選んでください。
するとどうでしょう、プレビュー画面にはなんとも無味乾燥なテキストの羅列が。これがセトリスタのありのままの姿、何もCSS(デザイン情報)が適用されていない文字通りプレーンなスキンになります。
こいつをカスタムCSSで逐次いい感じにしていきます。
まずは以下のcssファイルをローカルに保存して、メモ帳等で開いてみてください。
こちらをベースに自分だけのカスタムCSSを組んでいきます。
まずはフォントをかわいくしてみましょう。ここでは一例としてGoogle Fontsの「Hachi Maru Pop」に変更してみます。
「Get font」を押して、
「Get embed code」を押して、
「@import」を選んで、AをplainPlain.cssの一番上に、Bをview.plain{}のカッコの中にコピペしてください。
この状態でplainPlain.cssの内容全文をコピーして、ブラウザソースのプロパティ→カスタムCSSのテキストエリアにペーストします。
すると、
ほうらかわいくなった。
テキストがかわいくなりましたが、ちっさくてあんまりよく見えませんね。各ブロックごとに色と大きさを変えてみましょう。
上記画像のようにコードを追加してみてください。コピペ元は以下。
color: #ffffff;
font-size: 20px;
font-size: 80px;
font-size: 20px;
font-size: 40px;
font-size: 20px;
font-size: 24px;
そして同様に全文をカスタムCSS欄へコピペ。
メリハリがつきましたね。
以下同様に。
width: 600px;
padding: 40px;
background: #000000;
position: absolute; right: 40px; bottom: 40px;
width: 400px; height: 680px;
padding: 40px;
background: #000000;
position: absolute; left: 40px; top: 40px;
width: 400px; height: 280px;
padding: 40px;
background: #000000;
position: absolute; left: 40px; bottom: 40px;
なんだかセトリツールっぽくなってきましたね。
いい感じになってきましたが、今のままだと曲目や文字数が増えた際にそれぞれの枠からハミ出したり、拡がってしまいます。
white-space: nowrap;
overflow: hidden;
height: 570px;
overflow: hidden;
height: 170px;
overflow: hidden;
これでスクロールにも対応できました。セトリツールとしてちゃんと使える形になりましたね。
ここいらでいったんの完成としましょう。
このようにCSSを駆使することであなただけのセトリスタを作り上げることが可能です。ぜひ挑戦してみてください。難しそうだったらご依頼ください。
よき歌枠ライフを。
もうちょっと見た目に凝りたい！という場合、画像素材を利用するのもアリかと思います。選択肢は以下のふたつ
ここでは後者を説明していきます。
ベクターの画像形式です。Adobeで言うとイラレで作れるやつです。アニメーションにも対応してるよ。
本記事で作ったカスタムCSSから、ブロックごとの背景色を削除しましょう。
こうなります。
今回はサンプルとしてこちらをご用意しました。
画像と言いましたが、せっかくなのでこのファイルをメモ帳(あるいはお使いのテキストエディタ)で開いてみましょう。
よくわからない暗号が書いてありますね。いったん無視して今度はこちらのリンクを開いてください。
BASE64エンコーダ デコーダ SVG埋め込みタグ 変換ツール – WEBツール
このページの一番上のフォームに、先ほどのSVGファイルの中身全文をコピペして、「Base64エンコード」ボタンを押してください。
すると下のフォームに自動で変換されたコードが表示されます。「CSS backgroundスタイル」のとこの「コピー」ボタンを押して、
カスタムCSSのここにペーストします。
オマケで一行上に以下のコードを追記します。
width: 1920px; height: 1080px;
こうして改めてできたカスタムCSSをOBSにコピペすると…
CSSは大体のことはできるので、こだわり放題し放題。いろいろ試してみよう。