Tokyo Q Studio Web Siteが新たにリニューアル致しました。
今回のリニューアルは今までのWeb制作での経験を出来るだけ詰め込みました。
スマホ・タブレットに完全対応！BootStrap化したWordPressテーマ
まずPC表示は当然の事、タブレット・スマホにも完全に対応した形を取っています。
その際マストアイテムとしてBootStrap化を施し、制作スピードと自由なレイアウトを実現しました。
PC表示
タブレット表示（縦）
スマホ表示（縦）
BootStrapもカスタマイズ。12カラムを24カラムに変更すると幅が広がる！
BootStrapも少々改良しておりメニューのクリックダウンメニューをホバーダウンに変更したり、12カラム設定を24カラムに変更し細かなレイアウトの対応も可能です。
実際ここ数ヶ月で大規模なサイト制作を約１０本こなせるほどになっています。
WordPressのカスタマイズは出来るだけPlugInを使わない方向が良いのかも！
WordPressのカスタマイズは以前使っていた無料テーマのStingerを参考にし、SEOに強い構造を組み込みました。
（Stinger制作者さんありがとう！本当に良いテーマです！）
そして必要最小限のplug-inだけを使い、出来るだけ軽くするためにfunction.phpに組み込みました。
jQueryもWordPress標準のものを排除し、比較的新しい「jQuery2.0.3」に載せ替えています。
これはレガシーブラウザの対応を辞め、軽量化したjQueryとなっています。
その為IE対応ブラウザは9から上位と言う事となりますが、html5で制作しているためこれ以下は対応する事はないかなと・・・。
（賛否両論はあるかと思われますが、動き無しでは一応IE7ぐらいまでは何とか見えているかなと・・・）
JavaScriptもfunction.phpで管理し、全てをfooterで読み込ませるようにしました。
簡単ではありますが、jQueryも書き込みちょっとした動きの部分を表現させています。
やっぱりParallaxはマストだねぇ。YouTubeもLightBoxぐらいしないとね！
トップではParallaxで奥行きを出し、CSS3での動きのあるコンテンツ、そしてYouTubeLightBoxを実装しました。
YouTube広告用動画を使った戦略は1年程前から始まっているのも見逃せないと言う事もあり、コンテンツに実装することで同時に動画広告にも対応出来、幅を持たせられるサイト構築をアピールしたいとの思いがありました。
こういった動きのあるサイトを企業サイトでも採用されている現状にキッチリと対応出来るサイトに致しました。
メニューはメガ化がマスト！BootStrapがあると何でもできる！
メニューではBootStrapを使用しメガメニューにも対応出来るようにしています。
現在はCSS3で装飾しているだけですが、画像や動画を表示することも可能です。
ナビにはカテゴリーを表示させその記事数も同時に表示させています。
これは後にも紹介致しますが某サイトで勉強させて頂いたWPのショートコードをカスタムし、BootStrap化させることでドロップダウンメニューをメガメニューする事が出来ました。
当サイトではカテゴリーがまとめきれていないため(笑)、ものすごく沢山ございます。
その為ドロップダウンメニューをスクロールし、全てを選択出来るようにしています。
これもメガメニューの将来的設計のために実装したものです。
プラス、スマホ対策として画面全体メニューを実装しました。
footer側に広めのボタンを置き、スマホを手に持っていても素早くアクセスすることを目指しました。
ただ、現状残念なのがfooter側をタップするとブラウザのメニュー等が浮いて出てくるため、２度タップしなければいけないと言う事です。
これは改善の余地があるとは思いますが、実際他のサイトでもfooter側にメニューボタンを実装するところが増えています。
なのでこれはこれで間違いではないと思っています。
も一つ！スマホメニューはアコーディオンしないと大変だよ。
そして、スマホ用ナビはアコーディオン化しており、よくあるfooterのサイトマップ的な役目も果たせます。
数が多いメニュー量にもスクロールで対応出来るためスマホでも全てのコンテンツにアクセス可能です。
プラスCSS3＋JavaScriptで動きのある表示方法となっているため、スマホでも楽しいサイト表現が可能になっています。
まだまだいっぱいあるので最後に告知！
ここまででもかなりの分量を記述しましたが、まだまだ細かなところが紹介し切れていませんので、Blogコンテンツとして今回の製作過程と実装方法を紹介していきたいと思います。
まだまだ完成系ではありませんが、トップとBlog部分はかなり良い状態に持って行けたと思っています。
このテーマをブラッシュアップしECサイトや企業サイトにも転換して行けたらと思っています。
そして、もっと使いやすくしたところで無料テーマなんかも考えています。
管理画面がもっとカスタマイズ出来る様になれば公開したいと思っています。
それでは見やすくなったTokyo Q Studio Web Siteをお楽しみ下さい。
（今はコンテンツが工事中なのでもう少々お待ち願えれば幸いです！）