WordPressのHTML編集を経験すると、Bloggerブログのカスタマイズをする際コードがめちゃくちゃ複雑に見えてきます。

その原因の一つが「特殊文字」(「<」や「'」など)にあると感じます。

今回はHTML入力する際によく使う特殊文字とHTML上での書かれ方(実態参照)、変換ツールを紹介します。

HTMLでよく使う特殊文字

「通常の表示」→「実態参照での書き方」

「<」→「&lt;」
「>」→「&gt;」
「&」→「&amp;」
「"」→「&quot;」
「'」→「&apos」
「©」→「&copy;」
「 (半角スペース)」→「&nbsp;」(厳密には特殊文字ではない)

実態参照をHTML上でそのまま書きたいとき、例えば「&amp;」の場合は「&amp;amp;」と書けばOKです。

実態参照のための変換ツール

自分はTECH-UNLIMiTED様のツールを利用させていただいています。

HTML特殊文字変換ツール|TECH-UNLIMiTED

「通常の表示→実態参照」「実態参照→通常の表示」どちらも使える便利なツールです。

慣れたら意外となんてことはないです

Bloggerテーマのコードは特に実体参照まみれになりがちで、パッと見だと何が何だかわかりません。
ですが見ているうちに何となく構造が分かってくると、カスタマイズが徐々に楽しくなってきます。(そして沼にハマる)

自分だけのBloggerブログを作るために、こうしたものにも少しずつ慣れていきたいですね(^ω^)

【Blogger】HTMLでよく使う特殊文字と実態参照のための変換ツール

WordPressのHTML編集を経験すると、Bloggerブログのカスタマイズをする際コードがめちゃくちゃ複雑に見えてきます。

その原因の一つが「特殊文字」(「<」や「'」など)にあると感じます。

今回はHTML入力する際によく使う特殊文字とHTML上での書かれ方(実態参照)、変換ツールを紹介します。

HTMLでよく使う特殊文字

「通常の表示」→「実態参照での書き方」

「<」→「&lt;」
「>」→「&gt;」
「&」→「&amp;」
「"」→「&quot;」
「'」→「&apos」
「©」→「&copy;」
「 (半角スペース)」→「&nbsp;」(厳密には特殊文字ではない)

実態参照をHTML上でそのまま書きたいとき、例えば「&amp;」の場合は「&amp;amp;」と書けばOKです。

実態参照のための変換ツール

自分はTECH-UNLIMiTED様のツールを利用させていただいています。

HTML特殊文字変換ツール|TECH-UNLIMiTED

「通常の表示→実態参照」「実態参照→通常の表示」どちらも使える便利なツールです。

慣れたら意外となんてことはないです

Bloggerテーマのコードは特に実体参照まみれになりがちで、パッと見だと何が何だかわかりません。
ですが見ているうちに何となく構造が分かってくると、カスタマイズが徐々に楽しくなってきます。(そして沼にハマる)

自分だけのBloggerブログを作るために、こうしたものにも少しずつ慣れていきたいですね(^ω^)

次に読まれている記事