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

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

解決済

1回答

342閲覧

ワードプレスにて投稿記事の一覧を作成したものの、縦表示になり横並びにできません・・・

homura_1028

総合スコア1

WordPress

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

PHP

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

CSS

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

0グッド

0クリップ

投稿2021/03/18 13:58

編集2021/03/18 14:06

知り合いにHPを作て欲しいと頼まれて、ワードプレスを1から勉強しつつ作成しています。
昔HTMLでの作成経験はあり、VBAのプログラミングはできますが、PHPやCSSは初めて触っています。

投稿で商品の写真と価格などをカスタムフィールドテンプレートで入力し、その投稿記事一覧を作ろうとしているところです。
一覧自体は問題なく作成できたのですが、縦表記になってしまい横にできません。

下記のコードがそれですが、調べたやつをコピペしつつ修正した程度なので見にくいと思います・・・。
このコードの実行例では記事が縦ではなく横になっています。
今のところ一覧自体は作成できるのですが1カラムの縦表記になってしまいます。
それを5カラム程度にしたいといろいろ試しているのですがなかなかうまくいきません。

テーマは無料のlightningです。

<?php $posts = get_posts(array('category_name' => '×××','showposts' => '30','order' => 'ASC')); global $post; if($posts){ foreach($posts as $post){ setup_postdata( $post );?> <a href="<?php the_permalink(); ?>"> <?php if(mb_strlen($post->post_title, 'UTF-8')>8){ $title= mb_substr($post->post_title, 0, 8, 'UTF-8'); echo $title.'…'; }else{ echo $post->post_title; } ?> </a><BR> <?php echo wp_get_attachment_image(get_post_meta($post->ID,"画像",true),'thumbnail'); ?><BR> <?php echo get_post_meta($post->ID, 'サイズ', true); ?><BR> <?php $price = get_post_meta($post->ID, '価格', true); if(empty($price)){ echo "価格未定"; }else{ echo number_format($price) ,"円"; } ?><BR> <?php $birthday = get_post_meta($post->ID, '入荷日', true); if(empty($birthday)){ echo "入荷日不明"; }else{ echo $birthday ,"入荷"; } ?><BR> <?php }} ?>

自分なりにいろいろ調べてみて

<div class="col-1-3"> <div class="col-sm-3 col-xs-6"> display: inline-block などのやり方を見つけて試してみたのですが、どれもうまくいきませんでした。 lightningのテーマがまずいのかと思いTwenty Twentyで試してみましたが解決しませんでした。

仕方なくプラグインのWP Show Postsを使用しているのですが、カスタムフィールドで入力した値を表示できないので、何とか解決できたらと思っています。

良いお知恵を拝借できないでしょうか。
よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

flexboxという単語で調べてみてください。
display: flex;がお望みの挙動に近いかと。
flex-wrap: wrap;これも付けておくと、端っこで下の段に折り返してくれます。

余談ですが、

<div class="col-sm-3 col-xs-6"> こういうのはbootstrapというCSSフレームワーク用の記述です。 読み込んでおかないと使えません。

投稿2021/03/18 14:31

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

homura_1028

2021/03/18 15:29

教えていただいたやり方で無事にできました。 前に一度試してすぐに諦めたやつだったのですが、色々試行錯誤したところdivの入れる場所を間違ってたという初歩的なミスだったようです・・・。 丸1日詰まっていたのですっきりしました。 素早い返信ありがとうございます。 初歩的な質問で失礼しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問