セトリスタのオリジナルデザインをつくろう！

2025.10.26(Sun) 20:20

2025年10月25日現在、セトリスタには37種類のスキン(枠デザイン)が公開されています。ネタが思いつき次第今後も増えていくかと思われます。

そんなバリエーション豊富なセトリスタですが、それでもまだご満足いただけない、自分だけのオリジナルスキンがほしい！という場合、取りうる選択肢はみっつあります。

選択肢その1: よふけのかるあに依頼する

作者はシュダンの屋号でデザインを営んでおります。料金表にも記載しているのでご確認の上お問い合わせくだしまし。デザインから実装まで一貫対応できます。

Price

選択肢その2: 他の方にデザインしてもらい、実装をよふけのかるあに依頼する

デザインだけ別の方に依頼して作ってもらう形です。セトリスタ、だいたいのことはできますが何でもできるわけではないので、制作時に気を付けねばならない制限もある程度あります。そのあたりで僕とコミュニケーションを取ってお仕事ができる方であれば対応可能です。僕ひとりに依頼するよりは若干割高にお金がかかると思われます。

選択肢その3: ぜんぶ自作する

ここからが本題です。セトリスタはWebアプリなので、OBSのブラウザソース中にあるカスタムCSS欄で既存のデザインに干渉することができます。実際、一部のスキンには専用のCSSが用意されており、色やテキスト等をお好みに合わせて変更できるようになっています。

ならばカスタムCSS欄に丸ごとデザイン情報をぶち込めば、オリジナルのスキンが作れるのでは？

実にYesです。なんならそのための環境も既に用意されています。必要なのはちょっとしたCSSの知識。そんなに難しいことではありません。やっていきましょう。

plainスキンに変更する

いつも通りセトリスタのコントロールパネルを開きます。スキン選択のセレクトボックスで「plain」を選んでください。

するとどうでしょう、プレビュー画面にはなんとも無味乾燥なテキストの羅列が。これがセトリスタのありのままの姿、何もCSS(デザイン情報)が適用されていない文字通りプレーンなスキンになります。

こいつをカスタムCSSで逐次いい感じにしていきます。

plain用のカスタムCSSファイル

まずは以下のcssファイルをローカルに保存して、メモ帳等で開いてみてください。

plainPlain.css

こちらをベースに自分だけのカスタムCSSを組んでいきます。

フォントを変えてみる

まずはフォントをかわいくしてみましょう。ここでは一例としてGoogle Fontsの「Hachi Maru Pop」に変更してみます。

Hachi Maru Pop - Google Fonts

「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を駆使することであなただけのセトリスタを作り上げることが可能です。ぜひ挑戦してみてください。難しそうだったらご依頼ください。

よき歌枠ライフを。