sunihate回答ポイント 100ptウォッチ 1

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

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

• はてなアカウントでログイン
• 無料ユーザー登録

みんなの回答

• Asayuri2018/08/11 13:33:38

  0pt

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

  スター

sunihate

2018/08/11 14:36:26

ちなみに海外のテンプレートは下記になります。

https://html5up.net/massively

toris-birds2018/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

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

スター
• その他の回答を読む

この質問へのコメント

• a-kuma32018/08/11 14:32:17
  その「海外のテンプレートを使っている」というページの URL を提示することは可能ですか？
  質問で引用された teratail の質問では、最終的にどうやって直したかが分かりませんが、クライアント側の問題ということで終わっています。
  まずは、クライアント側の問題なのか、サーバ側の問題なのかを切り分けるところから、だと思います。
• sunihate2018/08/11 14:37:32
  テンプレートは下記になります。ご丁寧にありがとうございます。
  https://html5up.net/massively
• a-kuma32018/08/11 14:48:13
  あ、ごめんなさい。
  テンプレートのサイトじゃなくて、文字化けをするというご自身のサイトの URL が欲しいんですが。
• sunihate2018/08/11 14:56:02
  そういう事ですね！ごめんなさい、お客様のサイトなのでこちらへの掲載は難しく・・。すみません。
  ほぼそのままで日本語にしただけなのですが、トップページの<h1>の<br>が文字化けするようで。ありがとうございました......
• a-kuma32018/08/11 15:14:21
  ＞お客様のサイトなのでこちらへの掲載は難しく・・
  実物が見られないとなると、よほどたくさんの人が踏んでるような地雷じゃないと解決は難しいでしょうね。
  teratail のページでは、ie と edge だとダメだけど、Google Chrome だと化けないみたいなことが書いてありましたけど、そんな感じなんでしょうか？
  
• a-kuma32018/08/11 15:17:05
  ＞トップページの<h1>の<br>が文字化けするようで。
  これって、h1 の中にある br だけが化けて、記事本体の div や p の中の br は化けないということですか？
• toris-birds2018/08/11 15:59:28
  質問で、どのブラウザで発生するのかがあった方が良いかと思います。
  
  回答に類件として挙げたissueで報告されている内容ですと、
  ・（IE、）Edgeで発生
  ・Firefox、Chromeでは発生しない
  となっています。
  
  ブラウザ（Edgeなど）の問題のようですが、カスタムフォントで発生となっているので、
  とりあえず、フォントを差し替えてみるのがよいかもしれません。
  
• sunihate2018/08/11 16:28:06
  手元のMacやWindowsの、IE、Safari、Firefox、Chromeなどでは再現がないようですし、限定的な現象のようなので、いくつかの思い当たる対策を行って、一端解決を保留して様子を見たいと思います。色々とありがとうございました。
• a-kuma32018/08/11 16:31:41
  「h1 の中にある br だけが化けて、記事本体の div や p の中の br は化けない」ということであれば、toris-birds さんが書かれているように、その要素に適用されているフォントによって表面化する問題という可能性が大きいと思います。
• sunihate2018/08/13 09:07:00
  皆さまご迷惑をお掛けしました。先週 <br /> にして別の訂正と併せて連絡したところ、その後、特に何も言われていないのですが、色々と追加の対応もしてみます。

質問の情報

登録日時

2018-08-10 21:20:09

終了日時

2018-08-11 21:25:04

回答条件

1人1回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• 36歳です。卵巣腫瘍疑いで大学病院に10月1日に受診しました。エコーで充実性腫瘍があるから至急MRIと腫瘍マ…ikkuchaan11日前
• 同じような体験をしたことがある人はいますか？。 ある日、お葬式の職業に就きたいなあなんて話題にしてい…匿名質問者14日前
• 私は、【チルスポ】　という名前で、 チルスポット情報を共有するアプリを開発しています。 皆さんの知って…匿名質問者12日前
• b型就労支援施設に通っている方に質問です。どういうことが通っていて辛いと感じますか？他の利用者の方と…匿名質問者2日前
• 今行きがかり上で中小企業を相手に民事訴訟の原告と被告で2件の裁判を抱えています。しかし何も深刻さはな…asnaro_7111日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