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

基本機能を無料で利用可能な WYSIWYG 対応のウェブオーサリングソフト

BlueGriffon はオープンソースのウェブオーサリングソフト Nvu の開発者 ダニエル・グラッツマン氏 ( Disruptive Innovations SAS ) が開発している Mozilla Composer をベースにした WYSIWYG 対応のウェブオーサリングソフトで、HTML5 や CSS など基本部分は無料で使用でき、テンプレートやレスポンシブデザインなどの機能は有料版 ( 75ユーロ ) で提供されている。

WYSIWYG ( ウィジウィグ）

WYSIWYG は What You See Is What You Get ( 見たままをGETできる ) の略で、ワープロソフトやグラフィックソフトのように完成時のイメージを編集して Webページを作成できる。

Nvu は 2006年に開発が中止になり、Nvu のコードを引き継いだフリーソフト KompoZer は 2010年にリリースされたベータ版 0.83 を最後に開発が止まっている。

システム要件

バージョン 3.1 現在

OS：Windows 7/ 8 / 10 ( 64bit )

バージョン 3.1 より 32bit の Windows は未サポート。

ソフトの入手先

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

BlueGriffon のインストール

BlueGriffon のインストーラーにアドウェアやスパイウェアは含まれていない。

ダウンロードページから Windows 7, 8, 10 をクリックしてインストーラーをダウンロード。

ダウンロードしたインストーラーを起動し、ユーザーアカウント制御のダイアログが表示されたら「はい」で許可。

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

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

スタートメニューへの登録もデフォルト設定で「 Next 」。

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

デスクトップにショートカットアイコンを作成するならチェックを入れて「 Next 」。

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

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

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

BlueGriffon の使い方

BlueGriffon は WYSIWYG をサポートしているが、コードの編集をしないとデザインに大きな制限がかかるため CSS や HTML の知識は必要。

HTML – HyperText Markup Language

ウェブブラウザにテキストや画像などを表示したりリンクで紐付けを行うためのマークアップ言語。
BlueGriffon ではワープロソフトのようにテキストを入力すると HTML で記述される。

CSS – Cascading Style Sheets

ウェブページのデザインを指示する仕様書で「スタイルシート言語」で記述する。
BlueGriffon ではテキストの書式設定を行うと自動的に CSS が作成されるが、CSS を編集することでデザインは幅は大きく広がる。

相対パスと絶対パス

相対パスは現在の場所を起点にリンク先の場所を指定し、絶対パスはトップからの URL を指定する。
BlueGriffon で画像を挿入したりリンクを作成する場合は「相対パス」で記述される。

ファイルの保存先

ウェブページが完成するとホスト ( ウェブサーバ ) の初期フォルダ ( ルートディレクトリ ) の中にページの表示に必要な素材と作成したウェブページを全てアップロードするため、相対パスのリンクが切れないようページを作成する前にフォルダ分けが必須で、フォルダ内のファイルやサブフォルダのファイル名には全て半角英数を使用する。

新規作成

新規ページの作成時には使用するマークアップ言語やメタ情報などを設定する。

新規ページを作成する場合はメニューバーの ファイル から 新規作成 か 新規作成ウィザード を選択。

新規作成ウィザードを利用するとページの基本設定が行える。

新規作成ウィザード を選択するとマークアップ言語の設定画面になるので、現在推奨されている HTML5 を選択して「次へ」。

文書のプロパティでは meta要素 になる各項目を入力する。

タイトル : ブラウザのタブや検索結果に表示されるページのタイトル
著者 : ページの制作者
説明 : ページの概要を詳しく記載
キーワード : ページに関連したキーワードを入力 ( キーワードはカンマ（,）で区切る )
言語 : 言語選択から日本語を選択。
文字セット : Unicode ( UTF-8 )
行の方向 : 指定なし

行の方向 が完全に表示されていないがデフォルト設定で問題ない。

文字色やリンクの配色を指定。

変更する場合は 色を指定する にチェックを入れて任意のカラーを選択する。

背景に画像を表示させる場合はフォルダアイコンをクリックして任意の画像ファイルを指定、背景画像が不要であれば未設定のまま「次へ」。

設定した背景画像は タイトル で None ( 単体 )・Horizontally ( 横並び )・Vertically ( 縦並び )・Both ( 全体 ) から配置を指定。
スクロール では指定した背景をスクロール時に移動させるか固定したままにするか選択。

ページレイアウトではページ幅やサイドバーの設定が可能で、追加のリストから任意のレイアウトを追加し、設定が終了したら「完了」をクリック。

レイアウトが決まっていない場合は 1列 , 100% を追加。

ページの幅を固定する場合は幅のドロップダウンリストから選択し、サイドバーを作成する場合は サイドバー のドロップダウンリストから位置とサイズを選択。

サンプルテキストが記載された新規ページが表示される。

新規ページを作成したらメニューバーの ファイル から保存を選択してファイルを保存。

保存時のファイル名は必ず半角英数を使用。

書式設定 – CSS の編集

BlueGriffon の無償版には CSS エディタが付属していないため CSS を直接編集する場合は ソース の修正を行う。

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

右サイドバーに スタイルプロパティ が表示される。

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

スタイルプロパティ で書式設定をする場合は ID やクラスの設定が必要だが、BlueGriffon は自動設定機能を実装している。

ID やクラスの自動設定を有効にするにはメニューバーの ツール から オプション を開き、スタイル の CSSの編集方法 で自動にチェックを入れる。

ID やクラスが分からないビギナーは有効にしておくことを推奨。

書式を適用する範囲を選択後 スタイルプロパティ で設定を行う。

フォント設定

フォントサイズ・文字揃え・装飾・行高などは一般の項目で設定する。

MS Word などと同じ操作感で設定できる。

マージンやパディングなどは ALL PROPERTIES で設定でき、該当項目の数値をダブルクリックすると編集可能になる。

文字装飾・記号付きリスト・文字揃えなどは左サイドのツールバーでも設定可能。

前景色・背景色

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

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

グラデーションを使用する場合は 背景画像 の「＋」をクリックして線状または 放射状 を選択。

フロート ( float )

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

指定するには 位置とレイアウト の項目にある フロート でアイコンを選択。

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

直接編集

CSS の記述が可能であればスタイルプロパティで設定せず ソース を直接編集できる。

表示を プレビュー から ソース に切り替えて CSS を編集する。

コンテンツの作成

コンテンツの作成は MS Word や LibreOffice Writer のようなワープロソフトと同じ操作感で作成できる。

見出し

ページのタイトル的な部分に 見出し1 、サブタイトルが 見出し2 といった具合にページの内容を表すキーワードに 見出し を使用する。

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

見出しの書式は スタイルプロパティ で設定する。

画像の挿入

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

ツールアイコンの画像をクリックするか、メニューバーの挿入から画像を選択。

画像の場所 でフォルダアイコンをクリックして挿入する画像を指定し、URLをページ対して相対にする にチェックを入れて、タイトル と 代替文字列 ( alt属性 ) を入力。

画像の周囲に余白を追加する場合は画像を選択した状態で ALL PROPERTIES を展開、「＋」をクリックして margin を追加する。

挿入した画像のサイズを変更する場合は ALL PROPERTIES に width を追加して任意の幅を指定。

ビデオの挿入

動画ファイルを直接挿入する場合は画像と同様に素材としてフォルダ内に保存する。

動画ファイルがアップロード可能なファイルサイズを超えている場合は、YouTube などへ一旦アップした後埋め込みコードをソースに追加する。

ツールアイコンの ビデオ をクリックするか、メニューバーの挿入から ビデオ を選択。

ビデオファイルの場所 で挿入する動画を指定。

幅でページに挿入する際のプレーヤーのサイズを入力後、ビデオの制御コントロールを表示する にチェックを入れ、任意で 自動再生・繰り返し を有効にして「 OK 」で確定。

ビデオの制御コントロールを表示する を無効にすると動画が表示されない。

リンクの挿入

リンクにはサイト内に移動するものとサイト外に移動するものがあり、基本的にサイト内のリンクには 相対パス を使用し、サイト外のリンクは 絶対パス を使用する。

リンクを追加する文字列や画像を選択した状態でツールアイコンの リンク をクリックするか、メニューバーの挿入から リンク を選択。

対象の部分にリンク先の URL と タイトル を入力。

サイト内の別ページに移動する場合は URL をページに対して相対にする にチェックを入れる。

リンクを開く場所 では 現在のウインドウ・新規ウインドウ などが選択可能。

アンカー

アンカー は同一ページ内など URL などがない場所に印を作るもので、見出し などに ID を設定して作成する。

アンカーを追加するテキストを選択して、ツールアイコンの アンカー をクリックするか、メニューバーの挿入から アンカー を選択。

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

ページ内に作成したアンカーへは任意のテキストを選択して リンク を作成し、対象に #( 設定したID ) を入力すれば作成できる。

他ページのアンカーへ移動させるにはページ URL の後に # アンカーID を追加。

ブラウザでの確認

ページがある程度できたらブラウザで表示確認を行う。

ツールアイコンから「ブラウザ」を選択。

現在は Chrome / Edge / Brave / Vivaldi などの Chromium 系と Firefox が主流なので確認は双方のブラウザで行う。

実行ファイルの場所

Google Chrome
C:\Program Files\Google\Chrome\Application
Firefox
C:\Program Files\Mozilla Firefox
Microsoft Edge
C:\Program Files (x86)\Microsoft\Edge\Application

起動時の不具合

エラーメッセージ XMLパースエラー：定義されていない実態が使用されています。 が表示されてBlueGriffon が起動しない場合は、 BlueGriffon のプロファイルが格納されている Disruptive Innovations SARL フォルダを削除すると回避できる。

Disruptive Innovations SARL は隠しフォルダになっている Roaming フォルダ内にあるので、ファイル名を指定して実行( Win + R キー ) で %appdata% と入力してフォルダを開く。

C:\Users\( ユーザー名 )\AppData\Roaming\Disruptive Innovations SARL\BlueGriffon

BlueGriffon を終了後 Roamingフォルダから Disruptive Innovations SARL をフォルダを削除する。

Disruptive Innovations SARL は BlueGriffon 起動時に自動生成されるため、再度 BlueGriffon を立ち上げると通常よりも起動に時間を要する。

しばらく待っても BlueGriffon が起動しない場合は起動を再試行。