• 解決済 crazeone

    (@crazeone)


    はじめまして。
    オリジナルテーマを制作しているのですが、トップページのループ内で、ボックスが三つ並ぶ様にしたいと考えています。
    その並んでいるボックスに、それぞれ違うcssのclassを指定したいのですが、うまくいきません。

    classを一個目にalpha、二個目はclassなし、三個目はomegaを指定する場合はどのようにすれば良いのでしょうか。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • classを設定しないといけないんですよね?
    jQuery などで1番目のスタイル、2番目のスタイル、3番目のスタイルの繰り返しでなく。

    となると、カウントしてあげればよくないですか?
    最初に1とか0に設定しておいて

    <?php
    $cnt = 0;
    // 処理ループ開始
    $chk = $cnt % 3;
    switch ($chk) {
        case 0:
            $ret = "<div slass=\"alpha\">";
            break;
        case 1:
            $ret = "<div">";
            break;
        case 2:
            $ret = "<div slass=\"omega\">";
            break;
    }
    echo $ret;
    ?>
    ここになんか書くとか
    <?php
    echo "</div>";
    $cnt++;
    // 処理ループ終了
    ?>

    無駄が多いですが、まぁ、例として。

    こちらも例として:

    <?php $box_counter = 0; $box_name=array( 'alpha', '' , 'omega' ); ?>
    <div class="<?php echo $box_name[$box_counter++]; ?>" ></div>
    <div class="<?php echo $box_name[$box_counter++]; ?>" ></div>
    <div class="<?php echo $box_name[$box_counter++]; ?>" ></div>

    ミスタイプがあったり、V.J.Catkickさんの意見のご提案のほうがすっきりしたりで・・・
    合体させて、ループの部分も参考に入れておきました。

    <?php
    $box_name=array( 'alpha', '' , 'omega' );
    $cnt = 0;
    ?>
    
    <?php // 処理ループ開始 ?>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    
    <?php $chk = $cnt % 3; ?>
    <div class="<?php echo $box_name[$chk]; ?>">
    
    ここに本文とか書く(the_contentとか)
    
    </div>
    <?php $cnt++; ?>
    <?php endwhile; ?>
    <?php endif; ?>
    <?php // 処理ループ終了 ?>
    トピック投稿者 crazeone

    (@crazeone)

    kvexさん、V.J.Catkickさん、お二人とも本当にありがとうございました。
    お二人のおかげで、無事解決できました。
    サンプルコードまで書いていただき、とても解り易かったです。

    kvexさんは投稿後、即座に解答頂き本当にありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「三つ並ぶボックスにそれぞれclassを指定する方法」には新たに返信することはできません。