レイアウトが崩れる・・・

質問

いつもお世話になってます。

wordpressでギャラリーを使った記事を書いたのですが、３枚以上写真を追加してしまうとレイアウトが崩れてしまいます。
参照ページ：http://blackartcard.com/?p=45

どうすれば何枚追加しても崩れずに追加できるでしょうか？

single.phpは以下です。
<?php get_header(); ?>

<!-- Contents -->
<div id="contents">
<div id="main">
<div class="breadcrumbs">
<?php if(function_exists('bcn_display')) bcn_display();?>
</div>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h1 class="title"><?php the_title(); ?></h1>
<div class="blog_info">
<ul>
<li class="cal"><?php the_time('Y年m月d日') ?></li>
</ul>
<br class="clear" />
</div>

<div class="kiji"><?php the_content(); ?></div>
</div><!-- /.post -->

<?php endwhile; ?>

<?php else : ?>

<h2 class="title">記事が見つかりませんでした。</h2>
<p>検索で見つかるかもしれません。</p><br />
<?php get_search_form(); ?>

<?php endif; ?>

</div><!-- /#main -->

</div></div>
<?php get_footer(); ?>

宜しくお願い致します。

回答No.1

weakweak · ベストアンサー

こんにちは。
記事ページは、
<div id="main">
　～省略～
<div id="kiji">
　～問題のギャラリー部分～
</div>
　～省略～
</div>
という構造になっていましたが、調べたらなぜかmainに高さが設定されてました。

ご存知かもしれませんがdivタグと言うのはボックス要素と言われるように記事や写真などの色々な要素を入れる箱のような役割を果たします。
質問者さんの場合は高さ980cm(実際はpx)の箱の中に合計1200cmの荷物を入れようとしていたようなものです。そしてその箱(div="main"のこと)の高さを定義しているのはstyle.cssというファイルなので、それを以下のように修正してください。

1. 以下のファイルを編集しますので、テキストエディタで開いてください。
<WordPressが設置されているフォルダ>\wp-content\themes\<今有効にしている、問題のテーマ>\style.css

2. 次の文字列を探してください(キーボードで「Ctrl」を押しながら「F」を押すと検索ウィンドウがどこかに出るはず)
#main

3. 以下のように、#mainの脇に「 { 」というカッコがあって、次の行から色々とmain要素について定義されていると思いますが、そのなかの height : 1100px; を min-height : 1100px; に書き換えてください。/*～*/内は私の解説です。
#main {
～いろんな定義～
height : 1100px; /* これは「高さは何かがはみ出ようと絶対に1100pxです！」という意味 */
}
/* これをこうします */
#main {
～いろんな定義～
min-height : 1100px; /* これは「高さは最低1100pxです！」という意味。無くてもレイアウトは崩れないし、ページの下まで行くと右下に現れるカワイイのを表示させたければ500pxに設定しておけば大丈夫みたいです */
}

お礼

なるほど！！min-heightはそうやって使うんですね・・・・

勉強になります！！！

ありがとうございました！無事修正できました！

回答No.2

weakweak

少し気になったのですが、このテーマはどこかで配布されていたものなんでしょうか？
もしご自身で作られたのであればおしゃれなデザインですね！

お礼

これは自分で作成しました！そう言ってもらえると嬉しいです！