WEBサイトで、改行 <br> が文字化けして□に×のような記号になってしまいます。海外のテンプレートを使っている事が原因かもしれませんが、解決策が分かる方いらっしゃいますでしょうか。

下記のようなイメージです。
https://teratail.com/questions/108095

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2018/08/10 21:20:09
  • 終了:2018/08/11 21:25:04

回答(2件)

id:Asayuri No.1

Asayuri回答回数137ベストアンサー獲得回数292018/08/11 13:33:38

 
フリーのテキストエディター TeraPad のURLです 
https://tera-net.com/library/tpad.html
 
多種の文字コードに対応しているので
 
TeraPad に 読み込んで 文字コードを正しく表示させてから
 
コピー&ペーストしていけばよいです
 
 
 
 
 
 
 

id:sunihate

ちなみに海外のテンプレートは下記になります。
https://html5up.net/massively

id:toris-birds No.2

toris-birds回答回数9ベストアンサー獲得回数12018/08/11 15:50:54

ポイント100pt

□に×は、その見た目から、豆腐バグ(英語でも、tofu)と呼ばれるものです。

teratailの方を見ると、IE、Edge環境のようですので、
EdgeHTML issue trackerなどで、「br tofu」を検索してみましょう。

類件:
Edge Strange Character Issue with Custom Font in br tags

> Jul 7, 2018 Microsoft Edge Team
> Hey folks, this issue is not reproing on internal builds, I have uploaded an attachment of no-repro-10160748.png that shows Edge 17 side by side with Edge 18 ・・・

これを見る限り、Edgeの修正版(内部ビルド版)は作ったらしいです。
その後の動きがまだ無さそうなので、そのうち修正版が出るかもしれません。

-----
その他影響があるとしたら、
テンプレートで使用しているフォントに依存する現象かと思います。

tofuではなく、スケーリング関連のissue内の記述ですが
source-sans-pro issue - Font scaling problems with source sans pro #123
> Internet Explorer​
This font is not designed to work with IE, as stated by the google font portal when trying to load the Source Sans Pro page in IE

と書かれている方がいますので、
別のフォントを試してみるのが良さそうな感じがします。

  • id:a-kuma3
    その「海外のテンプレートを使っている」というページの URL を提示することは可能ですか?
    質問で引用された teratail の質問では、最終的にどうやって直したかが分かりませんが、クライアント側の問題ということで終わっています。
    まずは、クライアント側の問題なのか、サーバ側の問題なのかを切り分けるところから、だと思います。
  • id:sunihate
    テンプレートは下記になります。ご丁寧にありがとうございます。
    https://html5up.net/massively
  • id:a-kuma3
    あ、ごめんなさい。
    テンプレートのサイトじゃなくて、文字化けをするというご自身のサイトの URL が欲しいんですが。
  • id:sunihate
    そういう事ですね!ごめんなさい、お客様のサイトなのでこちらへの掲載は難しく・・。すみません。
    ほぼそのままで日本語にしただけなのですが、トップページの<h1>の<br>が文字化けするようで。ありがとうございました......
  • id:a-kuma3
    >お客様のサイトなのでこちらへの掲載は難しく・・
    実物が見られないとなると、よほどたくさんの人が踏んでるような地雷じゃないと解決は難しいでしょうね。
    teratail のページでは、ie と edge だとダメだけど、Google Chrome だと化けないみたいなことが書いてありましたけど、そんな感じなんでしょうか?
  • id:a-kuma3
    >トップページの<h1>の<br>が文字化けするようで。
    これって、h1 の中にある br だけが化けて、記事本体の div や p の中の br は化けないということですか?
  • id:toris-birds
    質問で、どのブラウザで発生するのかがあった方が良いかと思います。

    回答に類件として挙げたissueで報告されている内容ですと、
    ・(IE、)Edgeで発生
    ・Firefox、Chromeでは発生しない
    となっています。

    ブラウザ(Edgeなど)の問題のようですが、カスタムフォントで発生となっているので、
    とりあえず、フォントを差し替えてみるのがよいかもしれません。
  • id:sunihate
    手元のMacやWindowsの、IE、Safari、Firefox、Chromeなどでは再現がないようですし、限定的な現象のようなので、いくつかの思い当たる対策を行って、一端解決を保留して様子を見たいと思います。色々とありがとうございました。
  • id:a-kuma3
    「h1 の中にある br だけが化けて、記事本体の div や p の中の br は化けない」ということであれば、toris-birds さんが書かれているように、その要素に適用されているフォントによって表面化する問題という可能性が大きいと思います。
  • id:sunihate
    皆さまご迷惑をお掛けしました。先週 <br /> にして別の訂正と併せて連絡したところ、その後、特に何も言われていないのですが、色々と追加の対応もしてみます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません