KompoZerのインストールと使い方

KompoZer(コンポーザー)はWYSIWYG(ウィジウィグ)でウェブページが作成できるウェブオーサリングソフト。
コンピュータ言語であるマークアップ言語を理解していなくても、ワープロやグラフィックソフトの操作に近い形で視覚的に作業することができる。

一般的にはホームページビルダー、商用ではDreamweaverが有名で、これら有料ソフトと比較するとさすがに機能的には見劣りする部分があるものの、ウェブページの作成という基本的な部分については遜色がない。

KompoZerはすでに開発が中止となっているMozilla ComposerをベースにしたNvuというウェブオーサリングソフトの後継で、同じくNvuからの派生ソフトには正式版をリリースしたBlue Griffonがある。

BlueGriffonのインストールと使い方

BlueGriffonは、Mozilla Composerをベースにした「Nvu」の派生ソフトで、開発が継続されている貴 … “BlueGriffonのインストールと使い方” の続きを読む

KompoZerは未だ正式版に至っていないものの、外部CSSなどBlue Griffonで有償の機能も無料で使用できていたが、2010年のベータ版0.83を最後に開発が止まり、2018年現在ではオフィシャルサイトも閉鎖されている。

対応している言語も言語はHTML4.0またはXHTML1.0で、現在主流になっているHTML5には未対応。

個人的に、現在のWordPressに移行する前は、KompoZerを使用してHTMLの勉強をしながら、ウェブページを作成していたので、オフシャルサイトの閉鎖は一抹の寂しさがある。

システム要件

ラストバージョン0.8β3

OS:Windows XP / Vista / 7 / 8 / 10

システム要件としての記載が見当たらず、XPと7、10(32&64bit)で動作確認済み。

ソフトの入手先

KompoZer ダウンロードページ

公式サイト閉鎖のためSOURCE FORGEから日本語版のインストーラーを入手可能。



KompoZerのインストール

KompoZerは各言語別にインストーラーが用意されているので、日本語版のインストーラーを入手する必要がある。

SOURCE FORGEのKompoZerのページから「kompozer-0.8b3.ja.win32.exe」をクリックしてダウンロードする。

インストーラーを起動して、ユーザーアカウント制御のメッセージが出たら「はい」で許可。

セットアップウィザードが開始するので「次へ」。

EULAが表示されるので確認して問題がなければ「同意する」。

インストール先の指定。
特にこだわりがなければデフォルトのまま「インストール」をクリック。

プログラムグループの指定もデフォルトのまま「次へ」。

デスクトップのショートカットとクイックランチのショートカット作成を選択。
不要ならチェックを外す。

インストール先などを確認して「インストール」をクリックするとKompoZerがインストールされる。

セットアップ完了。

使用方法

KompoZerのデザイン編集だけでもある程度のページは作成できるが、メタタグの記述などがないためにどうしても片手落ちの感は否めず、少なからずタグの知識は必要になる。

0.8β3では「デザイン」から「ソース」に切り替え、ソースを直接編集した後、デザインに戻った場合に、h属性やdiv属性などの切り替えができなくなる不具合があるため、ソースの編集はKompoZerではなく、otbeditなどのテキストエディタを使用したほうが良いかも。

他にもいくつかバグと思われる箇所が存在するが、そのような場合は、一旦保存して再度ページを開くか、KompoZerの再起動で大抵は解決する。

kompozerを起動するとワープロソフトのように、白紙ページにIビームが点滅している状態になる。
設定はほぼデフォルトのままでOKなのだが、ページ作成の前に一応各項目の確認を行う。

メニューバーの「ツール」→「設定」を選択。

全般・フォントなど設定を確認後、「詳細」で上図赤枠部分のマークアップ形式を確認。

言語はHTML4.0またはXHTML1.0に対応しており、いずれかを選択する。
XHTMLはXMLというマークアップ言語を従来のHTMLに取り込んだ新規格で、HTML4.0がベースになっている。

どちらが良いのかと言えば、拡張性の高いXHTMLなのだが、HTML4.0よりも文法が厳しいため、HTML4.0の方がビギナー向け。
また、DTDは「文書型定義」で、TransitionalとStrictがあり、Strictは文法に厳しく、Transitionalは若干甘めという設定。
これも底が見えないほど奥が深いため、取り敢えず厳しいよりは若干甘めのTransitionalを選択しておく。

