さて、テーマ自作3回目です。
ブレイクポイントを決める
今回は、前回予告いたしました通り、_sテーマのレスポンシブ化に取り組みます。前回の最後にも書いたように、現状ではスマホでも２カラムで表示され、サイドバーの幅は「25%」と指定されているので、読みにくい状態なのですが、実はメインメニューは「primary menu」というボタンになっています。こっそりレスポンシブデザイン的なものが導入されているわけですね。
というわけで、ナビゲーション関係を指定している「_menus.scss」を見てみると、ありました、ありました。
@media screen and (min-width: 37.5em) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: block;
}
}
メディアクエリが出てくるのはここ1ヵ所だけです（こういう場合はCSSの方で検索すると早い）。というわけで、小さい方のブレイクポイントは37.5emになっているのですが、Twentyseventeenなんかだと小さい方は768pxくらい、でかい方は992pxくらいなので、今回は単位を「rem」で統一して、48remと64remで行きたいと思います。
ここではSASSらしく、この数値は変数に入れましょう。「variables-site」というフォルダに変数ファイルがまとめてあるので、その中の「_structure.scss」に下記を追加します。
$low-breakpoint: 48rem; $high-breakpoint: 64rem;
そしてさっきのメディアクエリを
@media screen and (min-width: $low-breakpoint) {
と書き換えます。
また、サイドバーの幅が25％だとwidthが狭くなってくると読みにくくなるので、「_structure.scss」の「$size__site-sidebar」の25％を30%に書き換えます。
_content-sidebar.scssを書き換えていく
それから「_content-sidebar.scss」を書き換えていきます。「.site-main」は、スマホ用表示にしたとき、右側のマージンが不要になるので下記のように書き換えます。paddingとかは適宜加えてます。SASSだとメディアクエリをクラスの指定の中に書けます。メディアクエリごとに分散しないので、わかりやすいです。
.site-main {
margin: 0 $size__site-sidebar 0 0;
padding: 0 1.5rem;
@media screen and (max-width: $low-breakpoint) {
margin:0;
}
}
サイドバーはスマホ表示の時のwidthを100％にしています。
.site-content .widget-area {
float: right;
overflow: hidden;
width: $size__site-sidebar;
padding: 1.5rem;
background: #bbb;
@media screen and (max-width: $low-breakpoint) {
width: 100%;
}
}
.site-content .widget-area {
float: right;
overflow: hidden;
width: $size__site-sidebar;
padding: 1.5rem;
background: #bbb;
@media screen and (max-width: $low-breakpoint) {
width: 100%;
}
}
SASSのmixinを使う
さらに、でかい方のブレークポイントより広がってもメインのエリアの幅は64remのままにしたいので、「.site-content」のクラスに例のブロックを中央に配置するマークアップを施したいわけですが、sassフォルダをつらつら見るに、mixinsフォルダというのがありまして、その中の「_mixins-master.scss」のなかにcenter-blockなるmixinが定義してあるではありませんか。
// Center block
@mixin center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
mixinというのはSASSの最も強力な機能との呼び声高いようで、上記のようなよく使うスタイルを定義しておいて、ガンガン流用できるというものですね。しかも引数を使うこともできるので、今回は上のmixinを少し改造して、
// argument Center block
@mixin arg-center-block($value) {
width: $value;
margin-left: auto;
margin-right: auto;
}
として、それを@includeで「.site-content」に下記のように読み込むわけです。
.site-content {
@media screen and (min-width: $high-breakpoint) {
@include arg-center-block($high-breakpoint);
}
}
同様に、ヘッダの「.site-branding」、フッタの「.site-info」にもmixinを呼んであげましょう。こうしておけば、ブレイクポイントを後で変えたくなっても、へっちゃらですね。やっぱSASSいいわ〜。
phpもすこしいじる
さて、これで、現状、メインメニュー以外は64remを越えれば、中央に配置されたブロックに収まるようになりました。メインメニューも同様にするにはと、「_menus.scss」の「.main-navigation」にもmixinを呼んであげますが、これがダメなんですね〜。
できれば、CSSに手を入れるだけで行きたかったですが（あるいは方法があるのかもしれないですが）、ここは「header.php」を開いて、45行目あたりの
<nav id="site-navigation" class="main-navigation"> ...... </nav><!-- #site-navigation -->
のなかに
<nav id="site-navigation" class="main-navigation"> <div class="main-navi-inner"> ...... </div><!-- .main-navi-inner --> </nav><!-- #site-navigation -->
とクラスをひとつ作ってやって、そこにmixinを呼んできてやりましょう。
.main-navi-inner {
padding-left: 1rem;
@media screen and (min-width: $high-breakpoint) {
@include arg-center-block($high-breakpoint);
}
}
これで一応、スマホ用、タブレット＆小さいディスプレイ用、でかいディスプレイ用のデザイン用の大枠ができたということで、本日はここまで。
