fc2ブログ
ハーフハンドメードキャンピングカー&くるま旅
ステップワゴンをベースとした小さいキャンピングカー(TET's製ROXY2)を自作・DIYで工夫しながら(電装と家具etcは手作り)、くるま旅、Pキャン、車中泊(時にはオフ会?)をする内容をメインとしたブログです。
アドセンスのCSSでのレスポンシブ対応を採用してみました。
Googleのアドセンスがレスポンシブwebデザインを採用したので、丁度レスポンシブ化を行っていた、本館サイト、
http://campingcar.diy39.com/
のアドセンス(今は中段の横長のアドセンスのみ)対応しました。 最初に、レスポンシブwebデザインとは、Windowの幅を検知してレイアウトや画像サイズを変えるテクニックを採用したホームページのデザイン法で、
このサイトでは、PC等の大きな画角では↓の様に表示し、 レスポンシブ対応 ページTOP PC表示
タブレット等の中型の画角では↓の様に表示し、
レスポンシブ対応 ページTOP タブレット表示
スマホ等の中型の画角では↓の様に表示します。
レスポンシブ対応 ページTOP スマホ表示
中断のアドセンスも以下の様にサイズが変わります。
↓PC表示
レスポンシブ対応 アドセンス部 PC表示
↓タブレット表示
レスポンシブ対応 アドセンス部 タブレット表示
↓スマホ表示
レスポンシブ対応 アドセンス部 スマホ表示
上記URLのサイトに行って、ブラウザのウィンドウのサイズを変えると、ヌルヌルとデザインや大きさが変わっていくのが解ります。ですが、アドセンス部はまだ動的に対応していないので、ブラウザの更新(or再読み込み)ボタンを押してリロードしないとサイズは変わりません。 アドセンスのレスポンシブ対応は1ヶ月くらい前に英語サイトで解禁が発表されましたが、その場合javaScriptでの例が示されていましたが、今回8月の日本語サイトのアナウンスでは、CSSを使った内容が発表され、より使い易くなってます。 ちょっと、こんな事ばかり最近やっているので、睡眠不足が加速してます
コメント
この記事へのコメント
なるほど・・・
変わるのは、良くわかりましたが
どうやったら出来るのかが???です。(;^_^A
2013/08/23(金) 10:29:50 | URL | CLIO #WzLI99uI[ 編集]
了解です。
CLIOさん、こんにちは、
ちょっと紹介記事を考えて見ます。
2013/08/24(土) 09:37:17 | URL | Toyo管理人 #Vfwq./E2[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://handmadecampingcar.blog85.fc2.com/tb.php/56-c93a9123
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック