バズ部のbase トップページ 記事一覧を サムネイル付きカード型リストにするカスタマイズ

<article id="post-5" class="post-5 post type-post status-publish format-standard has-post-thumbnail hentry category-2 tag-3 firstpost" itemscope="itemscope" itemtype="http://schema.org/BlogPosting">
      <header class="post-header">
        <ul class="post-meta list-inline">
          <li class="date updated" itemprop="datePublished" datetime="2018-01-09T17:46:46+00:00"><i class="fa fa-clock-o"></i> 2018.01.09</li>
        </ul>
        <h2 class="post-title" itemprop="headline"><a href="http://hero-style.com/tes/2018/01/09/001/">テストです</a></h2>
      </header>
      <section class="post-content" itemprop="text">
                      <div class="post-thumbnail">
          <a href="http://hero-style.com/tes/2018/01/09/001/" rel="nofollow"><img src="http://hero-style.com/tes/wp-content/uploads/2018/01/01-263x214.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="01" srcset="http://hero-style.com/tes/wp-content/uploads/2018/01/01-263x214.jpg 263w, http://hero-style.com/tes/wp-content/uploads/2018/01/01.jpg 300w, http://hero-style.com/tes/wp-content/uploads/2018/01/01-282x229.jpg 282w" sizes="(max-width: 263px) 100vw, 263px" width="263" height="214"></a>
        </div>              
        <p>ああああああああああああああ<br>
うううううううう<br>
ええええええええええええええええええええええええええ<br>
おおおおおおおおおおおおおおおおおおおおお<br>
か</p>
      </section>
    </article>

実際のサイトの

<article>
の中身は以下のコードです。


<article class="post-list cf" role="article">
<a href="http://hero-style.com/seijin/">

<figure class="eyecatch">

<img src="http://hero-style.com/wp-content/uploads/2018/01/siijin-143x214.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://hero-style.com/wp-content/uploads/2018/01/siijin-143x214.jpg 143w, http://hero-style.com/wp-content/uploads/2018/01/siijin-200x300.jpg 200w, http://hero-style.com/wp-content/uploads/2018/01/siijin-173x260.jpg 173w, http://hero-style.com/wp-content/uploads/2018/01/siijin-67x100.jpg 67w, http://hero-style.com/wp-content/uploads/2018/01/siijin.jpg 450w" sizes="(max-width: 143px) 100vw, 143px" width="143" height="214">
</figure>

<section class="entry-content cf">
<p class="byline entry-meta vcard">
<span class="date updated">2018.01.08</span>
<span class="cat-name">子育て</span>
</p>
<h2 class="h2 entry-title">はれのひ　どんでもない振袖業者　ありえない！</h2>
<p class="description">
 今日は娘の成人式でした。
会場にはたくさんの娘の同級生たちが既に式場に集まっていました。
みなあまりに綺麗になっていて誰かわかりません。
娘も色々ありますが、無事成人式を迎えられました。
...</p>
      </section></a>
    </article>

HTMLの作り方も、CSS次第で別に上記の形でなくても良いと思います。
ただ左のパーツと右側のパーツで分けておくのは普通かもしれません。

今回はちょうどCSSを見直したいと思っていましたので、テストサイトの方で同じデザインを再現していきたいと思います。

時間の関係でまずはここまでですみません。
次回はHTMLの変更の部分に着手していきたいと思います。