Themeを流行のSassやらLESSやらが使われているBonesというのにしてみましたよ。


どもメガネです。

はい、ちょっといろいろ勉強しようと思いまして、ThemeをBonesに変更しました。
WP-Dでホワイトさんが紹介していたあれですね。

レスポンシブなテーマ作りを試すなら

とりあえずMACを購入しましたので、ついでにオススメのCodekitを購入しまして
Sassのプリプロセッサととしての能力を体感したところです。

大体の私の理解で説明すると

CSSをよりわかりやすく、書きやすくしたのがSassやLESSというやつですね。
入れ子にできたり、関数のようにしてCSSを使いまわせたりします。

bonesの場合は、

_base.scss
_grid.scss
_mixins.scss

といった具合にあらかじめわかりやすく分けられたSassファイルがありまして、それがまとまって
style.cssを整形してくれます。

この.scssを編集した際に自動的に.cssに自動的に統合してくれるのがCodekitの役目というわけですね。
なんて便利な奴なんでしょう。

さらに、このbonesThemeの特徴として、
style.cssの中に

/* line 126, ../scss/_base.scss */
h2, .h2 {
font-size: 1.75em;
line-height: 1.4em;
margin-bottom: 0.375em;
margin-top: 0.375em;
border-top: 1px solid;
padding-top: 0.375em;
border-color: #ccc;
}

といった形で、どこのscssファイルに該当の箇所が記載されているか、丁寧にコメントが付いております。
いやーたすかりますね。なんとケアフルなThemeでしょう。

そういうわけで、こんな私でもなんとかかんとか、デフォルトからWP-D風にすることができました。

今後、

海外のテーマを超簡単に日本語化する超手抜きな方法

この内容をもとに、日本語化したり。

OGPと非同期のソーシャルボタンコードを導入したり。

徐々に進めながら勉強していきたいと思っております。

フォントファミリーについては、毎度悩むのですが、今回は

font-familyどうしてますか?

こちらをもとに、
font-family: Helvetica, “ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro W3″,メイリオ,Meiryo,”MS Pゴシック”,sans-serif;

としてみました。
このへんもなんかベストプラクティスが決まっていてもいいもんなんですがどうなんでしょうね。。

そんな感じです。
例によって、上記内容は私の認識なので、間違いの可能性がありまくることをご了承ください。

でわでわ

コメントを残す