アフィリエイトスキルラーニング

Affiliate Skill Learning 自由になるために、アフィリエイトのスキルを学ぶ。

  • rss
  • google+
  • youtube
  • facebook
  • はてブ
  • Twitter
2015.5.15

WPで○○の倍数番目のリストに対してCSSを変更させる簡単なjquery

world-wide-web-341418_640
こんにちはHiroです!

WEB製作をしていて、ループの項目をCSSでfloatさせて横並びにさせたいことって良くあるんじゃないかと思います。
でも、リストの間にmarginを空けないとデザイン的に美しくないので、

リストにmargin-right:10px;等のスタイルをあてると思います。

でも、そうすると、
たとえば、4個目が一番右側に来るときは、

本当は、margin-right:10pxは付けたくないんですが、
WPのループ処理で自動でどんどん出来てくる場合は、
HTMLでstyleを手動でつけられません。

でも、簡単なjqueryの記述を書くだけで、

たとえば、4個並んで、段を変えて下の段にしたい場合、
4個目、8個目、12個目・・・と4の倍数のリストに対して、
CSSのmarginを0にする事ができるので、めっちゃ便利です!

記述方法も慣れれば超簡単!!

初めに、jqueryが読み込まれていることが前提ですが、

[html]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>[/html]

4個目と4の倍数をmargin-right:10pxを0にするためscriptは、
こんな風に記述すればOKです!

[html]<script type="text/javascript">
$(function(){
$(‘#top_fbox ul li:nth-child(4n)’).each(function(){
$(this).css({margin: ‘0’});
})
});
</script>
[/html]

意味は、これの場合、

[css]#top_fbox ul li[/css]に対して、

nth-child(4n) は、4の倍数の時に、

$(this).css({margin: ‘0’}); ←marginを0にしなさいよっていう意味です!

2015.5.15 11:05  カテゴリー: WEB製作

  • 運営者:HIRO_007

    ASL アフィリエイトスキル ラーニング

    楽天市場や独自ドメインショップでの受賞経験を生かし、ネットショップ構築やコンサルティングを行っています。また、Wordpressを使用したオリジナルテーマでのホームページ製作等を生業としています。 そんな中で、出会ったアフィリエイターの驚くべきノウハウや実績に驚嘆し、圧倒的で再現性の高い成功ノウハウを持つメンターに支持し、学ぶ。そこで得た成功法則や、自分の経験してきたネットショップやWEB製作やデザイン等をお伝えしてゆくことで、人生を変えたいと望んでいる方への手助けになればと考えています。 貴方のアフィリエイトやWEB技術、ネットショップ販売のスキルアップに繋げていただけたら幸いです。