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

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

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

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

CSS

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

Q&A

解決済

2回答

671閲覧

【fc2ブログ CSS】特定の部分でCSSが無効になってしまいます

LUCIA

総合スコア20

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/02/24 09:09

fc2ブログ公式から配信されているレスポンシブテンプレート simple_diary_whiteを使っています。

記事によって、CSSが効かないことがあり、質問させていただきました。
ブログトップページ・エラーのないページ

アクセスしていただくと、記事一覧の背景が緑色になっており、本文の一部が表示されている記事が5つ並んでいます。
この背景の緑色は、テンプレート側のCSSで定義されています。
普通ですと、すべての記事でこうなっているのが正しいのですが、
エラーのあるページ
中には、このページの記事の一部のように、CSSが効いていない部分があります。

問題になっていること

エラーの出ているページでは、いわゆる【ベタうち】を行っております。<!DOCTYPE html>から

</html>まで全て手打ちをしています。 初めは、この記事の記述が問題なのかと思いこんでいました。

しかし、エラーのある記事の日付を変えて、最新記事として投稿し直す作業をすると、背景が緑色に…つまり、CSSがちゃんと効いているのです…!あれ、と思って古い日付に戻すと、またCSSが効かなくなります。
また、こちらのページのように、リンクがはみ出ているエラーもあります。
リンク部分がはみ出ているケース
テンプレートの状態
テンプレートは、配布された状態からほとんど変更していません。
もともとは要約表示(%topentry_description変数)だったものを、全文表示(%topentry_body)に直したことと、一覧表示時の背景を緑色にしたことだけです。
何故エラーに気づいたのか?
本来ならば、文字を大きくしたりなど、もっとここにいろいろ手を加えていたのですが、一覧表示のレイアウトが崩れるので、原因追求のために初期状態のテンプレートを読み込み、強調するために緑色を設定したところ、異変に気づきました。
html記事側の自動改行はオフにしてあります。

記事の投稿順や日付によって、CSSが適用されなかったりすることはあるのでしょうか…?
対処方法がわからず、困り果てています。

もしよろしければ、お知恵をお借りできればと思います。よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

a要素以内にa要素があるので崩れます。

HTML

1 <a class="blog_content_tmb_wrap" href="https://ancyfamily.blog.fc2.com/blog-entry-59.html"> 2 <img class="blog_content_tmb" src="" alt=""> 3 <span class="blog_content_desc"> 4<!-- 回答者によるテキスト部分の省略 --><br /><blockquote class="embedly-card"><h4><a href="https://twitter.com/isabel_fake/status/977802075517075456?s=19">❤Berie❤ on Twitter</a></h4><p>いいねくれた人を都市伝説化 "なんの気なしに検索してみただけなんだけどねぇ..." 語り手第三者/グロテスク要素は無し/謎多め (時間差大歓迎!)</p></blockquote> <script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script><br /><br /><br /><br /><br /><br /><br /> </span> 5 </a>

HTML要素が入っているが、そこには文法上入れられない。

HTML

1 <a class="blog_content_tmb_wrap" href="https://ancyfamily.blog.fc2.com/blog-entry-106.html"> 2 <img class="blog_content_tmb" src="" alt=""> 3 <span class="blog_content_desc"> 4 <!DOCTYPE html> 5<html> 6<head> 7<meta charset="UTF-8"> 8<meta property="og:type" content="website"> 9<meta property="og:url" content="https://ancyfamily.blog.fc2.com/"> 10<meta property="og:title" content="太陽と月の庭:ある家族のサロン"> 11<meta property="og:description" content=""> 12<meta property="og:image" content="https://blog-imgs-134.fc2.com/a/n/c/ancyfamily/blogthumbnail.png"> 13</head> 14<body> 15<div class="summary">概要です</div> 16<div class="entmain"> 17<p>本文です</p> 18<p>これは、ダミーです。これは、ダミーです。これは、ダミーです。</p> 19<p>これは、ダミーです。</p> 20<p>これは、ダミーです。これは、ダミーです。これは、ダミーです。これは、ダミーです。</p> 21<p>これは、ダミーです。</p> 22<p>これは、ダミ</p> 23</div> 24</body> 25</html> </span> 26 </a>

投稿2020/02/24 11:05

kei344

総合スコア69364

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

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

LUCIA

2020/02/24 11:09

回答ありがとうございます。 なるほど…! おそらく記事を<html>からベタ打ちしているのが良くないのでしょうか…!
LUCIA

2020/02/24 11:13

同じ記事を新しい日付で投稿すると治るのは、上に行くことで、ページ送りの部分に干渉しないからなのかも知れませんね。 ページごとに違うCSSを適用することが多く、どうしてもベタ打ちすることが多いんです。
kei344

