Wordpressトップページを固定ページとし、その中でブログ記事を最新3件表示しています。
タイトル
日付
サムネイル
本文
と縦に並んでしまいます。これを添付画像のイメージにしたい(カテゴリーは無視してください)のですが、どこをどう直していいのか分からず途方にくれています。
色々試してみて近そうだったのが
<div class="per_content"> に対して、display: flex;をすれば効果はあるものの、 日付・タイトルに対して画像が回り込む形となり、意図と微妙に違っています。解決法を教えていただけますと幸いです。よろしくお願いいたします。
html
1<!-- 新着記事 --> 2<div id="blog"> 3<h2>新着記事</h2> 4<?php 5$posts = get_posts( array( 6)); 7if( $posts ): 8?> 9<dl class="blog_content"> 10<?php 11foreach( $posts as $post ): 12setup_postdata( $post ); 13?> 14 15<div class="per_content"> 16<dt> <?php the_time('Y年n月j日'); ?></dt> 17<dd><a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?></h4></a></dd> 18 19<!-- サムネ表示 --> 20<?php if(has_post_thumbnail()) : ?> 21<?php the_post_thumbnail(array(200, 200)); ?> 22<?php else: ?> 23<img src="<?php echo get_template_directory_uri(); ?>/img/noimage.png" width="200" height="200"> 24<?php endif; ?> 25<!-- サムネ表示 end --> 26 27<?php the_content(); ?> 28 29</div> 30 31<?php 32endforeach; 33wp_reset_postdata(); 34?> 35 36</dl> 37<?php else: ?> 38<p>投稿はありません</p> 39<?php endif; ?> 40 41</div> 42<!-- 新着記事 end -->
css
1/* blog */ 2 3#blog { 4margin: auto; 5} 6 7.blog_content { 8width:1100px; 9margin: auto; 10}![イメージ説明](f4a6c0ff7ca00fbe2ea72431632dbacf.jpeg) 11
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/09 12:18