WYSIWYGはWhat You See Is What You Get(見たままを手に入れる)の略で、ブラウザで表示されるイメージでWEBページの作成が可能になっている。

初めはKompoZerの基本操作に慣れるため、適当な文章を入力してみる。

画面下部にある「ソース」というタブをクリックすると、入力した文字がHTML(HyperText Markup Language)で表示される。

WYSIWYGは前述のとおり、「見える状態」で作業するが、その作業は全てマークアップ言語に置き換えられている。
そのため極論を言えばHTMLを理解していなくても、最低限のページ作成は可能になる。
ただ、デザイン編集よりもソースを直接編集したほうが効率が良かったり、KompoZerでは編集できない処理も、タグを記述することで可能になるため、基本的なタグはある程度知っておいたほうが良い。

ファイルの保存は上部アイコンメニューの「保存」をクリック。

新規ファイルを保存する場合は、ページタイトルの入力ダイアログがでるので、任意のページタイトルを入力する。

ページタイトルはファイル名ではなく、ブラウザに表示されたり、GoogleやYahooの検索結果に表示される。

ページタイトルを入力後にOKをクリックすると、タイトル名と同じファイル名で保存されるが、ファイル名を変更してもタイトルは変わらない。

タイトルには漢字やひらがななどの2バイト文字を使用できるが、ファイル名は必ず半角英数の1バイト文字を使用する。

作成したファイルは完成した時点でアップロードが必要になるため、予めファイル構成を固めておく。

KompoZerで作成したファイルや使用する画像などは、全て1つのフォルダ内に入れておく。
これは画像や各ページなどへ相対パスでリンクするためには必須。

基本的にはホストの初期フォルダ(ルートディレクトリ)の中に、ページの表示に必要な素材などを全てアップするため、フォルダ分けをしっかり行わないと、後からの処理が非常に煩雑になってしまう。

一般的には作成したページそのものを保存するフォルダと素材フォルダを分け、サイトの大きさにもよるがそれらのフォルダを格納したカテゴリー別のフォルダなどで整理する。

このフォルダ名も全て半角英数を使用する。

レイアウトの設定

ある程度ページデザインのイメージが決まったら、初めにページの大まかなレイアウトを設定する。

レイアウトは上部アイコンメニューから「テーブル」をクリックするか、メニューの「テーブル」→「挿入」を選択する。

設置するセルの数を指定してテーブルを設置。

テーブルは後からでも追加でき、テーブル内にテーブルを作成することも可能。
また、Excelなどの表計算ソフトと同様、セルの結合もできる。

テーブルを挿入した状態。このセルはマウスカーソルで任意の大きさに拡大縮小が可能。

セルがブラウザでどのように表示されるか確認するには、ファイルを保存した後、「閲覧」アイコンをクリックすると、ブラウザが起動して表示される。

設置したテーブルの枠線や余白などを設定するため、テーブルをダブルクリックするか、メニューの「テーブル」→「テーブルのプロパティ」を選択。

テーブルの詳細設定画面が開くので、「テーブル」タブをクリック。
枠線の太さ、セルとセルの間隔、セル内の余白を設定する。

基本レイアウトのセルを非表示にする場合は、枠線を「0ピクセル」に設定。
その他の設定は任意の数値を入れ、表示結果を確認しながら指定する。

枠線:0px セル間隔:0px 余白5pxで設定したものが上図の状態。

枠線が実線から赤い点線に変わっている。この状態をブラウザで確認すると入力された文字だけが表示される。

セルの幅はスライドして調整するか、テーブルのプロパティで「セル」のタブを選択、「大きさ」の箇所を指定する。

数値を指定する場合は必ず指定する側にチェックを入れる。

セルの結合は表計算ソフトと同様、結合するセルを選択し、「テーブル」→「選択されたセルを結合」を選択するか、コンテキストメニュー(右クリックメニュー)で「選択されたセルを結合」を選択する。

テーブルの中にテーブルを挿入する場合は、該当のセルをクリックし、通常のテーブル作成と同じ手順で挿入する。

