SANGOのサイドバーの横幅を広くするカスタマイズ

どうも、あず(@yuuki_azusa)です

今回は、Twitterで質問があった「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に変更しました。

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

最後まで読んでくれてありがとうございました。あず(@yuuki_azusa)でした

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です