紺です。
CSS初心者による、初心者のためのカスタマイズ講座です。
文法的に合っているかわかりませんし、少々強引ですが、ごくごくたまーに御礼のコメントなぞいただけることもあるので、備忘のためにも書いておきたいと思います。
あくまで自己責任で、現在のファイルの中身のバックアップをとってからお試しくださいね！！
※AndroidのChrome、Firefox、Operaで表示を確認していますが、iPhoneは持っていないので確認できていません。
※2016/12/02追記
テーマカスタマイザーを使っていない場合はこの設定で実現可能です。
テーマカスタマイザーを使って、「ヘッダー背景の横幅を100%にする」「メニューの横幅を100%にする」設定をしている方は、このカスタマイズをするとPCでの表示にも影響が出てしまうので、この方法は使えません。
今このブログがその状態なので、他の方法を模索中です(´；ω；｀)
記事の周りってどこのこと？
そもそものところから、上手く説明できなくて恐縮です。
実際のスマホのキャプチャで表示してみますね。
カスタマイズ前
カスタマイズ後
カスタマイズ前後の違いは、白い部分が記事の幅ですが、その周り（両サイド）にも背景画像が表示されるようになっています。
Affinger4のデフォルト設定だと、スマホで見た時に記事の部分が横幅いっぱいになってしまいます。
画面が横幅いっぱい白いと、なんだか、ものすごい貧相な画面に見えてしまう気がしてしまって！
なんとか周りにも背景画像が見えるようにしたかったのです。
そのほうが、読みやすいような気がして・・・慣れのせいかもしれませんが。
Affinger4で背景画像を設定する方法
背景画像を設定する方法はとっても簡単です。
あらかじめ、商用フリーの素材サイトなどで背景画像をダウンロードしておきましょう。
設定が終わっている方は、この見出しは飛ばしてくださいね。
外観＞カスタマイズ＞背景画像
WordPressのダッシュボードから、「外観＞カスタマイズ＞背景画像」の順で進みます。
画像をアップロード
画像をアップロードします。
画像の設定
画像の設定をします。
色々選んでみると即時に右側の画面に反映されるので、試してみてください。
私が選んだ画像はタイル型なので、敷き詰めるように表示するため「タイル」を選択しています。
インパクトのある画像を、ヘッダー画像風に使いたい時は「水平方向に繰り返し」とかやってみても、面白いかも・・・。
あと、なんとなくカッコイイ（気がする）ので、タイル型の背景の時は、私は背景スクロールを固定にしています。
これで、「保存して公開」を押すと背景画像が反映されます。
子テーマの「Style.css」に書き加えましょう
今回の目的である、スマホで背景画像が記事の両サイドに見えるようにするための記述を子テーマに追加します。
子テーマの「AFFINGER4 Child」をあらかじめインストールしておきましょう。
また、既に子テーマに色々加えている方は、今の状態をバックアップをとってから、お試しくださいね。
書き加える内容
書き加えるのは、これだけです。
#wrapper {
max-width:90%;
}
書き加える場所
子テーマの、下の方は画面サイズによる分岐が書かれていますので、その上の何もないところ（PCとスマホ共通部分）に追加しましょう。
追加後に、子テーマの「ファイルを更新」ボタンを押すと保存され、反映されます。
PCのブラウザの幅を狭くしてスマホサイズを確認するか、実際にスマホで見てみましょう！
ちなみに、「PC表示はそのままで、タブレット以下のサイズの画面でこれが反映されたら良いなー」と思って、子テーマの「/*media Queries タブレットサイズ（960px以下）」のところに、今回追加した記述を書いてみたのですが、上手く反映されませんでした・・・(´・ω・`)
PCでの見た目は変わらないので、問題ないと思うことにします（強引）。
※2016/12/02追記
テーマカスタマイザーを使って、「ヘッダー背景の横幅を100%にする」「メニューの横幅を100%にする」設定をしている方は、このカスタマイズをするとPCでの表示にも影響が出てしまいます。他の方法を探索中です・・・すみません！
記事の幅が狭くなった分、横幅に入る文字数が減る
上のカスタマイズ前後の画面を見ていただくとわかると思いますが、記事の幅が狭くなった分、一行あたりの文字数が減ってしまい、縦に長くなってしまうというデメリットもあります。
気になる方は記事のフォントを少し小さくするか、一覧画面の場合は抜粋文の文字数を短くするなど、調整してみてください。
抜粋文の文字数は、Affinger4の管理画面から設定できます。
目的は果たせたけど、もやもや
やりたいことは出来たので、とりあえず目的は果たせました！
・・・なのですが、親テーマのstyle.cssを見ると、スマホとPCでは別々の「wrapper」が設定されているようなのです。
でも、画面サイズで分岐しているような記述が見つけられ無くて、どうやって分けているのかが、わかりませんでした・・・。
うーん。
そのあたりは知識不足でモヤモヤしますが、とりあえず目的は達成できたので、いつかわかるようになりたいと思います(゜∀。)
追記：背景色を設定した場合も、同じ設定で反映できます
自分が背景に画像を使いたくてすっかり忘れていましたが、背景色を設定した場合も、同じやり方で反映できます。
こんな感じで、記事の両側に背景色が見えるようになります。
