ビジュアルエディタを使っています。したがって、文字が勝手に変換されるトラブルが生じたときは、本当に困ってしまいます。調べてみると、文字が勝手に変換されるケースは4種類もあって、それらを混同しないことが大切なことに気がつきました。最初、私はそれらを混同し、対応がわからなくなっていました。HTMLを十分に理解していれば簡単なことなのかもしれません。ワープロと同じ感覚でエディタを使い始めた私は、最初はこの違いに気づきませんでした。この記事では、私自身が「なるほど!」と思ったことを整理したいと思います。Ver.5.7.0)を使っています。文字が勝手に変換されるケースは以下の4通りです。順番に説明したいと思います。タイミングで変換されます。以後、「記事の更新時など」と表現します。入力直後は、変換されていなくても、その後、これらのタイミングで変換されることがありますので、注意が必要です。・コードエディタとビジュアルエディタを切り替えた場合。行ったあと、エディタで編集画面を立ち上げなおしたとき。2.ビジュアルエディタ上の「表示のみ」の自動変換(Case.1)ビジュアルエディタ上の「表示のみ」が自動変換されます。コードエディタに切り替えてみると、入力したコードのままになっています。ビジュアルエディタの表示と、実際にHTMLのコードとして保存されている内容が違います。直感的に編集できることを目的としたビジュアルエディタにおいて、「表示のみ」を見やすい記号に自動変換したものです。問題が生じた例ではありませんが、具体例を以下に示します。ビジュアルエディタで「&amp;」「&gt;」「&lt;」と記述しても、「記事の更新時など」にビジュアルエディタ上での表示が、「&」「>」「<」に自動変換されます。コードエディタに切り替えてみると、「&amp;」「&gt;」「&lt;」のままであり、ビジュアルエディタ上の「表示のみ」の自動変換であることがわかります。「&lt;」「&lt;」といった見慣れない記号(エスケープシーケンス)は、ただのテキストであることを明示するための書き方です。HTLMでは「<」「&」などが、文法的に特別な意味をもつ記号であるため、そのまま表示するときには注意する必要があります。これらについては、「HTML」「特殊文字」のキーワードで検索すれば、色々な記事を参照できます。3.ビジュアルエディタの機能による自動変換(Case.2)ビジュアルエディタの機能による自動変換で、ビジュアルエディタを使用しなければ、自動変換は生じません。入力したコードが変換され、入力したコードが完全に書き換えられます。Gutenbergになってからは、ビジュアルエディタの機能に起因する弊害は少なくなったようです。自分は、以下のような場合に悩みました。具体例この具体例では、1.で説明した「記事の更新時など」のタイミングではなく、段落ブロックでEnterキーを使ったときに自動変換されました。Gutenbergでは、段落ブロックをEnterキーを使うと、改行ではなく、その位置で段落ブロックが2つに分割されます。サイト上で「&lt;」と表示したい場合に、ビジュアルエディタの段落ブロックで「&lt;」と入力すると、サイトでは「<」となってしまいます。そこで、対応として、「&lt;」の最初の「&」がテキストであることを示すために「&amp;lt;」と記述しました。思った通りの表示になり大満足!しかし、その後、この段落ブロックをEnterキーで2つのブロックに分割すると、突然、ビジュアルエディタの表示が「&amp;lt;」から、「&lt;」に変わりました。びっくりして、コードエディタに切り替えてみてみると、コードエディタでは、「&amp;lt;」となっており、サイトの表示も想定どおり「&lt;」となっているので、ほっとしました。念のため、一旦、保存して編集画面を立ち上げ直してみましたが、さらに自動変換されることもありませんでした。ここまでは、先ほど説明した「ビジュアルエディタ上の「表示のみ」の自動変換(Case.1)」です。一度、「&lt;」と表示された状態でこの段落ブロックをEnterキーで2つのブロックに分割すると、ビジュアルエディタの表示が「&lt;」から「<」となり、コードエディタでは、「&lt;」に変換されていました。これでは、サイトでの表示が「&lt;」ではなく、「<」になってしまいます。対応としては、次の2つの方法が考えられます。(方法1)出来上がった段落ブロックはEterキーで分割しない。(方法2)カスタムHTMLブロックで記事を書く。この記事では、(方法2)で編集しています。知らないうちに自動で変換されると怖いからです。カスタムHTMLブロックも<p>タグと<br>タグの使い方だけ覚えれば簡単な記事は十分に対応できます。4.ビジュアル・コードエディタ共通の機能による自動変換(Case.3)これは、ビジュアルエディタで入力しても、コードエディタで入力しても、同様に自動変換されてしまう機能です。入力したコードが変換され、入力したコードが完全に書き換えられます。具体例これも、「問題が生じて困った」という具体例ではありませんが、知っておいた方がすっきりすると思います。自動変換のタイミングは、「記事の更新時など」です。1「&quot;」「&apos;」は、「”」「’」に自動変換されます。2「&」「>」「<」は、「&amp;」「&gt;」「&lt;」に自動変換されます。HTMLのタグである「<p>」を入力した場合は、当然「<」「>」は「&lt;」「&gt;」に変換されませんから、必ず、上記の通りに変換される訳ではなく、変換するかどうかは、自動で判断されています。「<」を「コードエディタ」や「ビジュアルエディタのカスタムHTMLブロック」で入力した場合は、「<」のまま「&lt;」には変換されません。コードエディタからビジュアルエディタに切り替えたり、保存してエディタでその記事の編集画面を立ち上げ直すと、「このブロックには、想定されていないか無効なコンテンツが含まれています」というエラーが表示されます。HTMLの文法に適合しない「<」があると判断され、自動変換が保留された状態になります。この自動変換が保留された状態が問題となります。WordPressは、エラーがありそうな保留の状態でも、なんらかの表示をしようとしますので、カスタムHTMLブロックに「<」などを記号のまま入力すると、意図せぬ解釈のまま表示される可能性があり、部分的に文字が消えたり、文字化けすることがあります。カスタムHTMLで「&」「>」「<」などをテキストとして表示したい場合には、「&amp;」「&gt;」「&lt;」と記述しましょう。意外だったのは、せっかく、テキストであることを明示するために「&quot;」「&apos;」と入力しても、「”」「’」に変換されてしまうことです。確かに、明らかにテキストとわかる部分は「”」「’」のような記号にもどしてくれた方が、読みやすいですが、自動変換が誤っていた場合には、面倒なことになりそうです。出来上がったサイトを見ると表示が自動変換されます。自動変換のタイミングというものはなく、いつも、サイトの実際の表示だけが入力とは別の記号で表示されます。これは、自動で変換すると便利だろうと判断されるものを表示だけ自動で変換してくれるものですが、用途によっては、おせっかいな機能です。2)表示「”」(全角ダブルクォーテーション)入力「"」(半角ダブルクォーテーション)表示「”」(全角ダブルクォーテーション)プログラム言語のPythonでは「'''」(半角シングルクォーテーション×3)を使うのですが、私がPythonの記事を書くときに、これを段落ブロックで記述すると「”’」となってしまい、気持ちが悪いです。(tm)」などは要注意です。半角が全角になったり、両側の半角スペースが消えたりします。いずれも、編集画面では問題なくとも、プレビューや最終表示がおかしくなります。対応としては、カスタムHTMLブロックで編集し、自動変換されたくないところを「<code>」「/<code>」で挟むことで対応できます。挟んだ部分はフォントも変わります。「<」を「「<code>」「/<code>」ではさんでも、「<」をテキストとして認識する機能はありません。「<code>」「/<code>」は、サイトの最終的な表示が自動変換される場合に有効な方法であり、エディタの機能による自動変換には対応できません。混同しないようにしましょう。下に、以下のコードを追記することで、おせっかいな機能を停止することができます。);おせっかいな機能を停止するときに、便利な機能も一緒に停止されないか不安になると思いますが、ワードプレスの公式オンラインマニュアル(日本語版)で「wptexturize」を検索すると、どのような記号が、どのように自動変換されるかが示されています。停止しても、困るようなことはないのではないでしょうか。私はプログラム言語のPythonの記事を書いているので、不等号やシングルクォーテーションマークなどを多用します。コードを美しく表示するプラグインを選定するときにも、これらの知識が必要になるので、備忘録的にまとめてみました。あとがきいかがでしたか?少しでもお役に立てればうれしいです。)になってしまいます。私はWordPressでビジュアルエディタを使い、やむを得ない場合だけ、カスタムHTMLブロックでHTMLを使っています。そこで、私が使っているHTMLを備忘録としてまとめてみました。Studioが遅いときの対策2020.01.11Kotlin♪環境設定「HAXMがインストールされていません」2020.01.052020.01.08Python♪FEM:部材座標系の要素剛性マトリクス2020.01.04Kotlin♪スマホアプリの言語は、Kotlin、Java、C#、Dart?2020.01.012020.01.13スポンサーリンクスポンサーリンク。