コピペでどうぞ。ラブライブ！サンシャイン！！のバナー広告風な見出しデザインのカスタマイズ（メンバー編）

こんにちは、つばさ（@tsubasa123）です。

今日も今日とてネタ系CSS、はりきっていきましょう。

以前、下記のような記事を書きました。

www.tsubasa-note.blog

本日はこれの続き、各メンバーのデザインをCSSで再現しました。基本的にはコピペでいけるようにしてありますので、ラブライバーのブロガーさん、よければ試してみてください。

全部で90種類

メンバー9人、背景デザインは5パターン、文字をピンクベースと青ベースで2パターン作りましたので全部で90種類。うん、無駄に多い。説明はいらないと思いますのでどんどんいきましょう。各メンバーごとにデザインの参考にしたバナーのキャプチャ、実際にデザインした見出しのキャプチャ、ソースコード、の順番で一気に駆け抜けます。

と、その前に、文字のサイズやら色やら、全部のバナーで共通なものは別途指定しておきます。

/* ピンクのテキスト */
.text-pink {
color: #fff;
text-shadow: 2px 2px 3px #d10d74, -2px 2px 3px #d10d74, 2px -2px 3px #d10d74, -2px -2px 3px #d10d74;
}
/* 青いテキスト */
.text-blue {
color: #fff;
text-shadow: 3px 3px 3px #4294e6, -1px 3px 3px #4294e6, 3px -1px 3px #4294e6, -1px -1px 3px #4294e6;
}
/* 文字サイズと余白 */
.lovelive-sunshine {
background: #fff;
padding: .75em;
font-size: 1.475em;
font-weight: bold;
}

これと各デザインをセットで指定すると見出しデザインが適用されるようになっています。では、今度こそ一気にいきます。

津島 善子

