Yoshihara.LaB
Yoshihara.LaB
You are at:»»TwentyTwelve カスタムstyle.css
blog

TwentyTwelve カスタムstyle.css

By 1件のコメント
Google+ Pinterest LinkedIn Tumblr +

CSSのメディアクエリでハマりました・・・・

WordPressのテンプレートカスタマイズにおいて、子テーマを作っての作業は推奨される手順ですが、今回このサイトをデフォルトのTwentyTwelveをベースにカスタムしていく中で、どうしても思うことが出来ずに悶々としてしまった。

実際の作業はこれからだが、頭の中の整理のために書いておくことにした。

子テーマを作るには
wordpressインストールディレクトリ/wp-content/themes/twentytwelve-child/(任意名,例)を作り、その中にstyle.cssを置けば良い

中身の書き方はWordPressの公式ドキュメントを見て頂くとして、TwentyTwelveのstyle.cssをインポートして変更部分や追加をしていくというやり方が一般的。

@import url(‘../tewntytwelve/style.css’);

作業をすすめていくうちにどうしても出来ない問題があった。

親のCSSを”@import” したstyle.cssに修正や追加をしていくのですがクラスやidが同じであれば上書きなければ追加という作業をしていくのには、なにも問題はない。

今回ウィジェットの追加や、サイドバー（左カラム）を拡げるという事から全体の幅を大きくした。

レスポンシブデザインのテンプレートになっているが、
表示領域の微妙なところで、レイアウト的にあまりよろしくないサイズがあることがわかった。

ここは本当に個人的な問題なのかも知れない、別に気にしなくても良いというぐらい微妙なポイント。

レスポンシブデザインに対応しているCSSではMedia Queries（メディアクエリ）の記述があります。
TwentyTwelveのstyle.cssでは、600pxを基準にモバイルデバイスとPC画面サイズの判定をしている。

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px)

・

・

 

もうひとつは、960px(デフォルトのコンテンツ領域サイズ)以上での余白やカスタマイズ画面で設定出来るバックの色が左右に表示するためのものが中心

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
body {
background-color: #e6e6e6;
}
body .site {
padding: 0 40px;
padding: 0 2.857142857rem;
margin-top: 48px;
margin-top: 3.428571429rem;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

・

・

 

この600pxで相当に苦労した。

レスポンシブWebデザインでの設計には大きく分けると2つある。

厳密にいうと２つ＋ミックス的な方法もいれて３つ。 たとえば『ブラウザ毎にCSSを分けたりデバイス毎にCSSを分けたりデザイン自体を違うモノにしたい。』などの要望がある場合だとミックス的なやり方が良い場合もあるでしょう。

  1. PCのサイトを作ってそれを小さな画面に合わせて変更するやり方 max-width サイズより小さい場合に、スタイルが適用
  2. モバイルサイトを作って大きい画面でのレイアウトを指定するやり方 min-width サイズより大きい場合に、スタイルが適用
  3. マルチブルに指定範囲毎のレイアウトを作る (min-width: A) and (max-width: B) サイズAからB未満の場合にスタイルが適用 (min-width: C) and (max-width: D) サイズCからD未満の場合にスタイルが適用 …………以下必要分繰り返し

1. 2. どちらでも問題はないし、3のマルチブルも併用することはあるかもしれない。

私的な考えですが、現在のようにレイアウトをCSSで組み立てて配置する方法であれば、普通に縦に並べていき、スクリーンサイズに合わせて組立、並べ替える方が良いのではないかと思う。
いわゆるモバイルファーストといわれるやり方ですね。

今回カスタマイズ中のTwentyTwelveも、モバイルファーストな書き方がされている。

今後デバイスの種類がどれだけ増えるのか分からないけれども、スクリーンサイズが今以上に多様化していくかも知れない。（あまりして欲しくはないが。。）

サイドカラムを拡げたいということもあり、コンテンツ表示領域をデフォルトの960pxから1050pxに変更した。

タブレットサイズのデバイスで、スクリーンサイズによっては投稿コンテンツ表示域が狭く感じられることがありそう。
（（　このあたりまでWordpress公式での対応に期待してはいけないですよね？（笑）小さく書いておこう・・・・））

この場合、@media screen のmin-widthを600pxから大きくしてあげるだけで良い

しかし先に読み込んだ親のCSSの該当場所だけを消す方法はいくら探しても見つからない

いろいろ考えてみたが解決策は思いつかない。
@media screenのmin-width600pxで指定してあるクラスやid指定を再指定するにはあまりに手間がかかり過ぎるし、再度変更pxで同様の指定をするのも2度手間・・などなどあれこれやってみたり・・

WEBを調べ回っていると、直接関係はないがCSSの読み込みに@importは使うべきじゃないという記事を発見

大きな理由はサイトの表示によくない、読み込みのパフォーマンスが良くないなど詳しくはこのページ[CSS]css-importを使うべきでない理由　他にもWeb上に詳しく書いてあるサイトもあるので、ご興味があればお暇なときにでもどうぞ。

では、どうする？

  1. style.cssを子テーマ内にコピーして直接書き換える
  2. 出来る限り元のCSSは触らない方針で、必要な変更は別CSSファイルで上書きする
  3. 今回問題となっているメディアクエリの部分は別ファイルとし、style.css内から@importせず<head>内で link rel=’stylesheet’ で読み込む

どちらにせよ、きちんと差分を取っておかないとテーマのバージョンアップ時に困ったことがおこるかも知れない

今回のカスタマイズで、googleのWebfontをブログタイトルに使ったりでfunction.phpに書き込んでstylesheetを<head>内に追加する作業もあるので、２番目の方法を採用。

並列処理だとはいえ最初に読み込むファイルは少ない方がコンマ何秒にしろ良いとは思うが、これも勉強だと思ってやってみることにした。

そのうち今回の作業まるごと、きれいにまとめてUPしておこう。

Share.

About Author

Related Posts