クソみたいなことを質問させてください。
web 初心者で、現在 wordpress を特訓中です。
記述が少なく管理が楽な「flex」タグでボックスを作るようにしています。
そこで、記事本文の下の関連記事メニューを横幅600px以上では横並び**「一列4つ」、599px以下では「二列2つずつ」**の並びに変えたいのですがどういう記述をすればいいかわかりません。
どなたかご教示お願いいたします。
※関連する Style.css と single.php を下記に記します。必要であれば書けるだけ補足書きます。
css
1/* 関連記事メニュー */ 2.mymenu-related h2 { 3 text-align: center; 4 padding: 15px 0 15px; 5 margin: 0 0 15px; 6 border-left: none; 7 background: #fff; 8 border-top: solid 1px #b4b4b4; 9 border-bottom: solid 1px #b4b4b4; 10 color: #888; 11 font-size: 11px; 12 font-weight: 400 13} 14.mymenu-related ul { 15 display: flex; 16 flex-flow: row; 17 justify-content: space-between; 18 list-style: none; 19 margin: 0; 20 padding: 15px; 21 background: #eee 22} 23.mymenu-related li a { 24 position: relative; 25 display: flex; 26 flex-flow: column; 27 border: none; 28 color: #fff; 29 opacity: 1; 30 margin: 0; 31 padding: 0; 32} 33.mymenu-related li { 34 width: 25%; /*←ここで4分割している */ 35 margin-right: 15px; 36 -moz-box-sizing: border-box; 37 -webkit-box-sizing: border-box; 38 box-sizing: border-box; 39} 40.mymenu-related li:last-child { 41 margin: 0 42} 43.mymenu-related li .photo { 44 width: 100%; 45 height: 150px; 46 background-size: cover; 47 background-position: 50% 50% 48} 49.mymenu-related li .text { 50 position: absolute; 51 bottom: 0; 52 left: 0; 53 width: 100%; 54 height: auto; 55 padding: 5px 10px; 56 background: rgba(0,0,0,0.3); 57 font-size: 12px; 58 text-align: center; 59 box-sizing: border-box; 60} 61 62@media (max-width: 599px) { 63 64/*ここの書き方が不明 */ 65 66}
php
1<?php 2$myposts = get_posts( array( 3 'post_type' => 'post', 4 'posts_per_page' => '4', 5) ); 6if( $myposts ): ?> 7<aside class="mymenu-related"> 8<h2>関連記事</h2> 9<ul> 10 11 <?php foreach($myposts as $post): 12 setup_postdata($post); ?> 13 <li><a href="<?php the_permalink(); ?>"> 14 15 <div class= "photo" style= "background-image:url(<?php echo mythumb( 'thumbnail' ); ?>)"> 16 </div> 17 18 <div class="sentence"> 19 <?php the_title(); ?> 20 </div> 21 22 </a></li> 23 <?php endforeach; ?> 24 25</ul> 26</aside> 27<?php wp_reset_postdata(); 28endif; ?>
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/22 07:03
2017/02/22 10:24
2017/02/22 15:05