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

BlueGriffon-3.1-icon

基本機能を無料で利用可能な 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 のインストーラーに アドウェア や スパイウェアは含まれていない。

bluegriffon-001

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

BlueGriffon-034-1

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

BlueGriffon-035-1

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

BlueGriffon-036-1

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

BlueGriffon-037

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

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

BlueGriffon-038

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

BlueGriffon-039

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

BlueGriffon-040

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

BlueGriffon-041

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

BlueGriffon の使い方

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

HTML – HyperText Markup Language

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

CSS – Cascading Style Sheets

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

相対パス と 絶対パス

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

ファイルの保存先

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

新規作成

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

BlueGriffon Web Editor -005

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

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

BlueGriffon-042

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

BlueGriffon Web Editor -011

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

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

BlueGriffon-043

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

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

BlueGriffon-044

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

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

BlueGriffon-045

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

レイアウトが決まっていない場合は 1列 , 100% を追加。
ページの幅を固定する場合は のドロップダウンリストから選択し、サイドバーを作成する場合は サイドバー のドロップダウンリストから位置とサイズを選択。

BlueGriffon Web Editor -010

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

BlueGriffon Web Editor -008

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

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

書式設定 – CSS の編集

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

BlueGriffon Web Editor 027

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

bluegriffon-009

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

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

BlueGriffon Web Editor 032

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

 ID や クラス の自動設定を有効にするには メニューバーの ツール から オプション を開き、スタイルCSSの編集方法自動 にチェックを入れる。
ID や クラス が分からない ビギナーは 有効にしておくことを推奨。

bluegriffon-013

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

フォント設定

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

bluegriffon-014

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

bluegriffon-016

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

bluegriffon-017

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

前景色・背景色

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

BlueGriffon031

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

BlueGriffon033

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

フロート ( float )

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

BlueGriffon062

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

bluegriffon-018

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

直接編集

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

bluegriffon-020

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

コンテンツの作成

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

見出し

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

bluegriffon-019

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

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

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

bluegriffon-025

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

bluegriffon-022

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

bluegriffon-023

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

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

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

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

bluegriffon-024

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

bluegriffon-027

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

BlueGriffon Web Editor -026

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

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

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

BlueGriffon Web Editor -028

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

BlueGriffon Web Editor -030

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

サイト内 の別ページに移動する場合は URL をページに対して相対にする にチェックを入れる。
リンクを開く場所 では 現在のウインドウ新規ウインドウ などが選択可能。
アンカー

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

bluegriffon-033

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

BlueGriffon-046

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

bluegriffon-034

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

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

ブラウザでの確認

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

BlueGriffon076

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

bluegriffon-035

現在は 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 フォルダを削除すると回避できる。

bluegriffon080

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

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

bluegriffon-036

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

Disruptive Innovations SARL は BlueGriffon 起動時に自動生成されるため、再度 BlueGriffon を立ち上げると 通常よりも起動に時間を要する。
しばらく待っても BlueGriffon が起動しない場合は起動を再試行。

関連記事

BlueGriffon-3.1-icon

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

基本機能を無料で利用可能な WYSIWYG 対応のウェブオーサリングソフト BlueGriffon は オープンソースの ウェブオーサリングソフト Nvu の開発者 ダニエル・グラッツマン氏 ( Disruptive I […]

KompoZer-0.8b-icon

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

ウェブページを作成する無料のウェブオーサリングソフト KompoZer は Fabien Cazenave 氏が開発している ウェブオーサリングソフトで、ワープロ や グラフィックソフトの操作に近い形で 視覚的に作業する […]