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

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

解決済

2回答

839閲覧

wordpressで記事にアイキャッチを指定すると記事の表示がおかしくなる

S_fujii

総合スコア8

WordPress

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

PHP

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

CSS

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

0グッド

0クリップ

投稿2019/08/22 02:43

編集2019/08/22 03:43

前提・実現したいこと

連日質問失礼いたします。
wordpress歴1か月程度の初心者です。

現在ドットインストール様を参考に簡単なwordpressのブログサイトを作成しようとしています。

発生している問題・エラーメッセージ

アイキャッチ画像を記事に設定すると、その記事が縦書きで表示されてしまいます。

イメージ説明

こちらの不具合を修正するにはどうしたらよいでしょうか…?

index.php

php

1<?php get_header(); ?> 2 3<body <?php body_class(); ?>> 4 <header> 5 <div class="container"> 6 <h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1> 7 <nav> 8 <?php wp_nav_menu(); ?> 9 </nav> 10 </div> 11 </header> 12 13 <main> 14 <div class="container flex"> 15 <div id="posts"> 16 17 <?php 18 if ( have_posts() ) : // もし投稿が1件以上あったら 19 while ( have_posts() ) : // 投稿の表示条件を満たす間は繰り返す 20 the_post(); // データ1件分を取り出して渡す 21 ?> 22 23 <div id="post"> 24 <div class="post-header"> 25 <h2> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h2> 26 <div class="post-meta"><?php echo get_the_date(); ?><?php the_category(', '); ?></div> 27 </div> 28 <div class="post-content"> 29 <div class="post-image"> 30 31 <?php if( has_post_thumbnail() ) : // サムネイル画像があったら 32 the_post_thumbnail( array(100,100) ); // 表示する 33 else : //サムネイル画像がなければ ?> 34 <img src="<?php echo esc_url( get_theme_file_uri ( 'img/noimage.png' ) ) ?>" width="100" height="100"> </div> 35 <?php endif; // 条件分岐終了 ?> 36 37 <div class="post-body"> 38 <?php the_excerpt(); ?> 39 </div> 40 </div> 41 </div> 42 <!-- /post --> 43 44 <?php 45 endwhile; // 投稿ループ終了 46 else : // もし表示すべき投稿がなかったら 47 ?> 48 49 <p>この記事は存在しません。</p> 50 51 <?php 52 endif; // 条件分岐終了 53 ?> 54 55 </div> 56 <div class="navigation"> 57 <div class="prev"><?php previous_posts_link(); ?></div> 58 <div class="next"><?php next_posts_link(); ?></div> 59 </div> 60 <?php dynamic_sidebar(); ?> 61 </div> 62 </main> 63 64<?php get_footer() ?>

functions.php

php

1<?php 2 3// コンテンツ幅をセット 4if( !isset ( $content_width ) ) { 5 $content_width = 635; 6} 7 8// サイドバーの設定 9register_sidebar ( 10 array( 11 'before_widget' => '<div class="widget">', 12 'after_widget' => '</div>', 13 'before_title' => '<h3>', 14 'after_title' => '</h3>' 15 ) 16); 17 18 19function custom_theme_setup() { 20 // head内にフィードリンクを出力 21 add_theme_support( 'automatic-feed-links' ); 22 23 // タイトルタグを動的に出力 24 add_theme_support( 'title-tag' ); 25 26 // ブロックエディター用のCSSを有効化 27 add_theme_support( 'wp-block-style' ); 28 29 // 埋め込みコンテンツをレスポンシブ対応に 30 add_theme_support( 'responsive-embeds' ); 31 32 // アイキャッチ画像を管理画面から指定 33 add_theme_support( 'post-thumbnails' ); 34} 35add_action( 'after_setup_theme', 'custom_theme_setup' );

css

css

