画像の回り込みとテキスト寄せを一気に設定してみた話 #wordpress #scss

画像の回り込みとテキスト寄せを一気に設定してみた話 #wordpress #scss

wordpressで生成されるclassの「textleft, textright, textcenter, alignleft, alignright, aligncenter, alignnone」を使うのが慣れてしまって、通常でclassを設定するときも当たり前のように使用するようになりました。

で、当たり前に使うようになると、毎回コピペして編集するのもだんだん面倒になり、これをいかに楽にできないかって考えてしまうのが人間のサガってヤツです。

そこでまず、画像の回り込みについて設定するmixinを作ってみました。

画像の回り込みのmixin

特にmixinにする必要はなかったのかもしれないのですが、ソースコードを少しでもスッキリさせたいという思いからmixinにしてみました。

デフォルト設定では、$typeにnone、$marginに1を設定してあります。$marginはそのままmarginの値になるんですが、数値の単位はremで設定してあります。remが気に入らない人は、別の単位に書き換えていただければ大丈夫です。

_wp.scssを作って、@importで読み込めるようにする

scssの便利なところは、名前の前に_(アンダーバー)を入れると拡張子なしでもimportできることにあります。そうすれば、モジュール化して一つのファイルにいっぱい書かなくても良くなるので、管理性がアップします。何千行もあるcssファイルのどこを修正するって考えただけでも頭が痛くなりますし(笑)

そこで、今回のはwordpressで生成されるclassを利用しているので、いっそ_wp.scssというファイルを作ってしまえば、今後wordpressで勝手に生成されるclassの設定をするときにも楽じゃないかと。

_wp.scssに生成classの設定をする

ということで、いよいよ本番!
テキスト寄せと画像の回り込みを一気に_wp.scssに書き込みます。

さっきのは、mixinで作ってあるので、最初にmixinの読み込みをちゃんと記述してからーの

@eachを使って変数$floatに設定したものの数だけ、繰り返すようにしました。またtext-align:noneはあってもなくても変わらないんで、@ifの条件分岐を使って、noneじゃなかったらtext-alignの設定が出るようにしてみました。
コンパイル後はこんなカンジになります。

今回はmarginの設定は1remでやりましたけど他の数値でもいけるので、自分的に案外便利なんじゃないかなーと思っていたりもします。


コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)

Back to Top