MAMP環境下でwordpressを使っています。
表題のとおり、投稿一覧で、記事を新規追加するとレイアウトが崩れ、sidebarがずれてしまいます。
ここに新規で投稿をすると…↓
index.php↓
<?php get_header(); ?> <div id="main" class="container"> <div id="posts"> <div class="post"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="post-header"> <h2> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h2> <div class="post-meta"> <?php echo get_the_date(); ?> 【<?php the_category(','); ?>】 </div> </div> <div class="post-content"> <div class="post-image"> <?php if (has_post_thumbnail()) : ?> <?php the_post_thumbnail(array(100,100)); ?> <?php else: ?> <img src="<?php echo get_template_directory_uri(); ?>/img/no-image.png" width="100" height="100"> <?php endif; ?> </div> <div class="post-body"> <?php the_excerpt(); ?> </div> </div> </div> <!-- /post --> <?php endwhile; else: ?> <p>記事はありません</p> <?php endif; ?> <div class="navigation"> <div class="prev">prev</div> <div class="next">next</div> </div><!-- /navigation --> </div> <!-- /posts --> <?php get_sidebar(); ?> </div> <!-- /main --> <?php get_footer(); ?> </body> </html>
sidebar.php↓
<div id="sidebar"> <div class="widget"> <h3>カテゴリー</h3> <?php dynamic_sidebar(); ?> </div> </div> <!-- /sidebar -->
style.css↓
body{ font-size: 14px; font-family: sans-serif; } a{ text-decoration: none; } p{ padding-bottom:14px; margin: 0; line-height: 1.8; } .container{ width: 600px; margin: 0 auto; overflow: hidden; } /* header */ #header{ } h1{ font-weight: bold; font-size: 18px; padding: 15px 0; } .menu{ background:#f39800; margin-bottom: 30px; font-size: 12px; list-style: none; overflow: hidden; padding: 0; } .menu > li{ float: left; width: 150px; text-align: center; } .menu a{ padding: 10px 0; color: #fff; display: block; } .menu a:hover{ background:#ffc35c; } /* posts */ #posts{ float: left; width:435px; } .post{ margin-bottom: 30px; } .post-header{ margin-bottom: 15px; } .post-header h2{ font-size: 16px; font-weight: bold; } .post-meta{ font-size: 12px; padding: 7px 0; color: #555; } .post-content{ overflow: hidden; } .post-image{ float: left; width: 115px; } .post-body{ margin-left: 115px; } /* navigation */ .navigation{ overflow: hidden; padding: 10px 0; font-size: 12px; margin-bottom: 15px; } .prev{ float: left; width: 200px; } .next{ float: right; width: 200px; text-align: right; } /* sidebar */ #sidebar{ float: right; width: 150px; } .widget{ padding-bottom: 25px; } .widget h3{ font-weight: bold; padding-bottom: 7px; } .widget li{ line-height: 1.8; } /* footer */ #footer{ padding: 15px 0; font-size: 12px; color: #aaa; border-top: 1px solid #ccc; }
[参考サイト]
こちらの動画を元に打ち込んでいます。
https://dotinstall.com/lessons/basic_wordpress
初心者のため、とんでもない間違いをしているかもしれません。
ご教示いただきたく、よろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/14 09:10
2018/12/14 09:15