SANGOのサイドバーの横幅をコピペで変えるカスタマイズ方法




いらっしゃいませ三姉妹育児に奮闘中の主婦、あず(oyakocreate)です。

今回は、Twitterで質問があった「SANGOのサイドバーの横幅の広さを変更する方法」についてまとめておきます。

SANGOユーザーさんはコピペするだけで簡単にできるので、サイドバーの広さが気になる方はお試しください。

今までに書いたSANGOのカスタマイズ方法は「コピペで簡単にできるSANGOのカスタマイズ方法まとめ」にまとめているので、良ければ参考にしてみてください。

コピペで簡単にできるSANGOのカスタマイズ方法まとめ

SANGOのサイドバーを広くする

カスタマイズ前
カスタマイズ後

カスタマイズする前と、カスタマイズしたあとの違いは、上記の画像をご覧ください。

サイドバー単体の横幅を広げるだけでなく、記事一覧の表示幅も一緒に広げています。

実際の表示を確認したい方は「トップページ」をご覧ください。

カスタマイズ方法

子テーマのstyle.cssに以下のコードを追記してください。

@media only screen and (min-width: 1230px) {
.wrap {
  width: 1200px;
}
.d-5of7 {
  width: 70%;/*メインコンテンツ幅(デフォルト69%)*/
}
.d-2of7 {
  width: 30%;/*サイドバー幅(デフォルト31%)*/
}
}

メインコンテンツ幅+サイドバー幅が100%になるように、自由に調整してみてください。

SANGOのサイドバーの幅を変えよう!

記事一覧ページをパソコンから見たときに、スッキリしすぎているのが気になっていたので、1000pxから1200pxに変更しました。

それぞれの数値はご自分の好みに合わせて変えてみてください。

今までに書いたSANGOのカスタマイズ方法は「コピペで簡単にできるSANGOのカスタマイズ方法まとめ」にまとめているので、良ければ参考にしてみてください。

コピペで簡単にできるSANGOのカスタマイズ方法まとめ この記事はここまでです。もしお時間があれば、ぜひ他の記事も読んでいってくださいね。

あず(oyakocreate)でした

ブログのトップページへ