WordPress 3.5に更新。ついでにサイトもリニューアル。

blog01

WordPress 3.5 +「Twenty Twelve」

WordPressを3.5にバージョンアップしたついでに、デフォルトテーマの「Twenty Twelve」を少しだけいじって、プチリニューアルをいたしました。「Twenty Twelve」は様々なデバイスでコンテンツを読みやすくなるように設計された「レスポンシブ・デザイン」対応のテーマということで、「rem」指定が使われています。もちろんCSS3未対応のブラウザのためにpxでの指定も併記しないといけません。それにしても、「rem」ってちょっとわかりづらいですよね。「1.142857143rem」と書いてあってもなんのこっちゃ?って感じです。でも、デフォルトテーマのスタイルシートには、きちんと解説が書いてあるのでご安心を!

例えば「Twenty Twelve」ではremのベースが14px、line-heightが24pxと設定されています。
ですので、16pxならば16÷14=1.142857143remになるということです。

カスタマイズは子テーマを設定

さて、今回もCSSをいろいろといじっているわけなのですが、「Twenty Twelve」の元々のファイルは変更せずに、変更部分だけを子テーマを設定してみます。こうすることで、親のテーマが更新されても、せっかく設定したCSSなどが上書きされる心配がないからです。

やり方は超簡単!

「wp-content」の「themes」階層内に、適当なディレクトリを作り、更新が必要なファイルだけ設置します。自分はCSSファイルなので、それだけを置いておきました。

blog02
同じ階層に設置します。

続いてCSSの設定。ファイルの上部に下記のような記述をします。

blog03
テンプレート名などは小文字オンリーです。

「Theme Name」は適当。「Template」は小文字オンリー(重要)です。そして、「@import」に親ファイルの読み込み設定も忘れずに。最後は管理画面内 →「外観」→「テーマ」を開いて、子テーマを有効化すれば完了です。

そんなわけで、ブログのリニューアルも無事完了!出来る限りシンプルにしたかったので結構気に入っています。WordPressの子テーマ設定は便利で良いですね。

「WordPress 3.5に更新。ついでにサイトもリニューアル。」への2件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です