wordpress 投稿記事一覧 文字がすべて赤くなる

Question

###解決したいこと
投稿記事一覧(inde.php)にて、すべて文字色が赤くなるという現象になってしまいました。投稿ページの(single.pnp)を表示すると、きちんと表示されるのですが、投稿記事一覧のみすべての一覧の文字と、footerまでもが文字が赤くなってしまいました。記事タイトル：スクロールトップの記事文章font colorが原因だとは思うのですが、他記事（本日の勉強以降）をちゃんと指定した文字色で表示するにはどうしたらよいでしょうか。

###イメージ画像 index.php 記事一覧

###スクロールトップ記事のhtmlコード

</br>
<p><font color="#ff6b6b"><i class="fa fa-clock-o" aria-hidden="true">&nbsp;</i><?php the_modified_date('Y年m月d日（D） H:i'); ?>&nbsp;&nbsp;&nbsp;更新しました</font></p>
<p><font color="#ff6b6b">ページ内デザイン変更とcss/transitionについて内容を追加しました。</font></p>
</br>

<p>こんばんは！！</p>

font color="#ff6b6b"の指定で記事一覧では続けて次の記事まで文字色が赤くなってしまっています。

Answer 1

スタイルの崩れ方として、そういった崩れ方をするときは高確率で閉じタグ忘れなどの構文エラーがあります。

主犯は <?php the_modified_date('Y年m月d日（D） H:i'); ?> を記事本文中に入れているという部分でしょう。
ほかにもおかしなところはたくさんあるので、いくつか指摘します。

---

font 要素は廃止されています。CSSによるスタイルで色を指定してください。

【font 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/font

---

下記部分はヘッダ内にありますが、</p> が2つ混入しています。そもそもヘッダ内に<p>は文法上おかしかったような。

<!-- WordPressのjQueryを読み込ませない --></p>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script></p>

---

いくつも出てくる </br> は書くとするなら <br /> です。HTML5で書くなら <br> で問題ないです。

---

下記部分の文字制限を自前の処理として行ったのであれば、正しく行えていません。

<p>具合が悪いけど、動かなければ大丈夫なので<a href="https://...<!--記事本文を出力し140文字に制限する-->

---

とりあえずざっと見て見つけた箇所です。

Comments

[kotori_00]

回答ありがとうございます！！
いろいろと指摘いただき、ありがたいです。

指摘いただいた箇所を調べて修正したら、ちゃんと記事一覧の文字数制限が表示されました。
下記コードを使ったら、うまくいきました。⇩

<?php
if(mb_strlen($post->post_content,'UTF-8')>140){
$content= str_replace('\n', '', mb_substr(strip_tags($post-> post_content, '<span><br>'), 0, 140,'UTF-8'));
echo $content.'……';
}else{
echo str_replace('\n', '', strip_tags($post->post_content, '<span><br>'));
}
?>

もともと使用していたコードに足りない部分が多かったのですね。
ネットで検索したらそんなに時間がかからないで解決できました！

いろいろと勉強になりました。(*^_^*)

[kotori_00]

追加
すみません(⌒-⌒; )
上記のコードで投稿記事一覧の文字色漏れが直ったのは、テキスト編集内でfont colorを使用しないで、cssでcolorを指定したら直りました。
上記の文字数制限は文字色漏れには関係ありませんでした。。
でも、とっても良い勉強になりました。
htmlのタグを削除したり、指定のタグは文字数制限内で使うことができるんですね。*･゜ﾟ･*:.｡..｡.:*･'(*ﾟ▽ﾟ*)'･*:.｡. .｡.:*･゜ﾟ･*