基本機能を無料で利用可能な WYSIWYG 対応のウェブオーサリングソフト
BlueGriffon は オープンソースの ウェブオーサリングソフト Nvu の開発者 ダニエル・グラッツマン氏 ( Disruptive Innovations SAS ) が開発している Mozilla Composer をベースにした WYSIWYG 対応の ウェブオーサリングソフトで、HTML5 や CSS など 基本部分は 無料で使用でき、テンプレート や レスポンシブデザインなどの 機能は 有料版 ( 75ユーロ ) で 提供されている。
WYSIWYG ( ウィジウィグ)
WYSIWYG は What You See Is What You Get ( 見たままをGETできる ) の略で、ワープロソフト や グラフィックソフトのように 完成時のイメージを編集して Webページを作成できる。
システム要件
バージョン 3.1 現在
OS:Windows 7/ 8 / 10 ( 64bit )
ソフトの入手先
BlueGriffon のインストール
BlueGriffon のインストーラーに アドウェア や スパイウェアは含まれていない。
ダウンロードページから Windows 7, 8, 10 をクリックして インストーラーをダウンロード。
ダウンロードした インストーラーを起動し、ユーザーアカウント制御のダイアログが表示されたら「 はい 」で許可。
セットアップウィザードが開始するので「 Next 」。
インストール先 に こだわりがなければ デフォルト設定で「 Next 」。
スタートメニューへの登録も デフォルト設定で「 Next 」。
デスクトップにショートカットアイコンを作成するならチェックを入れて「 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 )
行の方向 : 指定なし
文字色 や リンクの配色 を指定。
背景に画像を表示させる場合は フォルダアイコンをクリックして 任意の画像ファイルを指定、背景画像が不要であれば 未設定のまま「 次へ 」。
スクロール では 指定した背景をスクロール時に移動させるか 固定したままにするか選択。
ページレイアウトでは ページ幅 や サイドバー の設定が可能で、 追加 のリストから任意のレイアウトを追加し、設定が終了したら「 完了 」をクリック。
サンプルテキストが 記載された 新規ページが表示される。
新規ページを作成したら メニューバーの ファイル から 保存 を選択して ファイルを保存。
書式設定 – CSS の編集
BlueGriffon の無償版 には CSS エディタが付属していないため CSS を 直接編集する場合は ソース の修正を行う。
メニューバーの パネル から スタイル プロパティ にチェックを入れる。
右サイドバーに スタイル プロパティ が表示される。
スタイル プロパティ で 書式設定をする場合は ID や クラス の設定が必要だが、BlueGriffon は自動設定 機能を実装している。
書式を適用する範囲を選択後 スタイル プロパティ で設定を行う。
フォント設定
フォントサイズ・文字揃え・装飾・行高などは 一般 の項目で設定する。
MS Word などと同じ操作感で 設定できる。
マージン や パディングなどは ALL PROPERTIES で設定でき、該当項目の数値をダブルクリックすると 編集可能になる。
文字装飾・記号付きリスト・文字揃えなどは 左サイドのツールバーでも設定可能。
前景色・背景色
ページヘッダー や 本文などの文字色や背景色の変更は スタイル プロパティ の 色 で行う。
前景色は 文字色 で、背景色のほかに 画像を背景に設定したり 背景色にグラデーションを使用することもできる。
グラデーションを使用する場合は 背景画像 の「 + 」をクリックして 線状 または 放射状 を選択。
フロート ( float )
フロートは指定した画像などの要素を左右に寄せ 続く内容が 回り込む 設定で、ウェブサイトをパソコンで閲覧していた時代に よく使用されていた。
指定するには 位置とレイアウト の項目にある フロート で アイコンを選択。
左フロートにすると画像が左により 文章が画像の右側に回り込む。
直接編集
CSS の記述が可能であれば スタイル プロパティで設定せず ソース を 直接編集できる。
表示を プレビュー から ソース に切り替えて CSS を編集する。
コンテンツの作成
コンテンツの作成は MS Word や LibreOffice Writer のような ワープロソフトと 同じ 操作感 で作成できる。
見出し
ページのタイトル的な部分に 見出し1 、サブタイトルが 見出し2 といった具合に ページの内容を表す キーワードに 見出し を使用する。
見出し や 段落の設定は 左上にある 書式選択 のドロップダウンリストから選択する。
画像の挿入
画像 は 挿入時に 画像サイズ や マージンの設定項目がないので 配置後に ALL PROPERTIES で設定が必要。
ツールアイコンの 画像 をクリックするか、メニューバーの 挿入 から 画像 を選択。
画像の場所 で フォルダアイコンをクリックして 挿入する画像を指定し、URLをページ対して相対にする にチェックを入れて、タイトル と 代替文字列 ( alt属性 ) を入力。
画像の周囲に余白を追加する場合は 画像を選択した状態で ALL PROPERTIES を展開、「 + 」をクリックして margin を追加する。
ビデオの挿入
動画ファイル を直接 挿入する場合は 画像と同様に素材としてフォルダ内に保存する。
ツールアイコンの ビデオ をクリックするか、メニューバーの 挿入 から ビデオ を選択。
ビデオファイルの場所 で 挿入する動画を指定。
幅 で ページに挿入する際のプレーヤーのサイズを入力後、ビデオの制御コントロールを表示する にチェックを入れ、任意で 自動再生・繰り返し を有効にして「 OK 」で確定。
リンクの挿入
リンクには サイト内に移動するものと サイト外に移動するものがあり、基本的に サイト内のリンクには 相対パス を使用し、サイト外のリンクは 絶対パス を使用する。
リンクを追加する文字列 や 画像 を選択した状態で ツールアイコンの リンク をクリックするか、メニューバーの 挿入 から リンク を選択。
対象 の部分にリンク先の URL と タイトル を 入力。
アンカー
アンカー は 同一ページ内など URL などがない場所に 印を作るもので、見出し などに ID を設定して 作成する。
アンカーを追加する テキストを選択して、ツールアイコンの アンカー をクリックするか、メニューバーの 挿入 から アンカー を選択。
アンカーの名前 を求められるので 半角英数で任意の文字列を入力して「 OK 」をクリック。
ページ内 に作成した アンカーへは 任意のテキストを選択して リンク を作成し、 対象 に #( 設定したID ) を入力すれば作成できる。
ブラウザでの確認
ページ が ある程度 できたら ブラウザ で表示確認 を行う。
ツールアイコンから「 ブラウザ 」を選択。
現在は Chrome / Edge / Brave / Vivaldi などの Chromium 系 と Firefox が主流 なので 確認は 双方のブラウザで行う。
実行ファイルの場所
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 をフォルダを削除する。
関連記事

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

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