先日、お知らせしました、「こどもWEBカルタ」の第二弾「動物・昆虫」編が完成しました。
前回の「果物・野菜」のシリーズを早々と覚える娘の言語習得速度をみて、こちらもサイト制作速度を上げなければとプレッシャーを感じる次第です。
動物編はこちらから。（サイトの下部で「果物・野菜シリーズ」とリンクで相互に飛べるようにしました。）
例によって、ここから先は制作過程のお話しなので、興味のある方はどうぞ。
経緯
まず、第一弾の「くだもの・やさい」が出来あがる前から、次は動物で行こうと決めていました。
そして、「くだもの・やさい」はどうしても静的な情報になるので、
裏に仕込んだ「もっとしらべる」のリンクはYahooキッズ図鑑でしたが
動物は動いてなんぼのものなので、「どうがでみる」で厳選のYouTube動画を見れるようにしようという構想はありました。
制作過程
まずは写真素材がないと始まらないので、フリー素材を探し回ってみましたが、なかなかイメージ通りのものが集まりません。
写真の縦横比も重要な要素になるので、その制限の中で集めてみると、動物だけでなく、昆虫も含めることにしました。
また、背景をより、動物・昆虫がいる世界に合わせようと緑系ベースに木の茶色を採用。
となると最初、動物としていれていたイルカとかは背景と合わなくなってしまいました。（この辺は第３弾で用意することにします。）
背景って、その場所の世界観を作る上で非常に重要な要素で、その中におくコンテンツとマッチしていないと違和感が出てしまいますね。
困ったこと
なかなかイメージ通りの画像が探せなく、素材集めには時間がかかりました。
また、採用を決めた画像が前回とは縦横の比率が異なっていたので、パネルサイズやフォント自体もCSSで調整しました。
また、前回は一サイトで全ての素材をまかなえましたが、今回は３サイトから集めてくることになり、フッターに掲載していた素材提供元があふれることなりました。
第一弾と互いに行き来できるようにサイト下部にボタンを用意したのですが、これがFloatで横並びを実現すると、センタリングされなくて困りました。
width指定しなければテキストだけはセンタリングされるのですが、ボタン型にするためwidth指定は必要。最終的にこちらのサイトの方法で実現しました。
HTML
CSS
ul{
margin-right:auto;
margin-left:auto;
width:24em;
text-decoration: none ;
}
li{
float:left;
padding-left:1em;
list-style: none;
}
li a{
display:block;
color: #FFF;
text-shadow: 1px 1px 0.5px #333;
background-color:#FFB900;
width:11em;
height:1.5em;
text-align:center;
line-height:1.5em;
border-radius: 0.8em ;
margin-bottom:10px;
box-shadow:1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;
}
工夫したこと
YouTubeはいろいろな貼りつけ方があるのですが、
/embed/を使用すると、画面全体の動画が表示されて私のイメージにマッチしました。
また、末尾に?ref=0をつけて関連動画を非表示にすることも出来るのですが、私がたまたま採用している動画だけでは、その動物のイメージが伝わらないこともあるので、もっと他の動画で見てみたいという選択肢を残すことにしました。
フッターで溢れてしまう素材提供元を一元管理できるように独立した別ページを用意することにしました。ちょっとデザインとか未調整で、第二弾のCSSをそのままあててるのですが。
また、パネルより下の部分は基本同じ内容になるので、footer.phpを用意してincludeで読み込み一元管理することにしました。
これでAnalyticsコードもここにいれて、今後の拡張も効率化できます。
次回の課題
第3弾ではheader.phpも作成したいと思っています。読み込むページごとにCSSを変更しないといけないのですが、PHPで実現したいと思います。
あとロゴを画像で用意していると背景色ごとのバリエーションを用意しないといけなくなるので、次回からはWEBフォントに切り替え予定です。
またページごとの移動を考えて、次はメニューを実装したいと思います。
普通なら一度で全部出来そうなことでも、こうやって少しずつ発展させていくことで色々と勉強になることがあります。
これまで既製品のテーマをいじることが多かったので、特に疑問も持たなかったですが、一から作っていくとfooter.phpとかを分けることのメリットとかよくよく理解できるようになってきました。
育児かたわらのスローペースですが、今後ともよろしくお願いいたします。
[ad]