いつもお世話になってます。
wordpressでギャラリーを使った記事を書いたのですが、3枚以上写真を追加してしまうとレイアウトが崩れてしまいます。
参照ページ: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ベストアンサー
- 回答日時:
こんにちは。
記事ページは、
<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はそうやって使うんですね・・・・
勉強になります!!!
ありがとうございました!無事修正できました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
html の divとtable の役割
-
HTML属性での「""」 「''」違い
-
3カラムレイアウトで「常に残り...
-
min-heightとheightの違いについて
-
IE・NNの独自タグについて
-
ヘッダーとフッターだけ背景を...
-
複数のボタンを等間隔に、かつ...
-
h1に自分自身へのリンクを張...
-
ヘッダーに指定している画像が...
-
HPが消えてしまった原因を知り...
-
【CSS】positionの親子関係につ...
-
2段組レイアウト時に意図しな...
-
html5でheaderの中にnav
-
スペースを使わず文字位置を揃...
-
要素間、要素内に隙間が空く
-
<div id="container">の使いか...
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
liタグの中に<p>タグやら<dl>を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
複数のボタンを等間隔に、かつ...
-
<div id="container">の使いか...
-
div要素が重なってします
-
min-heightとheightの違いについて
-
1時間30分を簡単に表したいで...
-
ヘッダーとフッターだけ背景を...
-
ヘッダーを左右に二分割する方...
-
<!-- #BeginLibraryItemとは
-
h1に自分自身へのリンクを張...
-
html5でheaderの中にnav
-
画面を縮小するとカラムが落ち...
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<div>テキスト</div>
-
h1のテキストサイズよりh2の方...
-
1サイト内にHTML5とXHTMLが混在...
-
オシャレな区切り線はありませ...
おすすめ情報