2020/02/24 11:15 編集

> 記事を<html>からベタ打ち 後半のほうはそうです。 ブログツールでは本文エリアのテキスト部分にHTMLタグを入れることは、まずほとんどありませんので、削除しましょう。 前半のほうはテンプレート側の指定の問題の可能性もあります。(本文を入れるならHTMLを削除したり対応するのが普通)
LUCIA

2020/02/25 03:48

ありがとうございます!htmlを削除したところ、数点を除いて正しく反映されるようになってきました。 唯一反映されないページが、このページのように、<style>要素のあるページです。 https://ancyfamily.blog.fc2.com/page-5.html もともとはこのstyle要素にページ独自のcssを長々書いていたため、html宣言から記述していたのですが…。 回避策はありますでしょうか?
kei344

2020/02/25 03:54

当該ページに「<style>」要素はありません。何が同問題になっているか、具体的にお願いします。
LUCIA

2020/02/25 08:58

https://ancyfamily.blog.fc2.com/page-5.html このページの一番上、個別ページでいうと、https://ancyfamily.blog.fc2.com/blog-entry-71.html こちらの記事になるのですが、この記事だけのcssを適用しているため、記事内に直接、 <style> .mons:before {content: "MONSTER";display:block;font-weight:bold; border-bottom: 4px double #000000;font-size:large} .mboss:before {content: "STAGE BOSS";display:block;font-weight:bold; border-bottom: 4px double #000000;font-size:large} .sehis:before {content: "SECRET&HISTORY";display:block;font-weight:bold; border-bottom: 4px double #000000;font-size:large} .seboss:before {content: "SECRET BOSS";display:block;font-weight:bold; border-bottom: 4px double #000000;font-size:large} .laboss:before {content: "LAST BOSS";display:block;font-weight:bold; border-bottom: 4px double #ffffff;font-size:large;color:#ffffff;background-color:#000000} ul, ol{ padding: 0; position: relative; margin:0 padding:0 } ul li.town, ol li.town { color: #000000; border-left: solid 10px #000000;/*左側の線*/ background: silver;/*背景色*/ margin-bottom: 0.5em;/*下のバーとの余白*/ line-height: 1.5; list-style-type: none!important;/*ポチ消す*/} .topicol{color:black!important} </style> こんな形でcssを書いているのです。この他にも、本文の前に、<style>〜</style>の形で定義しているページは、背景が緑にならず、本文がまるごと出てきてしまっています。
LUCIA

2020/02/25 09:07

本来ならば、<style>〜</style>でのCSSの記述はbodyでなく<head>のなかで行うべき、との情報を見ましたので、個別にデザインしたいページでは、<html>、<style>、<head>、<body>…と順々に記載をしていた次第です。
kei344

2020/02/25 09:18

「<style>」が原因ではなく、各所にHTMLの構文エラーがあるためです。構文エラーを確認できるエディタかWebサービスを探してください。 もしくはFirefoxを導入し、当該ページで「ページのソースを表示」を確認してください。構文エラーの要素が赤く表示されます。※ ちなみにデベロッパーツールはブラウザがパースした後のHTMLを表示するため、構文エラーのチェックに向いていません
LUCIA

2020/02/25 09:23

原因はhtmlの方なんですね!わかりました、ソースを見てみたいと思います。 今はスマホから見ていますが、htmlエラーチェックというChrome拡張機能を使ったところ、たくさんエラーが出てきました…! これも、デベロッパーツールと同内容のものでしょうか。
kei344

2020/02/25 11:00

あなたの手元はあなたにしか見えませんよ。その拡張がどれかもわかりませんし、いまから知ったとしてもデベロッパーツールと同じか違うかは検証しなければわかりません。 HTMLの構文がおかしい状態を直してから、CSSの指定が妥当か確認してください。回答は以上です。
LUCIA

2020/02/25 12:22 編集

ありがとうございます。地道に修正してみたいと思います。 コード見直し→修正を重ね、現段階で、エラーの出ている記事は残りひとつとなりました。終わりが見えてきたようです。 お力添えに感謝いたします…!
guest

0

構造がおかしい

正常なページ

┣l_container cf ┃┣l_left_area ┃┣l_right_area ★

正常でないページ

┣l_container cf ┃┣l_left_area ┃┣l_pager ┣l_right_area ★

対応方法?ブログサービス利用してないからわからないよ。

投稿2020/02/24 09:26

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

LUCIA

2020/02/24 10:35

ありがとうございます! 構造がおかしいんですね…!調べていただきありがとうございます。 pagerが飛び出してきているのが違いでしょうか…! もう少しこちらでも調べてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問