SANGOのカスタマイズ：投稿記事の幅を調整する方法

WordPressテーマ SANGOの投稿記事幅を広げる方法についてメモを残します。

結論

SANGOの子テーマのsteyle.cssにコードを追加することで、投稿記事幅のサイズを700pxから800pxに広げることができました。

SANGOを使ってて気になったこと

通常の文章を書いている分には気にならなかったんですが、技術系の記事で登場するコマンドやプログラミングのコードを書くときに、投稿記事の幅の狭さが気になりました。

そこで、投稿記事の幅を調整することにしました。

ざっくり調べですが、私が参考にしているIT系のサイトやブログ、「Qiita」と「いつも隣にITのお仕事」のレイアウトと、SANGOのデフォルトを比較してみました。
※ここで言う全体幅とは投稿記事の左端からウィジェットの右端を指してます。

SANGOのデフォルトだと、Qiitaや、隣にITと比べると、全体幅と投稿記事の幅が100pxほど小さく、ウィジェット幅がやや大きいことが分かりました。

目標

SANGOをカスタイマイズして、以下のように調整してみます。

全体幅　　　　：1180px → 1256px
投稿記事幅　　：700px → 800pxくらい
ウィジェット幅：300pxくらいあればOK

やったこと

ググってみると、SANGOカスタマイズガイドのQ&Aに行き着きました。
https://saruwakakun.com/sango/comments?id=2082

SANGOの子テーマのstyle.cssに以下を追加します。

全体幅と、d-5of7とd-2of7のwidthを調整します。

最終的なコードは以下のようにしました。

/*========= 1240px〜の場合 =========*/
@media only screen and (min-width: 1240px) {
  .wrap,
  .maximg,
  .single #inner-content,
  .page #inner-content,
  .inner-footer {
    width: 1256px;
  }
}
/*end min-width: 1240px*/

/*========= 1030px〜の場合 =========*/
@media only screen and (min-width: 1030px) {
  /* 記事幅とサイドバーの調整（d-5of7とd-2of7の合計が100%になるように調整する）*/
  .single .wrap, .page .wrap, .single #inner-content, .page #inner-content {
    width: 1256px; /*全体幅*/
  }
	/*サイドバーが狭くなるのが気になる場合はサイドバーの割合を少し大きくする*/
  .d-5of7 {
    width: 73%;/*メインカラム幅*/
  }
  .d-2of7 {
    width: 27%;/*サイドバー幅*/
  }
}
/*end min-width: 1030px*/

結果

ウィジェット幅に大きな変わりなく、目標通り、記事幅を広げることができました。

全体幅　　　　　：1180px → 1256px
投稿記事の幅　　：700px → 約802px
ウィジェットの幅：345px → 約340px

まとめ

• SANGOのカスタマイズについては、SANGOカスタマイズガイドが参考になります。
  https://saruwakakun.com/sango/
• SANGOの投稿記事の幅やウィジェット幅を調整したい場合は、子テーマのstyle.cssにコードを追加することで実現できます。
  全体幅を絶対値で指定して、投稿記事幅とウィジェット幅は合計が100%になるように、パーセンテージで調整します。