質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

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

PHP

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

CSS

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

Q&A

解決済

4回答

5129閲覧

ループの途中で改行する方法

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

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

PHP

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

CSS

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

0グッド

0クリップ

投稿2016/10/24 04:26

編集2016/10/24 06:50

###■やりたいこと
4つの要素が横一列に並ぶ状態を、2列×2行とか、4列×2列にしたいです。
このような並び方↓です。
イメージ説明
このようにするためのCSSは、下記にあるいまの状態の【style.css】をどのように変えればよさそうでしょうか?

具体的なコードでなく、ヒントでもうれしいです。
よろしくお願いいたします。

###■いまの状況
このように関連記事が4つ、横一列で並んでいます。
https://jsfiddle.net/un11o6s5/1/

コードは下記のように書いています。

【single.php】

php

1<!-- 関連記事 --> 2<div class="test1rand-wrap"> 3<?php 4 global $post; 5 $term = array_shift(get_the_terms($post->ID, 'test1-category')); 6 $args = array( 7 'numberposts' => 4, //4件表示 8 'post_type' => 'test1', //カスタム投稿タイプ名 9 'taxonomy' => 'test1-category', //タクソノミー名 10 'term' => $term->slug, //ターム名 11 'orderby' => 'rand', //ランダム表示 12 'post__not_in' => array($post->ID) //表示中の記事を除外 13 ); 14?> 15 16<ul class="test1rand"> 17<?php $myPosts = get_posts($args); if($myPosts) : ?> 18<?php foreach($myPosts as $post) : setup_postdata($post); ?> 19 20<li class="rand"> 21<a href="<?php the_permalink(); ?>"> 22<p class="radsumb"><?php the_post_thumbnail(); ?></p> 23<?php the_title(); ?></a> 24</li> 25<?php endforeach; ?> 26<?php else : ?> 27</ul> 28 29<p>関連アイテムはまだありません。</p> 30<?php endif; wp_reset_postdata(); ?> 31</div>

【style.css】

css

1/*-- 関連記事 --*/ 2ul.test1rand { 3 display:table; 4 table-layout:fixed; 5 margin-bottom: 60px; 6 margin-left: 0px; 7} 8ul.test1rand li { 9 display:table-cell; 10 padding: 5px; 11 line-height: 120%; 12} 13ul.test1rand li a { 14 display:block; 15 text-decoration:none; 16 font-weight: bold; 17} 18.rand img:hover { 19 opacity: 0.8; 20 transition: 0.2s; 21} 22.rand { 23 width: 25%; 24} 25.ft-kiji { 26 background: #F3F3F3; 27 border-left: 5px solid #4285F4; 28 padding: 15px; 29}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

PHP

1$loopCount = 0; 2foreach($myPosts as $post) : $loopCount++; 3 if ( $loopCount % 2 === 0 ) {} // 2,4,6,8,10...回目 4endforeach;

というかCSSでやれば良い。

【これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックス】
http://www.webcreatorbox.com/tech/flexbox/

【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

【CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024

投稿2016/10/24 07:07

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/10/24 07:17

フレックスボックス、、ほうほう?いつもありがとうございます!さっそく見に行ってまいります♪
退会済みユーザー

退会済みユーザー

2016/10/24 08:13

やばいです!これめちゃくちゃ探していたやつです!色々な部分が解決しそうです!!!嬉しすぎます!!まだ全くできてないのですが、嬉しすぎたのでついひとこと。笑
退会済みユーザー

退会済みユーザー

2016/10/25 05:59

ありがとうございます!無事できました!専門用語が多くて検索ワードが分からないという点が、プログラミングの勉強を阻みますな(;´・ω・)
guest

0

なにを手がかりに切り替えるかによりますね
user agentを元におこなうならPHPでやる手もありますが
javascriptなどで読み替えることもできるかと思います
いずれにしても構造は替えずにcssでやるのが賢明です

投稿2016/10/24 04:32

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/10/24 04:49

ありがとうございます。ただ、さすがにそのご回答ですと…(>_<)笑 javascriptはまったくいじれないので、CSSがよさそうですね。 たとえば何と検索すればよさそうでしょうか? 「ループ 途中 改行」とかでは何も出なくて困っておりまして…
guest

0

>たとえば何と検索すればよさそうでしょうか?

CSSでやるなら「メディアクエリ」で検索すればいいのではないでしょうか。

「メディアクエリ」で表示幅が変われば、

.rand { width: 25%; }

width: 50%;

とかに変更するように設定すればいいのではないでしょうか。

投稿2016/10/24 05:44

8-0_nyan5

総合スコア2352

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/10/24 06:32

ありがとうございます♪ >(パソコンの場合とケイタイの場合で表示をわけるため) とは書いていますけれど、実はパソコンでは「横4×縦2」にもしたかったりするのです。いろいろ試したいというか。 なので、表題のとおり「途中で改行したい」というのが主にお聞きしたいことなのです。m(__)m
guest

0

ul.test1rand { display:table; table-layout:fixed; margin-bottom: 60px; margin-left: 0px; }

ul.test1rand { table-layout:fixed; margin-bottom: 60px; margin-left: 0px; }

とdisplaytableを消したら2*2になりましたがだめでしょうか?

投稿2016/10/24 05:44

VerfolgungEin

総合スコア147

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/10/24 06:23

うむむ? 消したましたが、4つが横一列に並んでいるだけのようすです( ;∀;) https://jsfiddle.net/un11o6s5/3/
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問