読者です 読者をやめる 読者になる 読者になる

桜咲く地の気まぐれ日記

管理人の半暴走日記です。勢いのまま書いてることもあるので支離滅裂でも生暖かい目で見てくださいな。

サイト遊び記録 − 1 キャラ紹介ページを改装してみんとす

つれづれ日記 プログラミング サイト遊び

最近ブログ整理してるのもあるんですけれど、もう少しブログの方も活用したいなーと考えた結果、どうせならサイトいじりの記録でも残してみようかなーと。
Twitterに雑談としてぽんと投げるにはかったるいし内容ですし。

ということで、いきなり始めるよ。
今回は、キャラ紹介ページの改装(仮)。

経緯

ふと「そういえばキャラクター紹介ページ改装しようかとか思いつきで言ってたなー」ということを思い出したので、実際に改装案を実装してみた。

ちなみに、Twitterでテスト用に描いたミナはこれ用でした。

完成品

これを使ってどうなったかっていうと、こうしてみました。
f:id:sengenzakura:20170129211456g:plain

キャラクターリスト部分

キャラクターの顔アイコンをまずflexで整列。
え? ミナ以外にアンナとハンナがいるって?
細かいことは気にすんねぇ!

f:id:sengenzakura:20170129210723p:plain

最近flexboxの使い方を覚えたのですが、少しの労力でこんだけきれいな整列ができるととても気に入っています。
つーかこれ使えばスマフォ版のギャラリーページもう少し楽に実装できたのでは……?

丸にするか四角にするか、名前をどこに配置するか考えた結果最終的にこうなってました。
名前の枠線部分はborder-imageプロパティを使ってみたぜ☆
いや、使えるっぽいのは知ってたのですが、今回初めて使ってみました。割りと設定がめんどい。

しかし三列ってどうして美しく見えるのか。

モーダルウィンドウ部分

で、顔アイコンをクリックするとこんな感じにモーダルウィンドウが開く。

f:id:sengenzakura:20170129210809p:plain

背景色(background-color)はキャラクターカラーだけれど、使ってる画像は全部同じ。
半透過画像ありがたいです。

モーダルウィンドウは以前からギャラリーで使用しているColorBoxプラグインを使わない方向で。
その方がたぶん今回は都合がいい(と思った)。

さて、cssだけで実装できる方法もあったはずだが、とグーグル先生に質問。
確認したけれど、cssのみで実装したやつはどれもどうも戻るボタンの履歴に残ってしまうようでした。それは困る。実に不便だ。

つーことでjavascriptjQuery)を使う方向で。
cssjavascriptで実装する方法を教えて!グーグル先生!
syncer.jp

と呼びかければ答えてくれるのがグーグル先生なわけで、上のサイトとか参考に実装してみました。
cssで上下左右中央配置実装すればjavascriptの方でリサイズ処理いらんけどね。


そんなこんなで作ってみたキャラクター紹介ページだけど、実際に採用するかは不明ですね!
別のレイアウトでの遊びを思いついてしまったのでね、てへぺろ

しかし、なんで改装する度に新規にリソースを用意しなければならないデザインにしてしまうんだろう…いい加減懲りろよと思わなくもないのです。

今回使用した素材サイト様

Transparent Textures
背景の半透過画像配布サイト。


frames-design.com
名前やキャラクター説明文部分の枠線画像配布サイト。