【wordpress】サイドバーの幅を固定したままレスポンシブcss

標準

woredpressで作ったレスポンシブ(スマホ対応)サイトで、メインコンテンツの幅は変わるけどサイドバーを任意の幅で固定しておきたい言う場合には下記のcssコードを追加するとOKです。

.main{
max-width: -webkit-calc(100% - 300px);
max-width: calc(100% - 300px);
}
.sidebar{
width: 300px;
}

上記のコードで、メインコンテンツの幅の最大値が100%から300pxを引いたものとなり、サイドバーを300pxに固定となります。

サイドバーに固定幅のAdsense広告を置いておきたいときなどに便利ですね!

参考までに♪


Amazon.co.jpで人気の『wordpress』関連商品はこちら↓↓↓

コメントを残す

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

This blog is kept spam free by WP-SpamFree.