記事内にhtmlやJSのコードを掲載する

記事内にhtmlやCSS あるいは Javascriptのソースコードを掲載する
これは私はしょっちゅうやってますね
ブログで日記を書いてます という方はまずそういう場面は巡ってこないかと思いますけれど

結論から先に
新エディターはダイレクトにソースコードを書くことができます
旧エディターはできません

<div style="width: 180px; height: 180px; background-color: rgb(217,169,167)"></div>

ソースコード掲載というのはこういうのですよね
黒い背景は見易く装飾しているだけですので 通常の掲載の仕方は以下のようになります
(フォント種の設定だけしています)

<div style="width: 180px; height: 180px; background-color: rgb(217,169,167)"></div>

このソースコード自体を直接新旧エディターに書いてみると それぞれこうなります(スクショ)

● 新エディター




● 旧エディター




すぐ見てわかりますよね
新エディターの方はソースコードを文字列のまま掲載できています
旧エディターはどうなってる状態かというと
ソースの内容が実態に変換・描画されている


新旧エディターの使い勝手や違いなんかはいろいろあるんだけれど
これが最も大きな違いだと思います
ソースを直接書き込むことができるというのは大変便利というか 楽です
と ここまでだと新エディターの使い勝手が良さ気に思えますが

新エディターの特徴というのは
ある程度はなんでもかんでもコピー掲載できてしまう点
htmlなどの文字列をそのまま表記することができることの裏返しとして
htmlで描画済みのものをコピー&ペーストで掲載できてしまう

例えばですね
あるサイトさんから内容をパクってこようと思ったとき
ガーッとコピーして新エディターへペタリするとどうなるか
コピー元の装飾もある程度引き継いで さらに画像が掲載されていればそれもちゃんとくっついて
しかもその画像群は全て直リンクで
ほぼ完コピできてしまうんですね これ　(´・ω・｀)
FC2に限らずこのタイプの投稿エディターというのは大抵そうなってます
なので私は大嫌いですね FC2新エディター(笑)

-----------

毎度話しが逸れて申し訳ございません
もうこれが私の特徴だと思って　←

旧エディターでソースを文字列のまま掲載するには

<pre>

というhtmlタグを利用します
整形済みテキスト と一般的に呼ばれるものです
ソース内容を開始タグの

<pre>

と終了タグの

</pre>

で囲うわけですが
ただそのまま囲えば良いだけではありません
エンコード
というのが必要です

例)

<div style="width: 180px; height: 180px; background-color: rgb(217,169,167)"></div>

↓ エンコード

<div style="width: 180px; height: 180px; background-color: rgb(217,169,167)"></div>

エンコードの文字なんてそうそう覚えられるもんでもありませんので
こういったサイトさんを頼る　↓

Blogtool 様

エンコード後の文字列のそこかしこにバックスラッシュ(あるいは円記号)が含まれていますが
それらは全て削除します
結構めんどくさいのです

実際に記載するコード

<pre>&lt;div style=&quot;width: 180px; height: 180px; background-color: rgb(217,169,167)&quot;&gt;&lt;/div&gt;</pre>

-------------

htmlなんかは実態が描画されますのですぐにわかりますが
JSのコードというのは通常「実態」というものがありません
見た目上は何もでてきません(JSによるhtml描画なんかは別)
「記事にJSコード書いたけどなんか文字列出てこないなー まぁいっか...」
いくない 全然いくない (・A・)
そのコードはJavascriptとしてページ内で実行されてしまいますよ
(しかも中途半端にエラーを吐きながら)

pre整形テキストができそうもない場合には
新エディターを使う というのが簡単でございます

Instruction HTML JavaScript 初心者向け