// [1] wpQueryでループ
      <?php
        $args = array(
          'post_type' => 'side_ranking',
          'order' => 'ASC',
          'posts_per_page' => 5,
        );
        $top_news = new WP_Query( $args );
        if($top_news->have_posts()): while($top_news->have_posts()): $top_news->the_post();
      ?>

// [2] ACF 投稿オブジェクトの宣言
      <?php
        // 投稿オブジェクトの取得の宣言
        $post_objects = get_field('sidebar_ranking'); if( $post_objects ):
      ?>

// [3] あとは普通にループを書く
      <li>
        <a href="<?php echo get_permalink($post_objects->ID);?>">
          <div class="left">
            <div class="img"
              style="background-image: url(
                <?php if ( has_post_thumbnail($post_objects->ID)): //アイキャッチ画像があれば ?>
                <?php //アイキャッチ画像の取得
                  $thumbnail_id = get_post_thumbnail_id($post_objects->ID);
                  $image = wp_get_attachment_image_src($thumbnail_id,'st_thumb_1x');
                  $src = $image[0];    // URL
                  echo ''.$src.'';
                ?>
                <?php else: ?>
                  /wp/wp-content/themes/テーマ名/assets/img/common/noimg.svg
                <?php endif; ?>
              );"></div>
          </div>
          <div class="right">
            <span class="ranking-text"></span>
            <h3 class="ranking-ttl">
              <?php echo get_the_title($post_objects->ID); ?>
            </h3>
          </div>
        </a>
      </li>
      <?php endif; ?>
      <?php endwhile; endif; wp_reset_postdata(); ?>


// cssで2行 + ……を表示
<style>
.ranking-ttl {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>