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

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

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

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

使用テーマ

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

レスポンシブ対応前

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

レスポンシブ対応後

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

レスポンシブ対応

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

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

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

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

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

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

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

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

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

見出しタグの修正

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

余白の調整

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

フッターの背景色を変更

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

レスポンシブ対応の理由

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

今後の変更予定

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

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