1@charset "UTF-8"; 2/* 3Theme Name: MyTheme 4Template: twentyfifteen 5Author: Mouyan 6*/ 7body { 8 font-size: 16px; 9 color: #333; 10} 11a { 12 text-decoration: none; 13} 14p { 15 padding-bottom: 16px; 16 margin: 0; 17 line-height: 1.8; 18} 19.container { 20 width: 800px; 21 margin: 0 auto; 22 overflow: hidden; 23} 24.flex { 25 display: flex; 26 flex-wrap: wrap; 27} 28main .flex { 29 justify-content: space-between; 30} 31/* header */ 32h1 { 33 font-weight: bold; 34 font-size: 18px; 35 padding: 15px 0; 36} 37.menu { 38 background: #0198F1; 39 margin-bottom: 30px; 40 font-size: 12px; 41 text-align: center; 42 display: flex; 43} 44.menu a { 45 display: block; 46 padding: 10px 0; 47 color: #fff; 48 width: 150px; 49 transition: .3s all ease; 50} 51.menu a:hover { 52 background: #49c2ff; 53} 54/* post */ 55#posts { 56 width: 635px; 57} 58#post { 59 margin-bottom: 30px; 60 border-bottom: 1px solid #ddd; 61} 62.post-header { 63 margin-bottom: 15px; 64} 65.post-header h2 { 66 font-weight: bold; 67} 68.post-meta { 69 font-size: 12px; 70 padding: 7px 0; 71 color: #555; 72} 73.post-content { 74 overflow: hidden; 75} 76.post-image { 77 float: left; 78 width: 115px; 79} 80.post-body { 81 margin-left: 115px; 82} 83/* navigation */ 84.navigation { 85 overflow: hidden; 86 padding: 10px 0; 87 font-size: 12px; 88 margin-bottom: 15px; 89} 90.prev { 91 float: left; 92 width: 300px; 93} 94.next { 95 float: right; 96 width: 300px; 97 text-align: right 98} 99/* sidebar */ 100#sidebar { 101 width: 150px; 102} 103.widget { 104 margin-bottom: 25px; 105} 106.widget h3 { 107 font-weight: bold; 108 padding-bottom: 7px; 109} 110.widget li { 111 line-height: 1.8; 112} 113/* footer */ 114footer { 115 padding: 15px 0; 116 font-size: 12px; 117 color: #aaa; 118 border-top: 1px solid #ccc; 119 text-align: center 120}

ご助力頂けると幸いです。
よろしくお願いいたします。

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

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

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

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

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

kei344

2019/08/22 02:45

teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。(画像として質問文に表示されますし)
S_fujii

2019/08/22 03:38

すみません、画像添付の方法が今わかりました… 以降気を付けたいと思います、ご指摘ありがとうございました!
kei344

2019/08/22 03:39

ここは「質問への追記・修正の依頼」です。質問本文は編集することが可能なので、その依頼をしています。
S_fujii

2019/08/22 03:44

すみません、了解しました。 画像を追加させていただきました!
guest

回答2

0

ベストアンサー

index.phpの、アイキャッチの条件分岐の箇所ですが、elseのところにdivの閉じタグが入ってしまっているので、ifの時に閉じタグが存在せず崩れていると思われます。

<div class="post-content"> <div class="post-image"> <?php if( has_post_thumbnail() ) : // サムネイル画像があったら the_post_thumbnail( array(100,100) ); // 表示する else : //サムネイル画像がなければ ?> <img src="<?php echo esc_url( get_theme_file_uri ( 'img/noimage.png' ) ) ?>" width="100" height="100"> </div> <?php endif; // 条件分岐終了 ?> <div class="post-body"> <?php the_excerpt(); ?> </div> </div> </div>

条件分岐の中からdivの閉じタグを出して、他の閉じタグも整えてあげれば解決すると思います。
また、phpの?>などの閉じタグはわかりにくくなる場合があるので、わかりやすく1文で区切ってみるのもオススメします。

<div class="post-content"> <div class="post-image"> <?php if( has_post_thumbnail() ): ?> <?php the_post_thumbnail( array(100,100) ); ?> <?php else: ?> <img src="<?php echo esc_url( get_theme_file_uri ( 'img/noimage.png' ) ); ?>" width="100" height="100"> <?php endif; ?> </div> <div class="post-body"> <?php the_excerpt(); ?> </div> </div>

投稿2019/08/22 06:09

uemaSR

総合スコア257

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

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

S_fujii

2019/08/22 06:26

解決しました!閉じタグの場所が悪かったのですね。 たしかにphpの閉じタグはわかりにくくなってしまうので、ご指摘の通りの書き方を試してみようと思います。 ご助力頂きまして本当にありがとうございました!
guest

0

CSS

1.post-image { 2 float: left; 3 width: 115px; 4}

CSS

1.post-image { 2 width: 115px; 3}

で改善しませんか?

投稿2019/08/22 03:05

kyoya0819

総合スコア10429

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

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

S_fujii

2019/08/22 03:42

試してみたのですが改善されませんでした… ほかのpostのレイアウトにもfloat:leftを使っていますので、削除するとそちらも崩れてしまいます。 何か別の原因の可能性をご存知ならご教授いただけると幸いです。 申し訳ございませんが宜しくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問