質問編集履歴

1 変更

退会済みユーザー

退会済みユーザー

2018/10/17 15:15  投稿

flexboxを使ったら横並びになってほしくない要素まで横並びになってしまう。
Wordpressでflexboxを使うと横並びになってほしくない要素も横並びになってしまいます。
縦になってほしいのですが、なりませんでした。
解決方法はありますでしょうか?
「HTML」
---
```ここに言語を入力
<!-- topBox -->
<section id="topBox">
<!-- slidePostBox -->
<div class="slidePostBox">
<?php echo do_shortcode('[advps-slideshow optset="1"]'); ?>
</div>
<!-- slidePostBox -->
   
<!-- ad1Box -->
<div class="ad1Box">
</div>
<!-- ad1Box -->
   
</section>
<!-- topBox -->
<!-- postBox -->
<section id="postBox">
   
<!-- newPostBox -->
<div class="newPostBopx">
<div class="newPostBox">
<!-- 新着記事表示 -->
<?php
$args = array(
'posts_per_page' => 14 // 表示件数の指定
);
$posts = get_posts( $args );
foreach ( $posts as $post ): // ループの開始
setup_postdata( $post ); // 記事データの取得
?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?><?php the_title(); ?></a>
<?php
endforeach; // ループの終了
wp_reset_postdata(); // 直前のクエリを復元する
?>
<!-- 新着記事表示 -->
</div>
<!-- newPostBox -->
   
<!-- rankPostBox -->
<div class="rankPostBox">
   <p>aaaaaaaaaa</p>
</div>
<!-- rankPostBox -->
   
</section>
<!-- postBox -->
```
「CSSS」
---
```ここに言語を入力
* {
   margin:0 auto !important;
   padding:0 !important;
}
body {
   color:#333;
}
img {
   vertical-align:bottom !important;
}
header {
   width:940px;
   margin: 0 auto !important;
}
.menuBox {
   width:940px;
   display: -webkit-flex;
   display: flex;
   font-size:18px;
   font-weight:bold;
   margin-bottom:20px !important;
}
.menuBox a {
   display:block;
   width:188px;
   text-align:center;
   padding-bottom:5px !important;
   border-bottom: 4px solid #002395;
}
.menuBox a:hover {
 color: #ed2939;
   transition: 0.5s;
   opacity: 0.4;
   filter: alpha(opacity=40);
   -ms-filter: "alpha(opacity=40)";
   zoom:1;/*IE*/
}
.menuBox a:active {
 color: #ed2939;
}
#topBox {
   display: -webkit-flex;
   display: flex;
   width:940px;
   margin-bottom:30px !important;
}
.slidePostBox {
   width:600px;
   height:250px;
}
.ad1Box {
   width:300px;
   height:250px;
   background:red;
   margin-left:40px !important;
}
#postBox {
   display: -webkit-flex;
  display: flex;
   width:940px;
}
.newPostBopx {
   width:600px;
   border-bottom: 4px solid #002395;
}
.rankPostBox {
   width:300px;
   margin-left:40px !important;
}
```
「試した事」
---
```ここに言語を入力
.newPostBopx {
   width:600px;
   border-bottom: 4px solid #002395;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
}
```
このようにして縦にしようと試みたのですが、改善しませんでした。
![イメージ説明](c019223ff7cb2f95d1c2bd05c5ce9b24.jpeg)
  • PHP

    37460 questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • CSS

    16753 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CSS3

    5209 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • HTML5

    9953 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • WordPress

    15153 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る