![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
いつもお世話になってます。
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で質問しましょう!
似たような質問が見つかりました
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- Ruby No route matches [GET] "/posts/5/destroy" 1 2022/03/24 13:00
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- PHP 掲示板を作成しておりアップロードファイルとメッセージを並べたいので、アドバイスお願い致します 2 2023/07/17 21:01
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
複数のボタンを等間隔に、かつ...
-
div要素が重なってします
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
ヘッダーを左右に二分割する方...
-
h1のテキストサイズよりh2の方...
-
iframeを使わずに上下50%ずつに...
-
フッター固定で余白ができます
-
CSSで画像を下に配置
-
<div id="container">の使いか...
-
hタグの右横に画像を表示
-
<div>テキスト</div>
-
携帯サイト、ナノでのタグ編集...
-
HTML5を学習する上での最適な環...
-
レイアウトが崩れる・・・
-
ヘッダーとフッターだけ背景を...
-
XHTMLでループ処理のやり方
-
1サイト内にHTML5とXHTMLが混在...
-
float:leftを使用して全体を中...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
min-heightとheightの違いについて
-
ヘッダーとフッターだけ背景を...
-
1時間30分を簡単に表したいで...
-
要素間、要素内に隙間が空く
-
画面を縮小するとカラムが落ち...
-
h1のテキストサイズよりh2の方...
-
divの中に外部のHTMLを埋め込む
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
hタグの右横に画像を表示
-
グリッドレイアウトで"auto-fit...
-
セクションをdivで囲むと見出し...
-
開閉式の隠し要素が一瞬表示さ...
-
html5でheaderの中にnav
おすすめ情報