作成モードとHTMLモードの違いと切り替え方法

広告

Blogger で記事を作成する時に使用する投稿エディタには作成モードと HTML モードの 2 つが用意されています。ここでは作成モードと HTML モードの違いやモードの切り替え方法について解説します。

投稿エディタのモードを切り替える

Blogger で新しい記事を作成したり投稿済みの記事を編集するときに使用する投稿エディタは「作成」モードと「HTML」モードの 2 つのモードが用意されています。「作成」モードは編集エディタに入力したテキストや適用した書式がそのまま実際にブログで表示される形で表示されます。「HTML」モードは記事の内容を HTML 文を使って作成します。

モードの切り替えは画面左上で行います。

投稿エディタのモードを切り替える(1)

投稿エディタのモードを切り替える(2)

デフォルトは「作成」モードが有効になっています。モードの切り替えは本文にテキストが入力された状態で行えます。例えば次のように本文にテキストが入力されている状態で「作成」モードから「HTML」モードに切り替えるには「HTML」をクリックしてください。

投稿エディタのモードを切り替える(3)

「HTML」モードに切り替わりました。本文に入力されている内容は「作成」モードで本文に入力された内容を「HTML」モードで表現したものに変わっています。

投稿エディタのモードを切り替える(4)

今度は「HTML」モードから「作成」モードに切り替えます。「作成」をクリックしてください。

投稿エディタのモードを切り替える(5)

「作成」モードに切り替わりました。文に入力されている内容は「HTML」モードで本文に入力された内容を「作成」モードで表現したものに変わっています。

投稿エディタのモードを切り替える(6)

このように Blogger の投稿エディタでは、本文に入力した内容を残したまま「作成」モードと「HTML」モードを切り替えて利用することができます。

作成モードについて

「作成」モードは編集エディタに入力したテキストや、テキストなどに対して適用した書式がそのまま実際にブログで表示される形で表示されます。例えば記事の本文に次のように入力したとします。

作成モードについて(1)

入力した内容に対して「番号付きリスト」や「太字」を設定してみます。

作成モードについて(2)

本文に書式を設定すると編集エディタ上でも見た目が反映されて表示されます。これは記事を公開したあとでブログで表示される見た目とほぼ同じになるため、実際にどのように表示されるのかを確認したがら記事を作成することができます。プレビューで実際に確認してみると次のように表示され、編集エディタ上での表示とほぼ同じなことが確認できます。

作成モードについて(3)

「作成」モードでは編集エディタの上部に書式を設定するためのボタンが配置されたツールバーが表示されており、簡単に書式を設定できるようになっています。

作成モードについて(4)

HTMLモードについて

「HTML」モードでは HTML タグを使って記事を作成していきます。例えば先ほど「編集」モードで本文にテキストを入力し、その後で番号付き書式と太字を設定しましたが、「HTML」モードに切り替えると次のように表示されます。

HTMLモードについて(1)

番号付き書式は <ol> タグと <li> タグ、太字は <b> タグを使って記載されていることが分かります。

「HTML」モードでは、 HTML タグの知識が必要となりますし、作成エディタに入力している途中では実際にどのように表示されるのかは分かりません。ただ「作成」モードでは指定できなかったようなより詳細な設定を「HTML」モードでは HTML タグを使って記述することができます。また HTML で記述されたコードを本文に入力する必要がある場合にも「HTML」モードでなければ記述することができません。

1 から「HTML」モードを使って本文を記述することもできますし、「作成」モードで記述しておき途中で「HTML」モードに切り替えて必要な修正を行ったあとで再び「作成」モードに切り替えて編集を続けるといったこともできます。

なお「HTML」モードでも少しですが書式を設定するためのツールバーがあります。

HTMLモードについて(2)

ツールバー上のボタンを使って書式を設定すると、対応した HTML タグが本文に入力されます。

----

作成モードと HTML モードの違いやモードの切り替え方法について解説しました

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。