【カスタマイズ】記事とHTMLの関係をイメージしよう

　普段、何気なく管理ツールより書いている記事。
　実はこれ、書いた内容がそのままブラウザで
　表示されている訳ではありません。

　ユーザーが見えないところで、いろいろ追加されているのです。
　今回は、その辺りを解説してきます。

１．HTMLとテキストの関係

　通常、記事に書いているのは「テキスト」です。
　試しに、適当に文章を書いたファイルをブラウザで読み込んでみましょう。

　　

　こんな感じでプレーン（素の）テキストが表示されます。
　まぁ、これはこれで良いのですが、やっぱりタイトルロゴや、画像やらを入れたいですよね。

　その為には、HTML（HyperText Markup Language）という、特殊な言語を使う
　必要があります。

　この言語を使うことにより、以下のような表現ができるのです。

文章の中で表題や段落の区切りを指定する
箇条書きの項目を列挙する
文書の一部として画像や音声、動画を埋め込む
他の文書へのハイパーリンクを設定したりする

　もちろん、ファンブログもこの言語を使ってブラウザに表示させています。

　では、ファンブログではどのようにしてテキストで書いた記事を、このHTMLに
　変えているのでしょうか。

２．記事がブラウザに表示されるまでの流れ

　繰り返しになりますが、ファンブログの管理画面で書いた記事内容だけでは、
　ブラウザは正しく（ブログの体裁という意味で）表示してくれません。
　何故かというと、私たちが書いた言語をブラウザが理解できないからです。

　　

　では、実際どうやってブラウザが理解しているかというと、間に翻訳機を介して
　ブラウザが理解出来る言語(HTML)に翻訳しているのです。

　　

　この翻訳機の役割をしているのが、ファンブログの管理画面「スタイルの編集」にある
　各テンプレートです。

　　　　　　

３．どんなふうに翻訳してるの？

　次に、各テンプレートがどのようにブラウザが理解できる言語(HTML)に翻訳しているのかを
　見ていきましょう。

　ここでは、メインのテンプレートを例に挙げています。
　イメージとしては、テンプレート上にファンブログの管理画面で設定した内容を
　埋め込んでいく感じです。

　※解りやすくするために、部分的に抽出しています

　

　そして、この翻訳された言語（HTML）をブラウザが読み込み、画面上に
　表示しているのです。

　もちろん、翻訳されたものを記事として書くことも可能です。
　例えば、画像を表示したいのなら、

　　‹img src = "画像ファイルのURL”›

　と記事に書くことで実現できます。
　簡単に例を挙げると、こんな感じで使用します。

　このHTMLの記述の仕方やタグに関する情報は、各専門サイトで詳しく解説されています。

　とほほのWWW入門
　　各種情報がまとまっていて、解りやすいサイトです。
　　よく利用させていただいてます。

４．翻訳されたコードを見てみよう

　では、実際に翻訳されたコードをブラウザ上で見てみましょう。
　代表的な３つのブラウザでの表示方法を紹介します。

　コードを表示させたいページに移動し、以下のメニューを選択してください。

　　　１）Internet Explore

　　　　ツールバーの「表示」ー「ソース」を選択します。

　　　　　　