挿入したテーブルもプロパティで枠線や余白の設定が可能。

画像の追加

ページに画像を挿入する場合は、追加したい任意の箇所で上部メニューの画像アイコンをクリックし、「画像のプロパティ」を開く。

設置する画像ファイルを「pictフォルダ」などに保存し、「画像URL」のフォルダアイコンをクリックし、保存してある画像を選択する。

その際、「相対URLを使用する」にチェックが入っていることを確認する。
ここのチェックが入っていなければ絶対パスになり、サーバにアップした際にリンクが切れてしまう。

代替テキストは画像を表示できないブラウザなどで表示される画像の説明などを入力する。

配置する画像の大きさは、「画像プロパティ」の「大きさ」タブで任意のサイズに拡大縮小が可能。

拡大縮小する場合は「ユーザー指定」にチェックを入れ、任意のサイズを入力する。

画像に対するテキストの回りこみは、「画像プロパティ」の「表示」タブにある「画像に対する文章の配置」で指定する。

文章の配置を「左に回り込む」に設定すると、画像の左側に文章が回り込む。
これを「下に揃える」にすると、画像が配置された箇所には文章が入らず、画像の下に文章がくる。

画像に余白や輪郭線を付ける場合は、「余白」項目に任意の数値を入力。
ただし、左右余白(HSPACE)と上下余白(VSPACE)はHTML4.01の非推奨設定で、これらはスタイルシートの使用が推奨されている。

画像にリンクを埋め込む場合は、「リンク対象」タブでリンク先のURLを入力する。

外部リンクの場合は該当ページのURL、内部リンクの場合は画像挿入と同様、リンク先を相対パスで指定する。

リンクの設定

リンクの設定は、画像にリンクを追加した操作と全く同じで、リンクのプロパティ画面でリンク先のURLを指定するだけ。

文章にリンクを設定する場合は、対象の文字列を選択し、リンクアイコンをクリックするか、右クリックメニューから「リンクを作成」を選択する。

内部リンク(他のページ)はフォルダアイコンをクリックして、該当のページを指定すると自動的に相対URLでリンクが作成される。

「リンク先を新しいウィンドウで開く」場合は、「リンクターゲット」の項目にある「リンク先を」にチェックを入れ、「新しいウインドウで開く」を選択して「OK」をクリックする。

同一ページ内でのリンクは「アンカー」を使用する。
リンクをクリックすると、アンカーをつけた文字、または画像などがブラウザのトップにくる。

文字列の場合はアンカーを設置したい文字列を選択、画像の場合は対象の画像をクリックした状態で、ツールバーのイカリアイコンをクリックすると、「名前付きアンカーのプロパティ」が開くので、アンカーの名称を半角英数で入力。
当然、アンカーを複数設置する場合は、アンカー名は重複してはならない。

アンカーを設置すると、設置した箇所に左図赤枠部分のようにイカリのマークが表示される。

アンカーを設置した場所へのリンクは、通常のリンクと同様、リンクのアイコンをクリックし、文字列なら「リンクのプロパティ」、画像なら「画像のプロパティ」を開き、左図赤枠部分の▼をクリックすると、ページ内に設置したアンカーが表示される。

同一ページ内であれば、リンクは「#アンカー名」になる。
また、他のページから設置したアンカーへのリンクは通常のページへのリンクの後に「#アンカー名」を追加することで可能になる。

文字や背景の装飾

テーブル内のセルの背景色や文字の配置は「テーブルのプロパティ」から行う。

「内容の配置」では文字や画像を「垂直方向」では「上・中央・下」、「水平方向」で「右・中央・左」が選択でき、指定する場合はチェックボックスにチェックを入れて配置を選択する。

セルの背景色ではなく、ページの背景そのものを編集したい場合は、メニューの「書式」→「ページの配色と背景」で背景画像や配色の指定をする。

スタイルシート

文字の属性はデフォルトで「見出し1」のフォントサイズが最も大きくなっているが、これらはスタイルシート(CSS)で自由に変更できる。