.dotted-yoshiko {
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
background-image: radial-gradient(#c6c8d6 40%, transparent 0), radial-gradient(#c6c8d6 40%, transparent 0);
}
.slash-yoshiko {
background-image: repeating-linear-gradient(145deg, #dedcd0 0px, #dedcd0 10px, #fff 10px, #fff 20px);
}
.horizontal-yoshiko {
background-image: repeating-linear-gradient(180deg, #93a2b5 0px, #93a2b5 10px, #c2cbd4 10px, #c2cbd4 20px);
}
.cross-yoshiko {
background-size: 20px 20px;
background-color: #cdd4da;
background-image: linear-gradient(90deg, rgba(144, 158, 167, 0.5) 50%, transparent 50%), linear-gradient(rgba(144, 158, 167, 0.5) 50%, transparent 50%);
}
.circle-yoshiko {
background-color: #838383;
background-image: radial-gradient(circle closest-side at 50% 50%, #ffebd5, #838383), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #838383), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #838383), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #838383), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #838383);
background-size: 60px 60px, 40px 40px, 40px 40px, 35px 35px, 50px 50px;
background-position: 0% 20%, 10% 10%, 13% 83%, 18% 77%, 20% 47%;
background-repeat: no-repeat;
}

黒澤 ルビィ

.dotted-ruby {
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
background-image: radial-gradient(#e3a8be 40%, transparent 0), radial-gradient(#e3a8be 40%, transparent 0);
}
.slash-ruby {
background-image: repeating-linear-gradient(145deg, #f9afe2 0px, #f9afe2 10px, #fff 10px, #fff 20px);
}
.horizontal-ruby {
background-image: repeating-linear-gradient(180deg, #e861a2 0px, #e861a2 10px, #ecabcb 10px, #ecabcb 20px);
}
.cross-ruby {
background-size: 20px 20px;
background-color: #feabcf;
background-image: linear-gradient(90deg, rgba(232, 76, 158, 0.5) 50%, transparent 50%), linear-gradient(rgba(232, 76, 158, 0.5) 50%, transparent 50%);
}
.circle-ruby {
background-color: #de5ecf;
background-image: radial-gradient(circle closest-side at 50% 50%, #ffebd5, #de5ecf), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #de5ecf), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #de5ecf), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #de5ecf), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #de5ecf);
background-size: 60px 60px, 40px 40px, 40px 40px, 35px 35px, 50px 50px;
background-position: 0% 20%, 10% 10%, 13% 83%, 18% 77%, 20% 47%;
background-repeat: no-repeat;
}

国木田 花丸

.dotted-hanamaru {
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
background-image: radial-gradient(#fedda8 40%, transparent 0), radial-gradient(#fedda8 40%, transparent 0);
}
.slash-hanamaru {
background-image: repeating-linear-gradient(145deg, #fffdb0 0px, #fffdb0 10px, #fff 10px, #fff 20px);
}
.horizontal-hanamaru {
background-image: repeating-linear-gradient(180deg, #e9db60 0px, #e9db60 10px, #ede7ab 10px, #ede7ab 20px);
}
.cross-hanamaru {
background-size: 20px 20px;
background-color: #f8faaa;
background-image: linear-gradient(90deg, rgba(226, 219, 80, 0.5) 50%, transparent 50%), linear-gradient(rgba(226, 219, 80, 0.5) 50%, transparent 50%);
}
.circle-hanamaru {
background-color: #f2ea43;
background-image: radial-gradient(circle closest-side at 50% 50%, #ffebd5, #f2ea43), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #f2ea43), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #f2ea43), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #f2ea43), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #f2ea43);
background-size: 60px 60px, 40px 40px, 40px 40px, 35px 35px, 50px 50px;
background-position: 0% 20%, 10% 10%, 13% 83%, 18% 77%, 20% 47%;
background-repeat: no-repeat;
}

桜内 梨子

.dotted-riko {
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
background-image: radial-gradient(#ffa8b8 40%, transparent 0), radial-gradient(#ffa8b8 40%, transparent 0);
}
.slash-riko {
background-image: repeating-linear-gradient(145deg, #f9c0b9 0px, #f9c0b9 10px, #fff 10px, #fff 20px);
}
.horizontal-riko {
background-image: repeating-linear-gradient(180deg, #e3697e 0px, #e3697e 10px, #e8afb8 10px, #e8afb8 20px);
}
.cross-riko {
background-size: 20px 20px;
background-color: #f9b1b4;
background-image: linear-gradient(90deg, rgba(219, 90, 110, 0.5) 50%, transparent 50%), linear-gradient(rgba(219, 90, 110, 0.5) 50%, transparent 50%);
}
.circle-riko {
background-color: #bc4746;
background-image: radial-gradient(circle closest-side at 50% 50%, #ffebd5, #bc4746), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #bc4746), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #bc4746), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #bc4746), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #bc4746);
background-size: 60px 60px, 40px 40px, 40px 40px, 35px 35px, 50px 50px;
background-position: 0% 20%, 10% 10%, 13% 83%, 18% 77%, 20% 47%;
background-repeat: no-repeat;
}

高海 千歌

.dotted-chika {
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
background-image: radial-gradient(#fdc276 40%, transparent 0), radial-gradient(#fdc276 40%, transparent 0);
}
.slash-chika {
background-image: repeating-linear-gradient(145deg, #feddb2 0px, #feddb2 10px, #fff 10px, #fff 20px);
}
.horizontal-chika {
background-image: repeating-linear-gradient(180deg, #fe9949 0px, #fe9949 10px, #fec598 10px, #fec598 20px);
}
.cross-chika {
background-size: 20px 20px;
background-color: #fcdda7;
background-image: linear-gradient(90deg, rgba(255, 163, 52, 0.5) 50%, transparent 50%), linear-gradient(rgba(255, 163, 52, 0.5) 50%, transparent 50%);
}
.circle-chika {
background-color: #fe7d09;
background-image: radial-gradient(circle closest-side at 50% 50%, #ffebd5, #fe7d09), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #fe7d09), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #fe7d09), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #fe7d09), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #fe7d09);
background-size: 60px 60px, 40px 40px, 40px 40px, 35px 35px, 50px 50px;
background-position: 0% 20%, 10% 10%, 13% 83%, 18% 77%, 20% 47%;
background-repeat: no-repeat;
}

渡辺 曜

.dotted-you {
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
background-image: radial-gradient(#a8edff 40%, transparent 0), radial-gradient(#a8edff 40%, transparent 0);
}
.slash-you {
background-image: repeating-linear-gradient(145deg, #b7f7ee 0px, #b7f7ee 10px, #fff 10px, #fff 20px);
}
.horizontal-you {
background-image: repeating-linear-gradient(180deg, #48bffd 0px, #48bffd 10px, #98dafc 10px, #98dafc 20px);
}
.cross-you {
background-size: 20px 20px;
background-color: #aedcfd;
background-image: linear-gradient(90deg, rgba(84, 179, 224, 0.5) 50%, transparent 50%), linear-gradient(rgba(84, 179, 224, 0.5) 50%, transparent 50%);
}
.circle-you {
background-color: #50b1ff;
background-image: radial-gradient(circle closest-side at 50% 50%, #ffebd5, #50b1ff), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #50b1ff), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #50b1ff), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #50b1ff), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #50b1ff);
background-size: 60px 60px, 40px 40px, 40px 40px, 35px 35px, 50px 50px;
background-position: 0% 20%, 10% 10%, 13% 83%, 18% 77%, 20% 47%;
background-repeat: no-repeat;
}

松浦 果南

.dotted-kanan {
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
background-image: radial-gradient(#a8ffaa 40%, transparent 0), radial-gradient(#a8ffaa 40%, transparent 0);
}
.slash-kanan {
background-image: repeating-linear-gradient(145deg, #b1fec4 0px, #b1fec4 10px, #fff 10px, #fff 20px);
}
.horizontal-kanan {
background-image: repeating-linear-gradient(180deg, #59f1b8 0px, #59f1b8 10px, #a9f2d5 10px, #a9f2d5 20px);
}
.cross-kanan {
background-size: 20px 20px;
background-color: #b2f7e4;
background-image: linear-gradient(90deg, rgba(92, 218, 171, 0.5) 50%, transparent 50%), linear-gradient(rgba(92, 218, 171, 0.5) 50%, transparent 50%);
}
.circle-kanan {
background-color: #0afea7;
background-image: radial-gradient(circle closest-side at 50% 50%, #ffebd5, #0afea7), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #0afea7), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #0afea7), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #0afea7), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #0afea7);
background-size: 60px 60px, 40px 40px, 40px 40px, 35px 35px, 50px 50px;
background-position: 0% 20%, 10% 10%, 13% 83%, 18% 77%, 20% 47%;
background-repeat: no-repeat;
}

黒澤 ダイヤ

.dotted-dia {
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
background-image: radial-gradient(#fe9da0 40%, transparent 0), radial-gradient(#fe9da0 40%, transparent 0);
}
.slash-dia {
background-image: repeating-linear-gradient(145deg, #ffafba 0px, #ffafba 10px, #fff 10px, #fff 20px);
}
.horizontal-dia {
background-image: repeating-linear-gradient(180deg, #f2545f 0px, #f2545f 10px, #efa4a9 10px, #efa4a9 20px);
}
.cross-dia {
background-size: 20px 20px;
background-color: #fdb8a9;
background-image: linear-gradient(90deg, rgba(253, 70, 52, 0.5) 50%, transparent 50%), linear-gradient(rgba(253, 70, 52, 0.5) 50%, transparent 50%);
}
.circle-dia {
background-color: #e52e23;
background-image: radial-gradient(circle closest-side at 50% 50%, #ffebd5, #e52e23), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #e52e23), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #e52e23), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #e52e23), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #e52e23);
background-size: 60px 60px, 40px 40px, 40px 40px, 35px 35px, 50px 50px;
background-position: 0% 20%, 10% 10%, 13% 83%, 18% 77%, 20% 47%;
background-repeat: no-repeat;
}

小原 鞠莉

.dotted-mary {
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
background-image: radial-gradient(#aab1fa 40%, transparent 0), radial-gradient(#aab1fa 40%, transparent 0);
}
.slash-mary {
background-image: repeating-linear-gradient(145deg, #d4b4fa 0px, #d4b4fa 10px, #fff 10px, #fff 20px);
}
.horizontal-mary {
background-image: repeating-linear-gradient(180deg, #9f60e8 0px, #9f60e8 10px, #c8a9ec 10px, #c8a9ec 20px);
}
.cross-mary {
background-size: 20px 20px;
background-color: #d2b1f6;
background-image: linear-gradient(90deg, rgba(142, 92, 217, 0.5) 50%, transparent 50%), linear-gradient(rgba(142, 92, 217, 0.5) 50%, transparent 50%);
}
.circle-mary {
background-color: #a054e2;
background-image: radial-gradient(circle closest-side at 50% 50%, #ffebd5, #a054e2), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #a054e2), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #a054e2), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #a054e2), radial-gradient(circle closest-side at 50% 50%, #ffebd5, #a054e2);
background-size: 60px 60px, 40px 40px, 40px 40px, 35px 35px, 50px 50px;
background-position: 0% 20%, 10% 10%, 13% 83%, 18% 77%, 20% 47%;
background-repeat: no-repeat;
}

最後に

いやー楽しかったです。再現度はまあまあといったところですが、色に関してはちゃんと元画像から取得したのであってるはず。個人的にはよしこヨハネの配色が好き、ダイヤさんもありかな。CSSでデザインするのは楽しかったんですが、キャプチャを集めるのは苦痛でしたね。こんなにF5を連打したのは初めてでした。

ちょっと前からバナーが出なくなって寂しかったんですが、ここ最近また新しいデザインのバナーが表示されるようになりました。気が向いたらそちらもブログネタの参考にしようかと企んでいます。

ではでは、最後までお付き合いいただきありがとうございました。