Media Queries

Webページのスタイルを指定するCSS3で追加された仕様で、表示される画面環境に応じて適用するスタイルを別個に指定することができます。現在は、PC環境、タブレット環境、スマホ環境とWebページを見るプラットフォームが異なるので、Media Queriesが使われています。もちろん、こんな話から始めたのは、今回とりあげるメインサイドバー(左側サイドバー)の設定にはMedia Queriesの機能が使われているからです。

 

親テーマのスタイルシートを確認

管理画面の〔外観〕-〔テーマ編集〕-〔編集するテーマの選択〕で、親テーマを指定して、いつものように、まずは親テーマのスタイルシートでメインサイドバーの幅がどのように設定されているか確認します。

 

親テーマの設定1
親テーマの設定1

#secondary {
width: 162px;
}

デフォルト162pxという指定が確認できました。私はデフォルトのまま、設定変更しませんが、ここでは例として202pxにしてみたいと思います。

結果1
結果1
問題箇所
問題箇所

 

私のウェジェットの配置では、抜粋記事5件表示までの設定では凹みjませんでしたが、それ以上の記事を表示すると、メインサイドバーに何も表示されいない部分が、162pxに戻ってしまっていました。そのため、スタイルシートに以下のような記述を追加しました。

子テーマの設定1
子テーマの設定1
結果2
結果2

 

一見上手くいったように見えるのですが、ウィンドウのサイズを狭めてみると、設定変更前と、設定後では、大きな違いが出ています。
ウィンドウを大きなサイズにしているときは分からないのですが、レスポンシブデザインですから、画面を小さくすると、記事一覧が最初に来て、下のほうにコンテンツサイドバーやメインサイドバーが回り込みます。このとき、これまでの設定では、以下のような違いが出ています。

Media Queriesが無効化されてしまった
Media Queriesが無効化されてしまった

設定変更前は、小さな画面用に、コンテントサイドバーとメインサイドバーが下側にまわり込み、自動的に適切なサイズになりましたが、設定変更後のメインバーは、固定サイズになってしまいました。というのも、親テーマで上記の設定がされている箇所は、Media Queriesが指定されている箇所だからなのです。
ここでは、画面サイズの最小が1080pxのとき、〈画面サイズが1080pxよりも大きいとき〉の設定が記述されています。

親テーマの設定2
親テーマの設定2

つまり、子テーマのスタイルシート側でも、この設定はPC環境時に適用されるという指定をしておかないと、Media Queries機能が読み込まれません。試しに、子テーマに以下のように書いてみました。

編集例
編集例

 

/**********メインサイドバーの設定**************/
@media screen and (min-width: 1080px) {
.site:before {
width: 262px;
}

#secondary {
width: 202px;
}

結果 メインサイドバー
結果 メインサイドバー

 

今度は、小さな画面には、指定サイズが反映されず、問題なく表示されました。
ただ、メインサイドバーのサイズを変えるのなら、自分が変更したメインサイドバーのサイズに応じて、親テーマで指定されている、他の設定も適切な数値に変更していく必要があります。こちらは、パーセント指定一発で済むというものではなく、自分が設定したメインサイドバーのサイズによって、変更する値にも違いが出るので、コンテントサイドバーより、ちょっと面倒ですね。

長くなりましたので、続きは次回。次からのシリーズでは、2つのサイドバーの見栄えを整えていきたいと思います。