こんにちは、つばさ（@_tsubasa123_）です。
最近、ブログに限らずあちこちのサイトで「ラブライブ！サンシャイン！！」の広告が表示されるようになりました。これって閲覧者の行動やサイトのコンテンツに基づいて適切なものが表示されるんですよね？Googleが私に勧めてくるということは、私もラブライバーとして認められたという理解でいいのかな。
仕事で調べものしているときに表示されると遊んでいると勘違いされるのが玉に瑕ですが。
広告バナーってデザインが素敵
当然のことなのですが、プロのデザイナーさんがコンバージョンを上げるために試行錯誤して作成されたバナーですからキレイなデザインのものが多いです。中には酷いやつもいますけど。ご多分に漏れずラブライブのバナーも結構きれいなデザインとなっておりまして。
これとこれ。パステルカラーっていうのかな？キレイな配色です。なぜ9色使わなかったのかという疑問はありますが、個人的にはどちらも好きなデザインです。
CSSでいけるかな？
以前に「けものフレンズ」ネタで見出しを作ってから、アニメや漫画を元ネタにした見出しを作ることの楽しさ（と記事の書きやすさ）に気が付いた私。これはチャンスかな、ということで「ラブライブ！サンシャイン！！」のバナーをモチーフに見出しデザインのカスタマイズに挑戦しました。
結論から言うと両方ともそこそこ再現できましたが、水玉背景の見出しは結構苦戦しましたね。この記事をご覧いただいているラブライバーさん、もしよろしければ試してみてください。
ストライプ背景バージョン
どうでしょうか、割と見やすいデザインです。テキストの色もラブライブのロゴのテイストを真似してみました。
CSSのコードはこんな感じになっています。
.lovelive-stripe { padding: .75em .6em; color: #d10d74; text-shadow: 2px 2px 3px #fff, -2px 2px 3px #fff, 2px -2px 3px #fff, -2px -2px 3px #fff; font-size: 26px; background: repeating-linear-gradient(135deg, #8cd0e5 0px, #8cd0e5 24px, #ffffff 24px, #ffffff 44px, #facfa4 44px, #facfa4 68px, #ffffff 68px, #ffffff 88px, #a4d7d0 88px, #a4d7d0 112px, #ffffff 112px, #ffffff 132px, #f7ccd5 132px, #f7ccd5 156px, #ffffff 156px, #ffffff 176px, #cfb6d6 176px, #cfb6d6 200px, #ffffff 200px, #ffffff 220px, #cfe5b7 220px, #cfe5b7 244px, #ffffff 244px, #ffffff 264px, #f8edc0 264px, #f8edc0 288px, #ffffff 288px, #ffffff 308px, #f2c8dc 308px, #f2c8dc 332px, #ffffff 332px, #ffffff 352px ); }
便宜上、クラスを指定していますが、要素セレクタでも特に問題なく動作しますのでお好みで変更してください。
水玉背景バージョン
こっちは元のバナーと若干配色のパターンが異なっていますが、できるだけ似せて水玉を配置しました。背景画像を複数置けるようになったことは知っていましたが、実際に使ったのはこれが初めてでした。こんなにたくさん、しかも繰り返しを考慮して大きさを調整しなければいけなくて結構大変でした。
3 * 3 の繰り返しとして実装しましたが、原案が8色しかないので1つだけ同じ色が隣接してしまったのが心残りです。自分で1色追加してもよかったのですが、余計なことするとダサくなりそうだったのでこれで良しとします。
CSSはこちら。
.lovelive-dotted { padding: .75em .6em; color: #d10d74; text-shadow: 2px 2px 3px #fff, -2px 2px 3px #fff, 2px -2px 3px #fff, -2px -2px 3px #fff; font-size: 26px; background-size: 90px 90px; background-position: 0 0, 30px 0px, 60px 0px, 0px 30px, 30px 30px, 60px 30px, 0px 60px, 30px 60px, 60px 60px; background-image: radial-gradient(#8cd0e5 15%, transparent 0), radial-gradient(#facfa4 15%, transparent 0), radial-gradient(#a4d7d0 15%, transparent 0), radial-gradient(#f7ccd5 15%, transparent 0), radial-gradient(#cfb6d6 15%, transparent 0), radial-gradient(#cfe5b7 15%, transparent 0), radial-gradient(#f8edc0 15%, transparent 0), radial-gradient(#f2c8dc 15%, transparent 0), radial-gradient(#8cd0e5 15%, transparent 0); }
おまけ
ここ最近、ラブライブの広告が表示されない日はないってくらい、毎日でてきます。先日、横浜でファーストライブがあったようでして広告にも力を入れている時期なのかな？アニメの2期やツアーの発表もあったみたいですね。ライブについてはキュウさんのブログで紹介されていますので現地参戦できなかったラブライバーさんはよければこちらもどうぞ。
で、ツアーの内容が公式サイトの専用ページで紹介されているんですが、これがなかなか見出しデザインに使えそうな配色になっておりまして。
せっかくなのでこれも見出しにしてみました。
どうでしょうか。けものフレンズの時とデザインが似ていますがご愛敬ということで。こっちはちゃんと9色、それぞれのキャラクターのイメージカラー使われていますね。
.happy-party-train { position: relative; padding: .3em 0 !important; background-color: #fff !important; color: #444 !important; font-size: 26px; } .happy-party-train::before, .happy-party-train::after { position: absolute; bottom: -4px; left: 0; content: ''; height: 4px; } .happy-party-train::before { z-index: 2; width: 15%; border: none; } .happy-party-train::after { width: 100%; background: repeating-linear-gradient(45deg, #f0a20b 0px, #f0a20b 20px, #23AC69 20px, #23AC69 40px, #53d38d 40px, #53d38d 60px, #ea4775 60px, #ea4775 80px, #49b9f9 80px, #49b9f9 100px, #afb6bc 100px, #afb6bc 120px, #e5cf00 120px, #e5cf00 140px, #9c71db 140px, #9c71db 160px, #f28197 160px, #f28197 180px); }
実用度はこれが一番高いかな、といったところです。というか、このブログに導入しようかな。
さいごに
いやー、楽しかったです、はい。
本当は各メンバーのバナーを真似したものも作りたいんですが、なかなか表示されないキャラがいてコンプリートできていない状態です。バナーに使われている画像の原案をご存知の方がいれば教えていただけるとうれしいです。
次は何にしようかな。リクエストがあればご連絡ください。
ではでは、最後までお付き合いいただきありがとうございました。
コメント