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のレイアウトのみ幅を調整しています。もちろん、パーセントではなくピクセルで調整することもできます。
幅が広がると、
ソーシャルボタンを並べたり
見出しが改行しないようにしたり、
アドセンスなどを並べて配置したり
するのに便利になります。