WordPressのコンテンツ(記事)の幅を広げる

WordPressのコンテンツ(記事)の幅を広げる覚書です。

WordPressのコンテンツ(記事)の幅を広げる

コンテンツの幅を増やす基本

基本はコンテンツとサイドバーの比率を変えることですね。コンテンツを足したら、そのかわり、サイドバーを引きます。比率が全体の幅より大きくなると、サイドバーが落ちる原因になります。

レスポンシブデザインのコンテンツの幅を増やすコード

WordPressのテーマにより、数字を変えても、幅が広がないことがあります。!important;を利用して解決する方法もありますが、レスポンシブデザインの場合は、スマホのレイアウトに影響を及ぼすことがあります。

いろいろとやり方はあると思いますが、次のようなコードで解決する方法もあります。

@media screen and (max-width 480px) {
    #content{
        width: 65%;
    }
}
@media screen and (min-width: 481px) {
    #content {
        width: 65% !important;
    }
}
@media screen and (max-width 480px) {
    .sidebar{
        width: 23%;
    }
}
@media screen and (min-width: 481px) {
    .sidebar {
        width: 23% !important;
    }
}

marginなどは省略しています。スマホは変えず、PCのレイアウトのみ幅を調整しています。もちろん、パーセントではなくピクセルで調整することもできます。

幅が広がると、ソーシャルボタンを並べたり見出しが改行しないようにしたり、アドセンスなどを並べて配置したりするのに便利になります。