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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

ゆきなさんからリクエスト頂いたバズ部のbaseのトップページの記事一覧を
サムネイル付きカード型リストにするカスタマイズについて書いていきたいと思います。

バズ部のbaseの場合まっさらの場合メイン部分が

<div class="main-inner">

で囲われていてさらに記事を

<div class="post-loop-wrap">

で囲われているのはわかりますね。
その中に

<article id...

がループしているのです。

つまりループしている

<article>
中略
</article>

の中のHTML構造を変更する必要があります。
ワードプレスはそれをphpでやっているわけですね。

ちなみにサンプルの

の中のHTMLは以下のコードになっています。
http://hero-style.com/tes/

<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の変更の部分に着手していきたいと思います。

もしお役に立てたり、クスッとして頂いたりご共感頂けた際にはポチっとして頂けますと記事への情熱になったりしなかったり。。。

  • にほんブログ村 子育てブログへ
  • にほんブログ村 IT技術ブログ WordPressへ
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメント

  1. ゆきな より:

    >きりんちゃんママさん
    リクエストに応えていただいて
    ありがとうございました(*^^*)
    感激!!
    時間ができたら、早速自分のブログでやってみたいと思います!

    1. きりんちゃん より:

      まだ全然途中でごめんなさいね、少しお時間をくださいませ(#^^#)

コメントを残す

*