Web Materia BLOG

ウェブマテリアブログ

May

30

2014

0

COMMENTS

CSS3でWordPressの難しい記述を省略!奇数、偶数の振り分けなど

Category:Wordpress

CSS3でWordPressの難しい記述を省略!奇数、偶数の振り分けなど

1、Wordpressに慣れていない人はCSS3を使った方が圧倒的に楽!

例えば記事を三列毎に並べる場合は通常ですと1,4,7の記事をPHPで抽出して振り分けて命令を与えます。   ただこういった場合の記述はCSSは使えるけどPHPやWordpressに慣れしたしんでない人には難しく感じると思います。そういう場合は是非CSS3を使って楽をして下さい。CSS3には余り知られていないですが便利なコードが沢山あります。今日はその一部をご紹介させて頂きます。  

2、nth-child() 疑似クラスが大変便利

CSS3にnth-childという記述があります。この疑似クラスを使うとブログ記事一覧などで同一の複数のクラスにCSSの記述をする場合、偶数のクラスにこのCSSを適用といった事ができるので大変便利です。例えばblogというクラスで囲んだ記事が同じページで6個並んでいる場合
.blog:nth-child(2n) {background:#000;}
とした場合2の倍数、つまり偶数の2,4,6の記事のblogというクラスに対してのみこのCSSを与えるという記述になります。 また、応用編として三列表示の記事で一番左の記事のみ特定のCSSを聞かせたい場合は  
.blog:nth-child(3n+1) {background:#000;}
とした場合は1、4、7番目の記事にCSSを効かせられます。  

3、CSS3を使う際の注意点

このように大変便利なCSS3ですがまだIE8以下のブラウザでは非対応なので、このままではIE8以下のブラウザユーザーにはレイアウトが崩れたサイトを見られる事になってしまいます。 ですのでブラウザにCSS3を最適化するjavascriptのselectivizrを使いましょう。   このjavascriptを使う事により閲覧ブラウザがCSS3非対応でも正常のように見せる事ができます。   やりかたは簡単。まずは下記からselectivizrのJSをダウンロード selectivizrのダウンロードはコチラ ↓ 次にダウンロードしたselectivizrのjsをFTPにアップロード ↓ htmlのheadに
<!--[if lt IE 8]><script src="jsまでのパス/selectivizr.js"></script><![endif]-->
  と記述すればOKです!   これらの事は勿論Wordpressでも同じ表現方法が可能です。 ですがWordpress同様CSSも進化しています。 どちらの長所も活かして少しでも制作を楽に進めていきましょう!  

Comments

comments



Archive

Category


PageTOPへ