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

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

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

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

PHP

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

<?php the_content(); ?> デザインが反映されない

yamane_manemane
yamane_manemane

総合スコア1

WordPress

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

PHP

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

1回答

1グッド

0クリップ

334閲覧

投稿2022/10/22 08:12

編集2022/10/30 15:38

前提

ワードプレスを学習している初学者です。

<?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'); ?></ちm> 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/ツールのバージョンなど)

本当に困っております。
誰か助けてほしいです。

yamane_manemane👍を押しています

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

お使いのテーマファイルに、<?php the_content(); ?>
を使用して表示された投稿のテキストに対するcssが無いのだと思います。

h1,h2を違う文字サイズで表示させたかったら、h1,h2に対してフォントサイズを指定するようなcssを書く必要があります。

テーマの「Twenty Twenty」にはcssが元から用意されているはずなので、それが当たっていると思われます。

投稿2022/10/27 08:16

aaasss

総合スコア50

yamane_manemaneを押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

yamane_manemane

2022/11/27 13:50

お使いのテーマファイルに、<?php the_content(); ?> を使用して表示された投稿のテキストに対するcssが無いのだと思います。 このCSSの自分で作らないとだめですか?

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

WordPress

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

PHP

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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