質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

2回答

515閲覧

wordpressの投稿一覧表示で、新規投稿するとレイアウトが崩れてしまう

engawalove

総合スコア17

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2018/12/14 08:34

MAMP環境下でwordpressを使っています。
表題のとおり、投稿一覧で、記事を新規追加するとレイアウトが崩れ、sidebarがずれてしまいます。

初期の投稿のみ
▲sidebarがconainterに収まっている

ここに新規で投稿をすると…↓

新規投稿を追加
▲prev、nextのボタンとサイドバーが落ちてしまう

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

初心者のため、とんでもない間違いをしているかもしれません。
ご教示いただきたく、よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

<div class="post">の下に書いているループの中に<div class="post">の閉じタグを書いているため、 記事が2個目以降になると閉じタグだけが増えていく状態になっているのではないでしょうか?

1つ1つの記事を<div class="post">で包みたいなら、<div class="post">もループの中に書くといいと思います。

投稿2018/12/14 09:06

beginner_t

総合スコア716

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

engawalove

2018/12/14 09:10

おっしゃるように<div class="post">もループ内に記載したら直りました! 大変助かりました。 ありがとうございました!
beginner_t

2018/12/14 09:15

お役に立てて良かったです。今回のようなレイアウト崩れの場合は閉じタグが変な場所に増えていないかや閉じタグが変な場所に入っていないかをブラウザの開発者ツールで確認するとわかりやすいと思います。
guest

0

今検証環境などが無いのでスクショを見た思い付きだけですが。。。
生成されたHTMLはご覧になっていますか?
コンテナ構造が崩れているようにも見えるので、
選択されているテーマファイルの情報なども載せた方がいいような気もします。
(Google Chromeなどで開発ツールを使って構造を検証するのも良いかと。)

投稿2018/12/14 08:59

nora_kuragen

総合スコア101

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問