1. ホーム > 
  2. Webサイト制作 > 
  3. KompoZerの使い方 > 
  4. KompoZer - 3つのHTML編集モード

KompoZer – 3つのHTML編集モード

▼知りたいところから読む1 3種類の編集モード1.1 デザインモード1.2 分割モード1.3 HTMLモード2 おすすめの編集モード3 他のモードへの切り替え3 […]

  • 2015/7/25
  • 2011/10/23

3種類の編集モード

KompoZerには「デザインモード」「分割モード」「HTMLモード」の3種類のHTML編集モードがあります。
まずはそれぞれのモードの特徴を見てみましょう。

デザインモード

実際にブラウザで表示される画面を見ながらHTMLページを編集するモードです。比較的直感的にHTMLページを編集する事ができますので、ビギナーの方でも作業がしやすいモードです。
ただブラウザではレイアウトが正常でも、KompoZerのデザインモードでは崩れてしまう場合がありますので、最終的にはブラウザでの動作確認は必須です。

分割モード

デザインモードのプレビュー画面とHTMLモードのソースコードを上下に分割して表示・編集するモードです。直感的に操作する場所を選択して、細かい修正などはHTMLを操作する場合などには便利です。
特にKompoZerの場合はデザインビューで選択した部分のソースコードだけが表示されますので、編集時にも分かりやすいと思います。

HTMLモード

HTMLのソースコードを直接編集するモードですので、HTMLを理解している必要があります。しかし前述の2つのモードでは>head<セクションを直接編集する事が難しいので、Google Analyticsのトラッキングコードなどを埋め込む作業はHTMLモードを使った方が便利です。

おすすめの編集モード

KompoZerでホームページを作成する時にお薦めしたい編集モードは「分割モード」です。

画面右下で変更できるビュータイプを「通常」ではなく「プレビュー」にしておく事で実際にブラウザで見た時と同じ状態を見ながら、HTMLソースレベルで細かい編集ができるからです。

デザインモードで作業をすると、予期していない部分で改行や段落が入ってしまったりしますし、HTMLモードではソースコードを見て頭の中でプレビュー画面が出てくる人ではないとキツいです。

その両方の良いところだけを取り入れたのが「分割モード」ですので、多少のHTMLの知識は必要ですが元々HTMLはそれほど難しいものではありませんので、ぜひチャレンジしてみてください。

他のモードへの切り替え

KompoZerを起動したばかりの時はデザインモードでページが開きます。他のモードへ切り替えをしたい場合はどのように行えばよいのでしょうか。

HTMLソースモードへの切り替えを例にして、他のモードに切り替える方法をご紹介します。

表示メニューから「HTMLソース」を選ぶ

「表示」メニューから変更したいモードを選択して表示を切り替える方法です。

メインウィンドウ下のタブから「ソース」を選ぶ

メインウィンドウの左下にはモードを切り替えるためのタブが用意されています。切り替えたいモードを選択すると表示が切り替わります。

HTMLモードを使用するのはどんなとき?

基本的にHTMLモードだけでページの作成や編集をする事もできますが、普通はデザインモードや分割モードでの編集作業がメインになると思います。では他のモードを使っている場合でどんな時にHTMLモードを使用する機会があるのでしょうか。

ページタイトルやページの説明(meta description)などはページプロパティで編集ができますので、それ以外のコードを埋め込む場合という事になります。代表的なものとしては以下のような場合が考えられます。

  • Google Analyticsのトラッキングコードを埋め込むとき
  • Google+のボタンをページ上に配置するとき
  • ウェブマスターツールのサイト認証を行うとき

他にも利用するサービスなどで「<head>セクションにこのコードを貼り付けてください」といった指示があった場合に、HTMLモードを使って埋め込む事になります。

「役にたった」と思ったらシェアお願いします