元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

はてなブログカスタマイズ:レスポンシブ対応

Google Adsenseに申請中にレスポンシブ対応しました。その内容を残します。

使用テーマ

公式テーマのSmooth(デフォルト)を使用しています。

レスポンシブ対応前

レスポンシブ対応前の画像

レスポンシブ対応後

レスポンシブ対応後の画像

レスポンシブ対応

ダッシュボード→デザイン→スマートフォン→詳細設定→レスポンシブデザインにチェックします。

PCと同じデザインでブログを表示することができます。※使用テーマが、レスポンシブデザインに対応していれば利用できます。要確認です。

スマホ用にCSSを追加・修正した箇所

デザインCSSスマホ用のCSSを追加・修正しました。以下は、対応内容です。

ブログ名のスタイルを修正

  • フォントサイズの調整
  • 余白の調整

グローバルメニューのCSSを修正

PC用のCSSだけでは表示が崩れるので、以下の部分をスマホ用に修正しました。

  • プライバシーポリシー
  • お問い合わせ

見出しタグの修正

スマホ用に見出しタグのスタイルを修正しました。フォントサイズ、余白などを修正しました。

余白の調整

全体的に余白を修正しました。

フッターの背景色を変更

フッターの背景色を白からグレーに統一しました。

レスポンシブ対応の理由

PCのデザインと統一するため、レスポンシブ対応しました。

今後の変更予定

レスポンシブ対応することで新たな課題(問題)が発生したので、今後の対応を考えないといけません。下記の他にも修正の余地があります。

  • スマホ用のスタイルを微調整。
  • バナー部分の余白を調整。

» HTML入門のまとめはこちらです。