Twenty Fourteenのコンテンツ部分横幅を広げる

アイキャッチ画像やら記事中の画像の数が増えてくると、Twenty Fourteenのデフォルト状態では若干メインコンテンツの横幅がせまく感じます。
そこで、メインコンテンツ部分の余白サイズを変更し、横幅を広げるカスタマイズをしたいと思います。
そして、おまけで、ページを中央表示にします。
予想に反して手こずってしまいました．．．

style.cssの編集

下記のコードを、子テーマにてTwenty Fourteenをカスタマイズしている場合には子テーマのstyle.cssに追記、Twenty Fourteenを直接編集している場合にはTwenty Fourteenのテーマディレクトリのstyle.cssの最下部に追記してください。


すると、このような表示になります。
この画像だと少々わかりにくかもいれないけど、タイトルがデフォルト状態よりも左に寄っています。
もちろん右側にも広くなっています。
このカスタマイズにより、画像の表示のされ方なども大きく変化します。
Twenty Fourteenはレイアウトが雑誌のようにオシャレです。
しかし、ごくごく普通のレイアウトで記事を作りたい場合には、そのオシャレさは必要なくなります。

私と同じように感じる方は、今回のカスタマイズはかなり有用だと思います。

感想

まだまだTwenty Fourteenには慣れず、ほんの少し余白を削除するだけでも、かなりの時間を要しました。
私のCSSの知識不足とも言います。

Twenty FourteenはCSS3のMedia Queriesを使用して設定をしているので、カスタマイズする際にはたくさんの変更箇所が存在します。
慣れれば短時間で済むのかもしれませんが、私にはハードルが高いです．．．

Twenty Fourteenはシンプルがゆえに、カスタマイズのしがいがあります！
これからも色々なカスタマイズに挑戦していきたいと思います！

関連記事