ランキング3位以下の作り方



  • 1.ランキング3位以下の作り方について
    ランキングで3位以下の作り方につきまして、過去の質問を読んで作ってみても再現できません。

    4位はタイトルの下線がなく、5位は表示できません。
    ランキングのコードを追加して、数字を直すとのことでしたがうまくいきませんでした。

    お手数おかけします。0_1654999714183_スクリーンショット 2022-06-12 104542.jpg

    <div class="ranking04">
    <div class="ranking-title04">[jin-rank4]ランキング4位</div>
    <div class="ranking-img04">ここに広告タグ(300 x 250)をコピペ</div>
    <div class="ranking-info04">ここに説明文を入力してください。ここに説明文を入力してください。</div>
    <div class="clearfix"></div>
    </div>
    <table class="cps-table03">
    <tbody>
    <tr>
    <th>項目名</th>
    <td class="rankinginfo">[jinstar4.0]</td>
    </tr>
    <tr>
    <th>項目名</th>
    <td class="rankinginfo">ここに説明文を入力してください。</td>
    </tr>
    <tr>
    <th>項目名</th>
    <td class="rankinginfo">ここに説明文を入力してください。</td>
    </tr>
    <tr>
    <th>項目名</th>
    <td class="rankinginfo">ここに説明文を入力してください。</td>
    </tr>
    </tbody>
    </table>
    <span class="twobutton"><span class="color-button01"><a href="#">詳細ページ</a></span><span class="color-button02"><a href="#">公式ページ</a></span></span>
    ```![0_1654999736365_スクリーンショット 2022-06-12 104542.jpg](/assets/uploads/files/1654999737182-スクリーンショット-2022-06-12-104542-resized.jpg)
    
    ---
    
    マニュアル確認済み
    キャッシュクリア済み
    WordPressのバージョン : 6.0
    ご利用のサーバー名 : Xサーバ
    PHPのバージョン : 
    OS : Windows10
    ご利用のブラウザ : googleクローム
    該当サイトのURL :


  • @ボッチ さん

    こんにちは!

    おそらく Classic Editor で4位以下を再現するとなると、
    以下のようなコードになるんじゃないでしょうか。

    <div class="ranking01">
    <div class="ranking-title04">[jin-rank4]ランキング4位</div>
    <div class="ranking-img04">ここに広告タグ(300 x 250)をコピペ</div>
    <div class="ranking-info04">ここに説明文を入力してください。ここに説明文を入力してください。</div>
    <div class="clearfix"></div>
    </div>
    <table class="cps-table03">
    <tbody>
    <tr>
    <th>項目名</th>
    <td class="rankinginfo">[jinstar4.0]</td>
    </tr>
    <tr>
    <th>項目名</th>
    <td class="rankinginfo">ここに説明文を入力してください。</td>
    </tr>
    <tr>
    <th>項目名</th>
    <td class="rankinginfo">ここに説明文を入力してください。</td>
    </tr>
    <tr>
    <th>項目名</th>
    <td class="rankinginfo">ここに説明文を入力してください。</td>
    </tr>
    </tbody>
    </table>
    <span class="twobutton"><span class="color-button01"><a href="#">詳細ページ</a></span><span class="color-button02"><a href="#">公式ページ</a></span></span>
    
    <div class="ranking01">
    <div class="ranking-title04">[jin-rank4]ランキング5位</div>
    <div class="ranking-img04">ここに広告タグ(300 x 250)をコピペ</div>
    <div class="ranking-info04">ここに説明文を入力してください。ここに説明文を入力してください。</div>
    <div class="clearfix"></div>
    </div>
    <table class="cps-table03">
    <tbody>
    <tr>
    <th>項目名</th>
    <td class="rankinginfo">[jinstar4.0]</td>
    </tr>
    <tr>
    <th>項目名</th>
    <td class="rankinginfo">ここに説明文を入力してください。</td>
    </tr>
    <tr>
    <th>項目名</th>
    <td class="rankinginfo">ここに説明文を入力してください。</td>
    </tr>
    <tr>
    <th>項目名</th>
    <td class="rankinginfo">ここに説明文を入力してください。</td>
    </tr>
    </tbody>
    </table>
    <span class="twobutton"><span class="color-button01"><a href="#">詳細ページ</a></span><span class="color-button02"><a href="#">公式ページ</a></span></span>
    

    標準で用意されている CSS では以下のような表示になるはずです。

    0_1655026126302_スクリーンショット 2022-06-12 18.28.23.jpg

    色やレイアウトを変更したい場合は、
    ボッチ さんご自身でカスタマイズをお願いいたします!

    参考になりましたら幸いです。
    ご確認よろしくお願いいたします!