スポンサーリンク

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

BlueGriffon-icon

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

BlueGriffon は Mozilla Composer をベースにした  WYSIWYG 対応の ウェブオーサリングソフトで、HTML5 や CSS など 基本部分は 無料で使用でき、テンプレート や レスポンシブデザインなどの 機能は 有料版 ( 75ユーロ ) で 提供されている。

WYSIWYG ( ウィジウィグ)
WYSIWYG は What You See Is What You Get ( 見たままをGETできる ) の略で、ワープロソフト や グラフィックソフトのように 完成時のイメージを編集して Webページを作成できる。
BlueGriffon は オープンソースの ウェブオーサリングソフト「 Nvu 」と同じ ダニエル・グラッツマン氏 が開発 ( ダニエル・グラッツマン氏 が設立した フランスのソフトウェアベンダー「 Disruptive Innovations SAS 」の製品 ) しており、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 」をクリックして インストーラーをダウンロード。

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

bluegriffon-002

ユーザーアカウント制御のダイアログが表示されたら「 はい 」で許可。

BlueGriffonに マルウェア等は含まれていないが、デジタル署名がされていない インストーラーには リスクがあるため インストールの際は セキュリティ対策を推奨。 

bluegriffon-003

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

BlueGriffon Web Editor 002

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

BlueGriffon Web Editor 003

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

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

BlueGriffon Web Editor 004

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

BlueGriffon Web Editor 005

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

BlueGriffon Web Editor 006

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

bluegriffon-004

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

ブラウザの設定

BlueGriffon で作成した ページを ウェブブラウザ で確認できるようにするため インストールしているブラウザ を設定する。

BlueGriffon076

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

BlueGriffon Web Editor 077

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

実行ファイルの場所
Google Chrome
C:\Program Files\Google\Chrome\Application
Firefox
C:\Program Files\Mozilla Firefox
Microsoft Edge
C:\Program Files (x86)\Microsoft\Edge\Application

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 Web Editor 014

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

BlueGriffon Web Editor -011

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

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

BlueGriffon Web Editor 017

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

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

BlueGriffon Web Editor 018

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

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

BlueGriffon Web Editor 024

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

レイアウトが決まっていない場合は「 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をページ対して相対にする 」にチェックを入れて「 Title 」と「 代替文字列 ( alt属性 ) 」を入力。

bluegriffon-023

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

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

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

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

bluegriffon-024

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

bluegriffon-027

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

BlueGriffon Web Editor -026

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

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

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

BlueGriffon Web Editor -028

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

BlueGriffon Web Editor -030

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

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

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

bluegriffon-033

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

BlueGriffon068

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

bluegriffon-034

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

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

ブラウザでの確認

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

BlueGriffon076

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

bluegriffon-035

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

IE は 2022年 6月 にサポート終了。

起動時の不具合

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

bluegriffon080

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

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

bluegriffon-036

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

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

 





関連記事

BlueGriffon-icon

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

基本機能を無料で利用可能な WYSIWYG 対応のウェブオーサリングソフト BlueGriffon は Mozilla Composer をベースにした  WYSIWYG 対応の ウェブオーサリングソフトで、HTML5 […]

KompoZer-icon

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

ウェブページを作成する無料のウェブオーサリングソフト KompoZer ( コンポーザー ) は WYSIWYG ( ウィジウィグ ) で ウェブページが作成できるウェブオーサリングソフト。 マークアップ言語 ( コンピ […]





タイトルとURLをコピーしました