はてなブログの記事領域が幅が狭いのでPCで見るときは広くして、iPadで見たときは基本のサイズになるようにした。

大した話ではありません。ちょっとCSSを追加しただけです。

私はあまりブログなどをカスタマイズしたりするのが好きではなく、提供されているテンプレートで結構満足してしまいます。
理由は、ブログサービスのバージョンアップやら何らかの変更で自分が変更した場所をまた修正したりするのがめんどくさいからです。

しかし、様々なブログサービスは基本を守ってか記事領域の幅が以下のように狭いです。
私はこの狭い領域がなんか好きじゃなく、もうすこし広げたいと思っていました。

そこで、はてなブログのデザインカスタマイズの「デザインCSS」をちょいといじりました。
あんまり考えないでさっと修正した感じなので、どんな影響が出るかわからないけどやってしまえ！の
勢いで以下を追加。

#content-inner {
  width: 1200px;
  margin: 0 auto;
}

#wrapper {
  width: 920px;
  float: left;
}

#content-innerが記事＋右のメニュー全体幅で、#wrapperは記事領域の幅になります。
もともとは#content-innerが860pxで、#wrapperが580pxでした。
それの定義を上書きする形です。
そして、変更を保存して、ブログを確認したところ・・するとどうでしょう！こんなに広く！

しかし・・これでは自分の要件を満たしません。
なぜかというと、この幅がずっと維持されるためiPadで見ると情けない感じに。。。

ということで、先ほどの「デザインCSS」の場所を更に修正します。

@media screen and (min-width:1200px) {

#content-inner {
    width: 1200px;
  margin: 0 auto;
}

#wrapper {
  width: 920px;
  float: left;
}

}

ということで、@media screen というものを追加しました。
これで括ったCSSはウィンドウのサイズまたは画面のサイズが1200px以上で開かれている時だけ適用されるようになります。
この状態でipadでみると以下のように表示されて幸せになりました。

こういう対応をレスポンシブwebデザインと・・・まあそういうことで、自分のやりたいことは
満たせたので満足という結果で終わりとします。