もう１ヵ月以上たってしまいましたが、今日はどこまで行こう？６お疲れ様でした。前回が消化不良に終わってしまったので、今回は気合を入れて挑んだら今度はバタバタしたままイベントが終わってしまいました…。今さらにはなりますが、どこを頑張ったかどういう意図があったか、気合を入れて作った展示ページの作り方など解説してみようかなと思います。
まず、前回が自分としてはしょんぼりな参加になってしまったので、前回のリベンジ含めた展示にすることにしました。具体的には、前回展示のイラストと今回の展示を繋がった物語にしました。流れとしては、今日どこ６イラスト→今日どこ６漫画→今日どこ５イラストになっています。雪降る中を飛んでゆき山頂へ。夏のイベントなのに展示ページに雪が降っているのは、１月開催の前回のリベンジだからなのでした。
さて、力を入れた展示ページ、一番上の「How far shall we go today?」。今日はどこまで行こう？、英語にしたら「Where」と「How far」どっちなのか悩んで、今回はHow farを選びました。正式にどちらなのかはわかりませんが、今回のコンセプトがふたりでレイタ山の山頂まで行くというものだったので、長い距離を共に過ごすというイメージでこちらにしました。
そして雪ですね。背景に降る雪はparticles.jsで実装しています。何もしない状態だと画面の一番上に表示されて、リンクが開けなくなるなど他の要素に干渉してしまうため、z-indexと::before、::after要素を使って、壁紙→パーティクル→ノイズという順に重ねました。イメージとしてはイラストのレイヤーみたいな感じです。さらにそのレイヤーの上に額縁などの要素が乗っかる形です。先も書きましたとおり、前回イベントのリベンジのため、背景画像は今日どこ５のイラストになっております。
額縁はCSSで表示を整えたかったのですがうまくいかず…。結局、額縁＋イラストの透過PNGを作って元絵にリンクしました。背景や元絵に合わせて、額の部分にも雪を描き入れたのがこだわりポイントです。額の中の世界に入っていく感じにしたかったんですが、うまくいってますかね？
ラベルは画像に書いているとおり、ラベル→テープ、ピン→テキストの順で、positionやtop、leftなどを組み合わせて表示しています。
額縁やラベルの表示は結構てこずったところで、いろんなTipsサイトを見ながら調整しました。自力ではどうしようもなくなったら、コピペOKなサイトさんからコードをお借りしたりしながらなんとか形にしていきました。
全体のフレームは簡単なものです。画面幅によってよい感じに表示されるようにCSSで設定したくらいですね。
そして漫画がね…。イベント開始に間に合わなくて頑張って描いて、疲れた～ってしてたらいつの間にかイベントが終わっていたという…。そんなイベント参加の思い出です。
個人サイトなので、こういったページの作り方みたいなものも解説してみると面白いかなと今回の記事を書いてみました。なにかしら、みなさんの制作のご参考になる部分があったら嬉しいです。