wordpressインストールディレクトリ/wp-content/themes/twentytwelve-child/(任意名,例)を作り、その中にstyle.cssを置けば良いレスポンシブWebデザインでの設計には大きく分けると2つある。CSSのメディアクエリでハマりました・・・・WordPressのテンプレートカスタマイズにおいて、子テーマを作っての作業は推奨される手順ですが、今回このサイトをデフォルトのTwentyTwelveをベースにカスタムしていく中で、どうしても思うことが出来ずに悶々としてしまった。実際の作業はこれからだが、頭の中の整理のために書いておくことにした。子テーマを作るにはwordpressインストールディレクトリ/wp-content/themes/twentytwelve-child/(任意名,例)を作り、その中にstyle.cssを置けば良い中身の書き方はWordPressの公式ドキュメントを見て頂くとして、TwentyTwelveのstyle.cssをインポートして変更部分や追加をしていくというやり方が一般的。url(‘../tewntytwelve/style.css’);作業をすすめていくうちにどうしても出来ない問題があった。したstyle.cssに修正や追加をしていくのですがクラスやidが同じであれば上書きなければ追加という作業をしていくのには、なにも問題はない。今回ウィジェットの追加や、サイドバー(左カラム)を拡げるという事から全体の幅を大きくした。表示領域の微妙なところで、レイアウト的にあまりよろしくないサイズがあることがわかった。ここは本当に個人的な問題なのかも知れない、別に気にしなくても良いというぐらい微妙なポイント。Queries(メディアクエリ)の記述があります。TwentyTwelveのstyle.cssでは、600pxを基準にモバイルデバイスとPC画面サイズの判定をしている。・この600pxで相当に苦労した。レスポンシブWebデザインでの設計には大きく分けると2つある。厳密にいうと2つ+ミックス的な方法もいれて3つ。『ブラウザ毎にCSSを分けたりデバイス毎にCSSを分けたりデザイン自体を違うモノにしたい。』などの要望がある場合だとミックス的なやり方が良い場合もあるでしょう。どちらでも問題はないし、3のマルチブルも併用することはあるかもしれない。私的な考えですが、現在のようにレイアウトをCSSで組み立てて配置する方法であれば、普通に縦に並べていき、スクリーンサイズに合わせて組立、並べ替える方が良いのではないかと思う。いわゆるモバイルファーストといわれるやり方ですね。今回カスタマイズ中のTwentyTwelveも、モバイルファーストな書き方がされている。今後デバイスの種類がどれだけ増えるのか分からないけれども、スクリーンサイズが今以上に多様化していくかも知れない。(あまりして欲しくはないが。)サイドカラムを拡げたいということもあり、コンテンツ表示領域をデフォルトの960pxから1050pxに変更した。タブレットサイズのデバイスで、スクリーンサイズによっては投稿コンテンツ表示域が狭く感じられることがありそう。min-widthを600pxから大きくしてあげるだけで良いしかし先に読み込んだ親のCSSの該当場所だけを消す方法はいくら探しても見つからないいろいろ考えてみたが解決策は思いつかない。他にもWeb上に詳しく書いてあるサイトもあるので、ご興味があればお暇なときにでもどうぞ。読み込むどちらにせよ、きちんと差分を取っておかないとテーマのバージョンアップ時に困ったことがおこるかも知れない今回のカスタマイズで、googleのWebfontをブログタイトルに使ったりでfunction.phpに書き込んでstylesheetを<head>内に追加する作業もあるので、2番目の方法を採用。並列処理だとはいえ最初に読み込むファイルは少ない方がコンマ何秒にしろ良いとは思うが、これも勉強だと思ってやってみることにした。そのうち今回の作業まるごと、きれいにまとめてUPしておこう。Postthe_post_navigationでカテゴリーごとに。このサイトの使用を継続することで、その使用に同意したとみなされます。コントロール方法を含む詳細についてはこちらをご覧ください。