文字の属性を変更するには、ツールバーのプルダウンメニューから選択するが、見出しは単に文字のスタイルを決めるものではなく、ページ内のタイトル・サブタイトルなど、それぞれの重要性を表しているため、スタイル重視で見出し3の後に見出し2が来るような構文は原則的に正しくない。

スタイルシートとは、フォントの大きさや色、斜体、太文字、背景色や背景画像など、文字通り「スタイル」を定義するもので、例えば段落意味をする< p>タグをスタイルシートで定義すると、<p>タグの使用する箇所は全て同じスタイルになり、ページの構成に統一感がでる。

kompozerはCSSエディタを実装しているので、スタイルシートの設定方法はCSSエディタで行うのが最も簡単。
「CSS」アイコンをクリックするとCSSエディタが開くので、スタイル規則を新規作成で「指定された種類の全要素に適用されるスタイル」にチェックを入れ、左図下の赤枠部分のリストボックスから定義するタグを選択したら「スタイル規則の作成」をクリックする。

スタイルの指定はメニュータブを切り替えて行う。

テキストタブはフォントの種類とサイズ、装飾、行間隔、文字色などの設定。背景タブは文字通りフォントの背景色や画像を設定。枠線タブはフォントに指定した枠線を表示するなど、ワープロソフトや表計算ソフトなどでも使用している文字の体裁設定が行える。

スタイルを設定したら「OK」をクリックするとCSSエディタが終了する。

再度CSSエディタで別の要素にスタイル規則を作成する場合は、上図赤枠部分をクリックすると、スタイル規則の新規作成画面に切り替わる。

また、このスタイルシートは「内部スタイルシート」で、作成したスタイルの規則は全てページ内に記述されるため、他のページにはスタイルが反映されない。
設定したスタイルを他のページに反映させるには、スタイルを外部に出力し、その設定をページに読み込ますことで、全てのページで同じ体裁が簡単に実現できる。

内部スタイルシートで設定した規則を外部出力するには、CSSエディタを起動し「スタイルシートを外部に出力し・・・」をクリック。

保存先を指定してファイルに半角英数で名前をつけて保存する。
当然、ページや画像などと同一のフォルダに保存する。

新規のページに出力した外部スタイルシートを読み込ませるには、「新しいlink要素」を選択。

「選択」をクリックし、出力したスタイルシートを指定すると、URLの欄にスタイルシートのパスが表示されるので、後は「スタイルシートの作成」をクリックするだけ。

外部スタイルシートを正しく読みこめば、未定義の「内部スタイルシート」の下に、外部スタイルシートのファイル名が表示され、ページにスタイルが適用される。





WEBオーサリング

KompoZerのインストールと使い方

KompoZer(コンポーザー)はWYSIWYG(ウィジウィグ)でウェブページが作成できるウェブオーサリングソフト。 コ … “KompoZerのインストールと使い方” の続きを読む

BlueGriffonのインストールと使い方

BlueGriffonは、Mozilla Composerをベースにした「Nvu」の派生ソフトで、開発が継続されている貴 … “BlueGriffonのインストールと使い方” の続きを読む





BlueGriffonのインストールと使い方

BlueGriffonは、Mozilla Composerをベースにした「Nvu」の派生ソフトで、開発が継続されている貴重なWYSIWYG(ウィジウィグ)対応のウェブオーサリングソフト。
基本部分は無料で使用でき、現バージョンは日本語にも対応している。

すでに「Nvu」は開発が終了しており、同じ派生ソフトでは「KompoZer」も存在していたが、2010年のベータ版0.83を最後に開発が止まっているため、Nvuの後継ソフトで生き残っているのはBlueGriffonのみになる。

HTML5や基本的なCSSも無料で利用可能だが、テンプレートやレスポンシブデザインなど様々な機能は有料版(75ユーロ)にて提供されている。

マークアップ言語(HTML)やカスケードスタイルシート(CSS)を理解していなくても、ワープロやグラフィックソフトの操作に近い形で視覚的に作業することができるので、取り敢えず「ウェブページを作ってみる」という場合には最適。

システム要件

バージョン3.0.1現在

OS:Windows 7/ 8 / 10(32bit & 64bit)

ソフトの入手先

BlueGriffon 公式サイト ダウンロードページlink



BlueGriffonのインストール

