sandboxのCSS構造

WordPressのテーマのひとつ、SandboxテーマとはCSSとテンプレートを完全に切り離し、CSSのみでデザインすることが出来るようになったテーマです。

ここで取り扱うのも全くの場違いだと思うのですが、なぜかUnofficial Planet WordPress Japanにリンクされていたので(有り難うございます。しかしうちみたいなのがなぜ……?)、またsandboxテーマで試行錯誤した成果(?)を初心者なりに提供してみようかと思いまして、このような記事をあげてみます。

sandboxの、divといくつかの見出しのクラスとidを大まかに書き込んだCSSファイルを載せておきます。
個別記事、個別コメント等に与えられるものなどの細かいクラス、idは記載していません。あくまでも一般的なクラスとidのみを扱っています。

構造化エディタを使って開けば、どのような入れ子構造になっているかが大雑把に分かると思います。Mac非対応ですみません。き、気力が……。睡眠が……。
ファイルはUTFで保存してあるので、そのままCSSファイルとして使える、と思います。

ただし、入れ子の深い要素の場合、多様なクラス、id指定が可能になるため、それらのクラスやidは書き入れておらず、単純にタグ(liとかulとかpとか)しか書いていません。きちんとそれぞれプロパティを指定したい場合は、上から継承されてくるクラス、あるいはidを書き加えてください。

CSSはこちら。
sandbox用CSS(Sandbox v1.3用)
右クリックで保存してください。また、sandbox用のCSSにする場合、CSSファイル名をstyle.cssに変更してください。不要です。sandboxはすべての.cssを読みに行くそうです。

ちょっとした真夜中の空き時間を使って(つまり睡眠時間を削って(苦笑))作ったので、不備がありますし(特に日本語が怪しい)、上にも書いたように細かいクラスやidまでは書き入れていません。あくまでも参考程度にお使いください。
ただし、改良点がありましたらお教えいただければ幸いです。時間が出来たら直します。本当は画像でdivの入れ子構造を見せたら一発じゃなかったの?という疑問がありますが、まあいいでしょう。(いいのか!)
気力があったらまた作ります。

なおsandboxテーマについて、正確な内容はiDeasilo様でご確認下さい。
これをちゃんと理解しておけばCSSのクラスとidを簡単に指定できます。私の与太CSSは不要です。

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.