AdSense部秋学期ミッション(7) - AdSense実験室

AdSense部秋学期ミッション(7)

2013-12-18

さて、秋学期の課題として3つ考えたミッションの1つ、「既存サイトのマルチスクリーン化」。
前々から早いとこレスポンシブ化したいと考えていた浮世絵のサイトをRWD(レスポンシブウェブデザイン)化することにしました。

今回も慣れてるところでYahooのPureをRWDのフレームワークとして採用。
新しい試みとしては、「画面サイズに応じて表示/非表示を切り替える」というのをちょっと試してみました。

クラス名 機能
pure-hidden-phone 画面幅768px以下の場合は非表示
pure-hidden-tablet 画面幅768px ~ 979pxの場合は非表示
pure-hidden-desktop 画面幅980px以上の場合は非表示

Pureの場合、こんな感じでデバイスの画面モードに応じて特定ブロックを非表示にできるという機能があります。
今回はこれを使ってサイズに応じた画面のコントロールをやってみました。

コンテンツの切り換え

記事一覧画面の下に、図のようにワンポイントの画像とテキストを配置していて(赤枠部分)、雰囲気的にはいい感じなのですが、逆にモバイル画面でこれが表示されると場所をとってうっとうしい感じ。なので、Pureの機能を使って「PC画面時のみ表示」で設定してみました。

モバイル画面時には先ほどの赤枠部分、まるっと消えてなくなるので画面もスッキリ♪

パララックス効果

これはPureの機能ではないですがパララックスについて。
今回どうしてもやってみたかったのが「パララックスでレスポンシブなサイト」の構築。
なんだか魔法の呪文みたいですが、要するに視差を利用した擬似3D的な演出手法で、よく1枚ものの縦長ページで使われてたりします。
フツーのサイトで使うとちょっと過剰演出ぎみでかえってウザくなる場合もあるのですが、浮世絵みたいなアート系のサイトにはピッタリ。
実際どういうものかは見ていただいた方が早いと思います。

浮世絵ぎゃらりぃ

マウスで縦にゆっくりスクロールさせると、ちょっとタイミングずれる感じで背景も動くのが分かるかと思います。 ただこれもPCなら面白い効果なのですが、スマホやタブレットでは画面が重たくなるだけなので、小さい画面時には背景表示しないようにしてあります。

というわけで、今回レスポンシブに対応しつつ、新たな試みもいくつか加えてみました。
あと、今回のミッションに際して浮世絵サイトのドメインを変更したので、以前のドメインからの301転送の影響などについてもいずれ報告できれば、と思います。

スポンサーリンク