有償版の場合はライセンスを購入して制限されている機能をアクティベートするので、無償版も有償版もダウンロードするインストーラーは同じ。
セットアップウィザードは日本語化されていないが、アドウェアなどのインストール項目もなく、インストール作業は至ってシンプル。

ダウンロードのリンク先から使用するPCのアーキテクチャに合わせて、Windowsの32ビットまたは64ビットのリンクをクリック。

ダウンロードしたインストーラーを起動し、ユーザーアカウント制御を許可すると、セットアップウィザードが開始するので「Next」。

インストール先の指定。
特にこだわりがなければデフォルトのまま「Next」。

スタートメニューへの登録もそのまま「Next」。

スタートメニューに追加したくない場合は「Don’t create a Start Menu folder」にチェックを入れる。

デスクトップにショートカットアイコンを作成するならチェックを入れた状態で「Next」。
不要ならチェックを外す。

インストールの内容を確認して問題なければ「Install」をクリック。

「Finish」でセットアップ完了。

初回起動時にインストールしたバージョンの概要が表示されるので「OK」で閉じる。

使用方法

WYSIWYGはWhat You See Is What You Get(見たままをGETできる)の略で、ブラウザで表示されるイメージ(見たまま)でWEBページの作成が可能になっているとは言え、デザインなどに大きな制限がかかるため、多少なりともCSSやHTMLの知識が必要になってくる。

HTMLやCSSを勉強する切っ掛けには最適かも。

新規ページを作成する場合は、「ファイル」メニューに「新規作成」と「新規作成ウィザード」があるので、ビギナーは「新規作成ウィザード」を選択。

ウィザードではページの基本設定が行える。

文書の種類を選択。
現在は「HTML5」の使用が推奨されているらしいので、「HTML5」を選択して「次へ」。

文書のプロパティでは「meta要素」になる各項目を入力する。
meta要素は文書の定義で、最も基本的なSEO(サーチエンジン最適化)対策になる。

「タイトル」はブラウザのタブや検索結果に表示されるもので、上図のように「TEST」とのみ入力すると、検索結果にも「TEST」としか表示されないので、サイト名などを含めた分かりやすものにする。

「説明」にはページの概要を、わかりやすく、詳しく記載したほうがSEO的に良いとか。。。
「キーワード」についてはページに関連したキーワードを入力し、キーワードはカンマ(,)で区切る。
最近の傾向ではSEO的にキーワードの重要性は低下しているらしい。

「言語」は「言語選択」をクリックして「日本語」を選択すると「ja」が表示される。

文字色やリンクの配色を指定。
変更する場合は「色を指定する」にチェックを入れて任意のカラーを選択する。

背景に画像を表示させる場合は、フォルダアイコンをクリックして任意の画像ファイルを指定する。

「タイトル」の項目には「None」「Horizontally」「Vertically」「Both」があり、指定した画像の配置を単体・横並び・縦並び・全体で指定できる。
また、「スクロール」は指定した背景をスクロール時に移動させるか、固定したままにするか選択。

最後の設定はページレイアウト。
ページの幅を固定する場合は「幅」のドロップダウンリストから選択可能。
タイトル部分に看板画像を表示させる場合、「ウインドウ幅」にすると画像の幅を超えたウインドウサイズになると、画像の横に微妙な空白が生じるので、サイズを指定したほうが見た目的に良いかも。

サイドバーを作成する場合は「サイドバー」のドロップダウンリストから位置とサイズを選択。

本文スペースの列数を指定する。
「追加」をクリックし、ドロップダウンリストから任意のレイアウトを追加していく。
特にレイアウトが決まっていない場合は「1列,100%」を追加。

設定が終了したら「完了」をクリック。

サンプル文章が入った新規ページが出来上がり。

ページができたら取り敢えず「ファイル」→「保存」でファイルを保存する。
保存時のファイル名は必ず半角英数を使用。

ファイルの保存先
作成したファイルは完成した時点で、使用した画像などの素材も含めてアップロードが必要になり、相対パスでリンクするためには、全て1つのフォルダ内に入れておく必要がある。

