Q&A
前提
ワードプレスを学習している初学者です。
<?php the_content(); ?>に関してです。 <?php the_content(); ?>を使用すると投稿のテキストだけが表示され、デザインがうまく反映されません。h1,h2も同じ文字の大きさで出てきます。
マーカーや文字の太さ、文字の大きさも変わっているところは変わっております。
テーマの「Twenty Twenty」を使用すると投稿のデザインも出てきます。
実現したいこと
投稿記事のデザインをそのまま反映できるようにしたいです。リンク内容
発生している問題・エラーメッセージ
エラーメッセージは確認できませんでした。
該当のソースコード
HTML,PHP
1{header.php} 2<!DOCTYPE html> 3<html lang="ja"> 4 5<head> 6 <meta charset="UTF-8"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <meta name=”description“ content="<?php bloginfo('description'); ?>" /> 10 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css"> 11 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/scss/stylesheet.css"> 12 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"> 13 <script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.6.0.min.js"></script> 14 15 <?php 16 wp_enqueue_script('jquery'); 17 wp_enqueue_script('advanced',get_template_directory_uri() . '/js/script.js'); 18 wp_head(); 19 ?> 20</head> 21 22<body> 23 <?php wp_body_open(); ?> 24 <header class="header"> 25 <div class="header_inner"> 26 <div class="l_header"> 27 <div class="header_img"> 28 <h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="Engress"></a></h1> 29 </div> 30 <div class="nav"> 31 <ul class="nav_list"> 32 <li class="nav_item"><a href="#">ホーム</a></li> 33 <li class="nav_item"><a href="#">お知らせ</a></li> 34 <li class="nav_item"><a href="#">ブログ</a></li> 35 <li class="nav_item"><a href="#">コース・料金</a></li> 36 </ul> 37 </div> 38 </div> 39 <div class="r_header"> 40 <div class="header_inf"> 41 <p class="time">平日08:00〜20:00</p> 42 <p class="tel">0123-456-7890</p> 43 </div> 44 <div class="document"> 45 <a href="#"> 46 <p class="document_btn">資料請求</p> 47 </a> 48 </div> 49 <div class="contact"> 50 <a href="#"> 51 <p class="contact_btn">お問い合わせ</p> 52 </a> 53 </div> 54 <div class="hamburger"> 55 <span></span> 56 <span></span> 57 <span></span> 58 </div> 59 60 <nav class="globalMenuSp"> 61 <ul> 62 <li><a href="#">ホーム</a></li> 63 <li><a href="#">お知らせ</a></li> 64 <li><a href="#">ブログ</a></li> 65 <li><a href="#">コース・料金</a></li> 66 </ul> 67 </nav> 68 </div> 69 </div> 70 </header> 71 72 73 74{single.php} 75<?php get_header(); ?> 76<div class="panlist"> 77 <div class="container"> 78 79<div class="blog_detail"> 80 <div class="container"> 81 <div class="blog_detail_inner"> 82 <div class="blog_detail_main"> 83 <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 84 <div id="post-<?php the_ID(); ?>" <?php post_class('blog_detail_main_top'); ?>> 85 <div class="category"><?php the_category(); ?></div> 86 <h1 class="blog_detail_title"><?php the_title(); ?></h1> 87 <div class="icon_item"> 88 89 <?php wp_social_bookmarking_light_output_e(null, get_permalink(), the_title("", "", false)); ?> 90 91 <p class="bolg_page_day">2020-01-01</p> 92 </div> 93 <div class="the_content"> 94 95 <?php the_content(); ?> 96 </div> 97 98 </div> 99 <?php endwhile; 100 endif; ?> 101 102 <div class="blog_detail_main_bottom"> 103 <h2 class="blog_detail_title_sub">おすすめの記事</h2> 104 <?php 105 $args = array( 106 'post_type' => 'post', 107 'posts_per_page' => 2, 108 ); 109 ?> 110 <?php $the_query = new WP_Query($args); ?> 111 <?php if ($the_query->have_posts()) : ?> 112 <ul id="post-<?php the_ID(); ?>" <?php post_class('blog_detail_list'); ?>> 113 <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> 114 <li class="blog_detail_item"> 115 <div class="blog_detail_img_sub"> 116 <span class="blog_page_img_text"><?php the_category(); ?></span> 117 <a href="<?php the_permalink(); ?>"> 118 <?php if (has_post_thumbnail()) : ?> 119 <?php the_post_thumbnail('medium'); ?> 120 <?php else : ?> 121 <img src="<?php echo get_template_directory_uri(); ?>/images/noimage.png" alt="ノーイメージ" width="150px" height="110px"> 122 <?php endif; ?> 123 </a> 124 </div> 125 <div class="blog_detail_text"> 126 <a href="<?php the_permalink(); ?>"> 127 <time class="blog_detail_day"><?php the_time('Y-m-d'); ?></ちｍ> 128 </a> 129 <a href="<?php the_permalink(); ?>"> 130 <p class="blog_detail_sub_title"> 131 <?php 132 if (mb_strlen($post->post_title) > 45) { 133 $title = mb_substr($post->post_title, 0, 45); 134 echo $title . '...'; 135 } else { 136 echo $post->post_title; 137 } 138 ?> 139 </p> 140 </p> 141 </a> 142 </div> 143 </li> 144 <?php endwhile; ?> 145 <?php wp_reset_postdata(); ?> 146 </ul> 147 <?php endif; ?> 148 </div> 149 150 151 </div> 152 <div class="blog_detail_article"> 153 <h2 class="archive_title">関連記事</h2> 154 <?php 155 $args = array( 156 'post_type' => 'post', 157 'posts_per_page' => 2, 158 ); 159 ?> 160 <?php $the_query = new WP_Query($args); ?> 161 <?php if ($the_query->have_posts()) : ?> 162 <ul class="archive_list"> 163 <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> 164 <li class="archive_item"> 165 <div class="archive_img"> 166 <a href="<?php the_permalink(); ?>"> 167 <?php if (has_post_thumbnail()) : ?> 168 <?php the_post_thumbnail('medium'); ?> 169 <?php else : ?> 170 <img src="<?php echo get_template_directory_uri(); ?>/images/noimage.png" alt="ノーイメージ"> 171 <?php endif; ?> 172 </a> 173 </div> 174 <div class="archive_text"> 175 <a href="#"> 176 <p class="archive_sub_title"><?php the_title(); ?></p> 177 </a> 178 </div> 179 </li> 180 <?php endwhile; ?> 181 <?php wp_reset_postdata(); ?> 182 </ul> 183 <?php endif; ?> 184 <h2 class="category_title">カテゴリー</h2> 185 <ul class="category_list"> 186 <li class="category_item">・カテゴリー1</li> 187 <li class="category_item">・カテゴリー2</li> 188 <li class="category_item">・カテゴリー3</li> 189 </ul> 190 </div> 191 </div> 192 </div> 193</div> 194 195<?php get_footer(); ?>
試したこと
single.phpを試しにいじってみたところheader.phpがなくなるとh1,h2,ulのデザインだけは反映されるようになりました。
補足情報（FW/ツールのバージョンなど）
本当に困っております。
誰か助けてほしいです。
回答1件
0
ベストアンサー
お使いのテーマファイルに、<?php the_content(); ?>
を使用して表示された投稿のテキストに対するcssが無いのだと思います。
h1,h2を違う文字サイズで表示させたかったら、h1,h2に対してフォントサイズを指定するようなcssを書く必要があります。
テーマの「Twenty Twenty」にはcssが元から用意されているはずなので、それが当たっていると思われます。
投稿2022/10/27 08:16
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/11/27 13:50