前提・実現したいこと
連日質問失礼いたします。
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}
ご助力頂けると幸いです。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー