基本的に Graphy の カスタマイズを始める際、この子テーマを作りしましたが、 その際に親テーマとなる Graphy の CSS ファイルは事前に読み込むスクリプトを functions.php ファイルに記載しており、 よって必要な分のスタイルを子テーマの style.css に追記して上書きする方針をとりました。
# 全体の効率としては悪いことは承知の上です
もとの Graphy の CSS ファイルは、LESS だの SCSS ではない、 長大で複数のファイルからなる CSS ファイルなので、 数秒考えればこの方法が一番手っ取り早いと気づかれるかと思います。
Graphy は導入すれば、 レスポンシブなサイトとなり、スマートフォンなどのモバイルデバイスでも、 そのミニマルで美しい体裁は保てるのですが、 ラフにいうと、通常の PC での表示の場合は、細かく指定してボックス要素をレイアウトしているのに対して、 モバイルデバイスでの表示ではイメージ的には表示・非表示をボックス要素ごとに決めて上から積んでいる 以上のレイアウトはしていないように想われます。
従って、Graphy の場合、 幅 780px 以上でのビュー（ PC で見るような場合）と、幅 780px に満たない場合のビュー （タブレットやスマートフォン）でレイアウトの方針を変えないといけない場合があります。
今回、施したカスタマイズの場合、パンくずナビゲーションの表示位置を決める際、 この問題にぶち当たりました。
具体的に言うと、幅 780px に満たないビューの場合は、 どこに表示させるかさえ決まれば、特に問題はないのですが、 780px 以上でのビューの場合は、単純に表示位置だけ決めてブロック要素を挟むと、 妙に間延びしたレイアウトになったりします。
そこで、スクリーンサイズごとに以下のような記載を style.css ファイルに追加しています。
@media screen and (min-width: 780px) {
.breadcrumbs {
margin-top: -52px;
}
}
@media screen and (max-width: 779px) {
.breadcrumbs {
margin-top: -28px;
}
}
これはパンくずナビゲーションの表示位置を調整する記載です。このように 780px を境目に CSS ファイルで Graphy の もつタイポグラフィの美しさを保ちつつ調整するようにしてください。
今回の WordPress 仕事で 蓄えた知識は以上です。ここまで飽きずにまとめた自分を褒めてあげたい ^^
お付き合いいただき、閲覧いただいた方にも感謝 m(_ _)m
「 WordPress 仕事で得た知識： Graphy カスタマイズ #6 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #5 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #4 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #3 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #2 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #1 」
「 WordPress 仕事で得た知識： Graphy カスタマイズ #0 」
