2019年9月22日ここ数ヶ月の間、WordPressの公式テーマを開発しているのですが、テーマをチェックしている人に「サイドバーに何も表示されていないときにサイドバー部分が余白になってるから、サイドバーにウィジェット等が無いときはコンテンツ幅を広げて余白をなくしてね!」って言われました。そのためサイドバー内に何も表示されるものが無いときは、コンテンツ幅を100%表示する対策をしたので、その方法をこの記事にまとめました。同じような悩みを持っている方は参考にしてください。実現方法は3ステップです。STEP1.サイドバー内に表示するものが何も無いときのスタイル(width100%)を定義するまず、サイドバー内に何も表示するものが無かった場合の、コンテンツ幅100%をスタイルシートで定義します。100%;}結果あたり前ですが、コンテンツ幅が100%で表示されます。STEP2.サイドバーがあるときだけbodyタグにクラス名が付与される処理を追加する次に、サイドバー内にウィジェット等が表示される場合に、bodyタグにクラス名を追加する処理をfunctions.phpに追加します。この処理はサイドバーが存在するときだけ、コンテンツ幅を変化させるスタイルを定義するために必要になります。下記の「sidebar1」及び「sidebar2」部分はご自身のテーマに合わせて変更してください。テーマによって数や名称が変わります。下記の「has-sidebar」がサイドバーが存在するときだけbodyタグのクラス名に追加されます。);これでサイドバーが必要なときだけ、bodyタグに「クラス名(上記の場合は、has-sidebar)」が付与されます。あとは、このクラス名を基準にスタイルシートでコンテンツ幅を定義してあげれば完了です。STEP3.サイドバーが存在する場合のコンテンツ幅を定義する上記の例で進めた場合、下記のようなスタイルを定義します。かんたんに言うと、「.has-sidebarがついているbodyタグ内の.contentsの要素は幅70%にする」ということです。サイドバーの幅も定義すれば完了ですね。今回の例では、メインコンテンツの幅が70%でサイドバーの幅が20%にしてます。20%;}以上がサイドバーが無いときにメインコンテンツの幅を100%して、サイドバー部分の余白をなくす方法になります。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。新しい投稿をメールで受け取るキタジマ山形の田舎でIT・WEB系フリーランスしてます。元溶接屋→インフラ系エンジニア→WEBエンジニア→現在フリーランス。主なお仕事は、WEBサイトの制作やITシステムの構築。運営者こんにちは、当サイトを運営しているキタジマと申します。山形県の田舎でIT・WEB系のフリーランスとして2019年から活動してます。元溶接屋→インフラ系エンジニア→WEBエンジニア→現在フリーランス。主なお仕事は、WEBサイトの制作やITシステムの構築。そんな僕は田舎でのんびり暮らしてます。プロフィール詳細お問い合わせはこちらWEBサイト制作のご依頼はこちらフリーランススタートガイドポートフォリオざっくりですが、僕の経験・実績のあるジャンルです。