Google Adsenseに申請中にレスポンシブ対応しました。その内容を残します。
使用テーマ
公式テーマのSmooth(デフォルト)を使用しています。
レスポンシブ対応前
レスポンシブ対応後
レスポンシブ対応
ダッシュボード→デザイン→スマートフォン→詳細設定→レスポンシブデザインにチェックします。
PCと同じデザインでブログを表示することができます。※使用テーマが、レスポンシブデザインに対応していれば利用できます。要確認です。
スマホ用にCSSを追加・修正した箇所
デザインCSSにスマホ用のCSSを追加・修正しました。以下は、対応内容です。
ブログ名のスタイルを修正
- フォントサイズの調整
- 余白の調整
グローバルメニューのCSSを修正
PC用のCSSだけでは表示が崩れるので、以下の部分をスマホ用に修正しました。
- プライバシーポリシー
- お問い合わせ
見出しタグの修正
スマホ用に見出しタグのスタイルを修正しました。フォントサイズ、余白などを修正しました。
余白の調整
全体的に余白を修正しました。
フッターの背景色を変更
フッターの背景色を白からグレーに統一しました。
レスポンシブ対応の理由
PCのデザインと統一するため、レスポンシブ対応しました。
今後の変更予定
レスポンシブ対応することで新たな課題(問題)が発生したので、今後の対応を考えないといけません。下記の他にも修正の余地があります。
- スマホ用のスタイルを微調整。
- バナー部分の余白を調整。