サムネイル付きカード型リストにするカスタマイズTweetPocketゆきなさんからリクエスト頂いたバズ部のbaseのトップページの記事一覧をサムネイル付きカード型リストにするカスタマイズについて書いていきたいと思います。class="post-loop-wrap">で囲われているのはわかりますね。id...がループしているのです。ループしている<article>中略</article>の中のHTML構造を変更する必要があります。ワードプレスはそれをphpでやっているわけですね。ちなみにサンプルのの中のHTMLは以下のコードになっています。</article>実際のサイトの<article>の中身は以下のコードです。今日は娘の成人式でした。会場にはたくさんの娘の同級生たちが既に式場に集まっていました。みなあまりに綺麗になっていて誰かわかりません。娘も色々ありますが、無事成人式を迎えられました。</article>HTMLの作り方も、CSS次第で別に上記の形でなくても良いと思います。左のパーツと右側のパーツで分けておくのは普通かもしれません。今回はちょうどCSSを見直したいと思っていましたので、テストサイトの方で同じデザインを再現していきたいと思います。時間の関係でまずはここまでですみません。次回はHTMLの変更の部分に着手していきたいと思います。お役に立てたり、クスッとして頂いたりご共感頂けた際にはポチっとして頂けますと記事への情熱になったりしなかったり。*メールアドレス(公開はされません。*上に表示された文字を入力してください。