基本的にはホストの初期フォルダ(ルートディレクトリ)の中に、ページの表示に必要な素材などを全てアップするため、フォルダ分けをしっかり行わないと、後からの処理が非常に煩雑になってしまう。
一般的には作成したページそのものを保存するフォルダと素材フォルダを分け、それらのフォルダを格納したカテゴリー別のフォルダなどで整理する。
作成したフォルダ内のファイルやサブフォルダの名称は全て半角英数を使用。

書式設定

フォントのサイズやカラー、インデント、文字間隔などの書式設定はスタイルシート(CSS)を使用するのだが、BlueGriffonはWordで文書を作成するのと同じような要領で編集すると、自動的にスタイルシートが記述されていく。
ただ、無償版ではCSSエディタは付属していないため、直接編集する場合は「ソース」を修正することになる。

上部メニューの「パネル」から「スタイル プロパティ」にチェックを入れる。

右サイドにパネルが表示されていない場合は、右端にある上図赤枠部分をクリックするか、カーソルでドラッグするとパネルを引っ張り出せる。

「スタイル プロパティ」はページデザインの編集に使用するもので、文字装飾のほかに画像、背景色、表などの細かな設定を行うほか、マウスオーバー時の簡単なエフェクトも追加できる。

基本的に編集する部分をクリックし、マウスカーソルが「Iビーム」になっている箇所が選択されるが、「プレビュー」の状態では選択移動がスムーズに行われないことがあるため、下部にある「ソース」をクリック。
「ソース」ではマウスカーソルの位置がマーカーされて表示されるので、確認してから「プレビュー」に戻って操作すると良いかも。

CSSをこれから勉強するビギナーであれば、IDやクラスをBlueGriffonが自動的に設定してくれるオプションがあるので「有効」にしていると便利。
上部メニューの「ツール」→「オプション」で「スタイル」を選択し、「CSSの編集方法」で「自動」にチェックを入れる。

本来であればIDやクラスは自分で分かりやすいものを設定したほうが、編集する際に何かと都合が良いのだが、そもそもIDやクラスの概念が分からないと使いようもないので、ビギナーにはオススメ。

また、BlueGriffonはファイル保存時にバックアップ用の「.bak」という拡張子を持つファイルを生成するため、「オプション」にある「文書」の「編集機能」で「ファイルの保存前にバックアップ(*.bak)を作成する」のチェックを外しておくと良いかも。

前景色・背景色

ページヘッダーや本文などの文字色や背景色の変更は、スタイル プロパティの「色」で行う。

前景色は通常「文字色」で、背景色のほかに画像を背景に設定したり、背景色にグラデーションを使用することもできる。

前景色・背景色は「◯」をクリックするとカラーパレットが開くので、任意の色を指定するだけ。

グラデーションを使用する場合は、「背景画像」の「+」をクリックして「線状」または「放射状」を選択。
ただし、グラデーションの作成機能はエラーが発生しやすく、時間もかかるため使用は控えたほうが良いかも。

設定画面が開くので「+」をクリック。

上図赤枠部分の楕円アイコンをクリックするとカラーパレットが表示されるので、グラデーションの開始カラーを指定する。

カラーパレットで色を指定すると、一時的に設定画面が消えてしまうが、BlueGriffon上でクリックすると設定画面が表示される。

同じ要領でグラデーションの終点色を指定する。
その際、設定画面が再表示されるまで結構な時間がかかるが、エラーではないので、BlueGriffonを選択した状態のまま、設定画面が再表示されるまで忍耐強く待つ。

「長さ」を空白にしていると自動設定されるが、指定する場合は数値を入れた後に「単位」を選択する。

「設定」が完了したら「OK」をクリック。
うまく行けば指定した箇所にグラデーションが反映される。

