ここ数ヶ月の間、WordPressの公式テーマを開発しているのですが、テーマをチェックしている人に「サイドバーに何も表示されていないときにサイドバー部分が余白になってるから、サイドバーにウィジェット等が無いときはコンテンツ幅を広げて余白をなくしてね！」って言われました。
そのためサイドバー内に何も表示されるものが無いときは、コンテンツ幅を100%表示する対策をしたので、その方法をこの記事にまとめました。
同じような悩みを持っている方は参考にしてください。
サイドバー内に何も表示するものが無いときにコンテンツ幅を100%にする方法
実現方法は３ステップです。
STEP１．サイドバー内に表示するものが何も無いときのスタイル（width100%）を定義する
まず、サイドバー内に何も表示するものが無かった場合の、コンテンツ幅100%をスタイルシートで定義します。
HTML
<body class="single-post">
<div>
<div class="contents">メインコンテンツエリア</div>
<aside class="sidebar">サイドバーエリア</aside>
</div>
</body>
CSS
.contents{
width: 100%;
}
結果
あたり前ですが、コンテンツ幅が100%で表示されます。
STEP２．サイドバーがあるときだけbodyタグにクラス名が付与される処理を追加する
次に、サイドバー内にウィジェット等が表示される場合に、bodyタグにクラス名を追加する処理をfunctions.phpに追加します。
この処理はサイドバーが存在するときだけ、コンテンツ幅を変化させるスタイルを定義するために必要になります。
function mytheme_body_classes( $classes ) {
// 下記の「sidebar1」及び「sidebar2」部分はご自身のテーマに合わせて変更してください。テーマによって数や名称が変わります。
if ( is_active_sidebar( 'sidebar1' ) || is_active_sidebar( 'sidebar2' ) ) {
// 下記の「has-sidebar」がサイドバーが存在するときだけbodyタグのクラス名に追加されます。
$classes[] = 'has-sidebar';
}
return $classes;
}
add_filter( 'body_class', 'mytheme_body_classes' );
これでサイドバーが必要なときだけ、bodyタグに「クラス名（上記の場合は、has-sidebar）」が付与されます。
あとは、このクラス名を基準にスタイルシートでコンテンツ幅を定義してあげれば完了です。
STEP３．サイドバーが存在する場合のコンテンツ幅を定義する
上記の例で進めた場合、下記のようなスタイルを定義します。
かんたんに言うと、「.has-sidebarがついているbodyタグ内の.contentsの要素は幅70%にする」ということです。
そしてサイドバーの幅も定義すれば完了ですね。
今回の例では、メインコンテンツの幅が70%でサイドバーの幅が20%にしてます。
HTML
<body class="single-post">
<div>
<div class="contents">メインコンテンツエリア</div>
<aside class="sidebar">サイドバーエリア</aside>
</div>
</body>
CSS
.contents{
width: 100%;
}
.has-sidebar .contents{
width: 70%;
}
aside.sidebar{
width: 20%;
}
以上がサイドバーが無いときにメインコンテンツの幅を100%して、サイドバー部分の余白をなくす方法になります。
コメント