プログラミング学習

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のレイアウトのみ幅を調整しています。もちろん、パーセントではなくピクセルで調整することもできます。

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

コメント

  1. tin tuc am thuc より:

    It’s amazing fߋr me tо haνe a web page, ᴡhich is good designed fօr my experience.
    tһanks admin

タイトルとURLをコピーしました