{
background-image: repeating-linear-gradient(#始点色コード, #終点色コード);
}

作成されるコードは一行のみで、使用するカラーコードさえわかれば、上記のコードを追加したほうが手っ取り早い。
ただ、ここで「ID」が必要になる。

グラデーションを追加したい箇所をクリックした後、「ソース」を表示すると。「id =”BG_xxxxxxxxxxxx”」という記述があれば、それが「ID」。

選択した箇所にIDらしきものが見当たらない時は、一旦「プレビュー」に戻って、適当に背景色を設定してから、再度ソースを確認するとIDが追加されている。

追加されたIDを確認し、そのままページを上にスクロールしていくと、追加したIDで「background-color:」という表記が出てくるので、ここの { から } までのコードを前述のグラデーションのコードに置き換え、「プレビュー」に戻ると背景色が指定したグラデーションになっているはず。

背景画像を設定する場合は、グラデーションと同じ要領で「背景画像を追加する」を選択し、フォルダアイコンをクリックして背景にする画像を指定したら「OK」。

画像を追加するとデフォルトで「要素内に収める」が選択されているので、「大きさ」の項目で任意の表示設定を選択。
大きい画像を小紋柄のように並べて表示したい時は「大きさを選択」で任意の数字と単位を入力する。

大きさの感覚が全くわからない時は、取り敢えず「30px」くらいで設定すると良いかも。

体裁

フォントの大きさや文字揃え、装飾、行高の指定などは「一般」の項目で設定する。

Wordなどと同じ似たような感じで設定できる。
ただ、ここでもマージンなどの設定はソースを直接編集する必要がある、

px と em 、%などは絶対値と相対値の違いが有り、レスポンシブデザインが推奨されてからは相対値の使用が増えているものの、相対値は感覚が掴みにくいので、取り敢えずは絶対値の「px」を使用して作成したほうが分かりやすいかも。

「行高」を30px、「中央揃え」、文字の太さを「標準」に指定した状態。

マージンやパディングなどの設定は「ALL PROPERTIES」で可能。

BlueGriffonの左サイドにはツールバーがあり、文字装飾や記号付きリスト、文字揃えなどが行えるが、スタイル プロパティで設定するのと基本的に同じ。

フロート(float)

フロートは指定した画像などの要素を左右に寄せ、続く内容が「回り込む」設定。
雑誌などでよく見る構成で、ウェブサイトをパソコンで閲覧していた時代には、よく使用されていた。

指定するには「位置とレイアウト」の項目にある「フロート」で「左・右のフロート」と「フロートしない」のアイコンを選択。

左フロートにすると画像が左により、文章が画像の右側に回り込む。

ただ、スマホでの閲覧を考慮した場合、フロートは決して見やすい構成ではないため、最近はフロートを使用しないデザインが多い。

文章の作成

WordやPowerPointなどでは「見出し」や「本文」の書式を設定し、文書の体裁を整えるが、HTMLでは「見出し」の順位がSEO的に結構重要で、ページのタイトル的な部分が「見出し1」、サブタイトルが「見出し2」といった具合に、基本的にはページの内容を表すキーワードに「見出し」を使用する。
Googleなどのクルーラーはページの内容を読み込む際に、この「見出し」とページ内の文字列を認識するらしい。
ただ、「見出し1」を一番大きなサイズにする必要はなく、見た目ではなく重要度に合わせて設定するのがポイント。

見出しや段落の設定はBlueGriffonの左上にある「書式選択」のドロップダウンリストから選択する。

 

見出しの書式を設定する項目はなく、文字色やフォントサイズを変更する場合はスタイル プロパティで変更することになるが、「ソース」で見出し(h1~)箇所を修正すれば変更可能。

部分的にでもCSSを修正すると、サイトの表現力が向上したりする。

画像の挿入

画像挿入時に画像サイズやマージンの設定項目がないので、画像配置後に「ALL PROPERTIES」で設定が必要。

上部の画像アイコンをクリック。
または、メニューの「挿入」→「画像」を選択。

「画像の場所」でフォルダアイコンをクリックして挿入する画像を指定。
「URLをページ対して相対にする」にチェックを入れる。

Title代替文字列を入力したら「OK」をクリック。

ヘッダー部分に挿入した画像は、タイトル文字との間に余白があり、本文との間が狭すぎてバランスが悪い。

画像を選択した状態で「ALL PROPERTIES」を展開し、「+」をクリックして「margin」を追加する。

上部の余白を削減するため「margin-top」の値を「-16px」、本文との間隔を開けるため「margin-bottom」の値を「20px」で設定。

タイトルとの間隔が詰まり、本文との間隔が広くなる。

挿入した画像のサイズを変更する場合は、「ALL PROPERTIES」で「width」を追加して任意の幅を指定する。
上図のようにページの横幅いっぱいに合わせるなら「Width」の値を「100%」にする。

ビデオの挿入

ビデオの挿入も基本的には画像と同じ。
YouTubeから動画を引っ張ってくるのではなく、動画ファイルは画像などと同様に素材としてフォルダ内に保存が必要。

上部のビデオカメラアイコンをクリックし、挿入する動画ファイルを選択すると、設定画面が開くので、ページに挿入する際のプレーヤーのサイズと、「ビデオの制御コントロールを表示する」「自動再生」「繰り返し」の3項目に任意にチェックを入れて「OK」をクリック。

「現在のフレームをポスターとして使用する」に関しては、テスト環境化でJavaScriptのエラーが発生して使用できなかった。

「プレビュー」では挿入した動画の再生も可能。

ただし、動画ファイルはサイズが大きいため、無料のレンタルサーバではアップロード可能なファイルサイズを超えていることが多く、通常はYouTubeなどへ一旦アップした後、埋め込みコードをソースに追加するのが一般的かも。

リンクの挿入

リンクにはページ内に移動するものと、ページ外に移動するものがあり、ページ内のリンクには「アンカー」を使用し、ページ外のリンクは絶対URLを使用する。
いずれの場合も、リンクを追加する文字列を選択した状態で、メニューやコンテキストメニュー(右クリックメニュー)から「リンクの挿入または編集」を選択する。

リンクを挿入する場合は、対象となる文字列や画像などを選択。

上部のリンクアイコンをクリック。
または、コンテキストメニュー(右クリックメニュー)から「リンクの挿入または編集」を選択。

「対象」の部分にリンク先のURLを入力し、「タイトル」も入力。

「リンクを開く場所」では「現在のウインドウ」「新規ウインドウ」などが選択可能。
フレームについてはHTML5で廃止になったので使用しないほうが良いらしい。

新規ページ ウィザードで指定したリンクの体裁で表示される。

アンカー

「アンカー」はURLなどがない場所に、無理やり錨を下ろして印を作るようなもの。

ここをクリック すると、このページの「使用方法」まで戻り、「使用方法」をクリックすると、ここに戻ってくる。

アンカーは任意のIDを設定し、ページ内であればリンクに「#任意のID」を入力すれば作成でき、他ページのアンカーへ移動させるにはページのURLの後に「#任意のID」を追加すればOK。

アンカーを作成するには、任意の箇所をクリックし、上部のアンカーアイコンをクリック。
アンカーの場合はリンクのように文字列や画像などの要素を選択する必要はない。

「アンカーの名前」を求められるので、半角英数で任意の文字列を入力して「OK」をクリック。

アンカーが挿入されるとプレビュー画面で錨のマークが表示される。

ブラウザでの確認

作成したページがブラウザでどのように表示されるのか、確認作業は必須。

ブラウザを起動するには、上部の地球アイコンをクリック。

「プログラムを起動」の設定画面が開くので、「他のプログラムを選択」の「選択」をクリックし、インストールされているブラウザの実行ファイルを指定する。

Google Chromeブラウザの場所:
C:¥Program Files (x86)¥Google¥Chrome¥Application

Firefoxの場所:
C:¥Program Files (x86)¥Mozilla Firefox

IEの場所:
C:¥Program Files¥internet explorer

Edgeの場所:
C:¥Windows¥SystemApps¥Microsoft.MicrosoftEdge_*******

※上記はいずれもWindows10の場合。

ブラウザを指定して「リンクを開く」をクリックすると、ページがブラウザで表示される。

今回 BlueGriffonで作成したテストページがこちら





WEBオーサリング

KompoZerのインストールと使い方

KompoZer(コンポーザー)はWYSIWYG(ウィジウィグ)でウェブページが作成できるウェブオーサリングソフト。 コ … “KompoZerのインストールと使い方” の続きを読む

BlueGriffonのインストールと使い方

BlueGriffonは、Mozilla Composerをベースにした「Nvu」の派生ソフトで、開発が継続されている貴 … “BlueGriffonのインストールと使い方” の続きを読む