賢威8のランキングタグの設置について解説してみる

先日賢威8のランキングで画像の入れ方が分からないという質問を頂きました!
早速メールにて返信したのですが、頂いたメールアドレスが間違えていたのか先方に届かなかったので、ここで回答させていただきます。

なお、詳しい状況がわからなかったので、画像の入れ方の前に賢威8のランキング設置について解説していきます。

htmlの知識がないと難しい

賢威8のランキングタグは、賢威サポートページのランキング/情報比較リストとレビューの星にて確認することができます。(ライダーストアへのログインが必要です)

このページの50行程度のhtmlタグを自分の記事にコピペして、内容を書き換えることでランキングを設置できます。
しかしタグの説明がないので、htmlの知識がないと画像を変更するなど、思った通りの変更ができないのも頷けます。

そこで、上記ページのタグを段階を追って設置してみます。

入力はテキストエディターまたはブロックエディタのカスタムhtmlを使用

賢威8のランキング設置は、htmlを入力します。

そのため、テキストエディターまたはブロックエディタのカスタムhtmlを使用する必要があります。

テキストエディター:
WordPress  クラッシックエディター

ブロックエディタのカスタムhtml:

WordPress  カスタムhtml
WordPress  カスタムhtml 入力

ランキング基本タグ

htmlタグ
<ol class="ranking-list">
  <li class="ranking-list_item">
    <div class="rank_title">ランキング1</div>
    <div class="rank_desc">解説</div>
  </li>
  <li class="ranking-list_item">
    <div class="rank_title">ランキング2</div>
  </li>
</ol>
表示結果
  1. ランキング1
    解説
  2. ランキング2

解説:

賢威8のランキングはranking-listクラスを付与したolタグで設置します。

各ランキング要素となるliタグには、ranking-list_itemクラスを付与します。

さらに文字列をrank_titleクラスを付与したdivやhタグで囲むと、タイトルとしてちょうどいい位置に配置してくれます。

なお、通常hタグは見出しとして装飾されているので、そのまま使用すると元からある装飾が反映されてしまいます。
下記のように、title_no-styleクラスを追加することで、装飾を打ち消すことができます。

htmlタグ
<h3 class="rank_title title_no-style">ランキング2</h3>

rank_descクラスは、解説や説明文を表示します。
解説や説明文が必要なければ、なくてもかまいません。

画像を表示する

次は本題の画像設置です。

htmlタグ
<ol class="ranking-list">
  <li class="ranking-list_item ranking-list_item_hasimage">
    <div class="rank_thumb">
        <img src="./lady-001.jpg" alt="" class="wp-image-154"/>
    </div>
    <div class="rank_title">ランキング1</div>
  </li>
  <li class="ranking-list_item">
    <div class="rank_title">ランキング2</div>
  </li>
</ol>
表示結果
  1. ランキング1
  2. ランキング2

画像の上に順位を表示したい場合、liタグにranking-list_item_hasimageクラスを追加します。
次に、imgタグをrank_thumbクラスを付加したdiv要素で囲みます。

imgタグが入力できない?

この記事を書いていて気が付いたのですが、ブロックエディタのカスタムhtml上では、メディアライブラリから直接imgタグを入力できません。
もしかしたら、質問の意図は、これだったのかもしれません。

方法としては、二つ考えられます。

1:メディアライブラリからURLをコピーする

メディアライブラリを開いて画像のURLをコピーした後、src="・・・"の中身にペーストします。

wordpress メディア url コピー

ただし、メディアライブラリを開くと編集中のページから移動するので、新規タブで開くなどの工夫が必要です。

2:画像ブロックからimgタグをコピーする

画像ブロックを追加して、画像を選択します。

wordpress 画像ブロック 追加

htmlを表示して、imgタグまたはscr内のurlをコピーして、ランキング内に貼り付けます。

wordpress 画像ブロック imgタグコピー

最後に、画像ブロックを削除します。

情報比較エリア

表示する情報を増やして、比較できるランキングを設置します。

htmlタグ
<ol class="ranking-list">
  <li class="ranking-list_item ranking-list_item_hasimage">
    <div class="rank_thumb">
        <img src="./lady-001.jpg" alt="" class="wp-image-154"/>
    </div>
    <div class="item-data_outer">
        <div class="rank_title">商品1</div>
        <div class="item-data">
            <dl>
                <dt>データ1:</dt>
                <dd>データ内容</dd>
            </dl>
            <dl>
                <dt>データ2:</dt>
                <dd>データ内容</dd>
            </dl>
       </div>
       <table class="review-table">
           <tr>
               <th>評価1</th>
               <td><span class="review_star star50">5.0</span></td>
           </tr>
       </table>
    </div>
    <div class="rank_desc">商品に関する情報</div>
    <div class="review_desc">
        <div class="review_desc_title title_no-style">レビュータイトル</div>
        レビュー内容
    </div>

  </li>

</ol>
表示結果
  1. 商品1
    データ1:
    データ内容
    データ2:
    データ内容
    評価15.0
    商品に関する情報
    レビュータイトル

    レビュー内容

情報比較エリアを使用するときは、olタグにcomparative-listクラスを付与します。
comparative-listクラスは、商品に関する情報の直前のフロート処理を無効にしています。

htmlタグ
<ol class="ranking-list comparative-list">