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

BlueGriffon-3.1-icon

BlueGriffon の特徴

  • 基本機能を無料で利用可能な WYSIWYG 対応のウェブオーサリングソフト
  • Mozilla Composer をベースに開発
  • HTML5や CSS をサポート

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

開発元

  • 開発元:Disruptive Innovations SAS(ダニエル・グラッツマン氏) 
  • 開発元の拠点:フランス
ダニエル・グラッツマン氏は オープンソースのウェブオーサリングソフト Nvuの開発者。

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

ダウンロード

BlueGriffonの公式サイトは https 未サポートのため、Firefoxで HTTPS-Onlyモードが有効だとアクセスがブロックされる。

システム要件

  • バージョン:3.1
  • OS:Windows 7/ 8 / 10(64bit)

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

インストール

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

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

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

bluegriffon-009

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

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

BlueGriffon Web Editor 032

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

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

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

bluegriffon-013

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

フォント設定

bluegriffon-014

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

bluegriffon-016

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

bluegriffon-017

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

前景色・背景色

BlueGriffon031

ページヘッダーや本文の文字色や背景色の変更は スタイルプロパティ で編集し、前景色は 文字色 、背景色には画像やグラデーションを設定できる。

BlueGriffon033

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

フロート(float)

BlueGriffon062

フロートは指定した画像などの要素を左右に寄せてテキストが回り込む表示方法で、指定するには 位置とレイアウト の項目にある フロート で アイコンを選択。

bluegriffon-018

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

直接編集

bluegriffon-020

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

コンテンツの作成

見出し

bluegriffon-019

ページのタイトル的な部分に見出し1 、サブタイトルが 見出し2 といった具合に ページの内容を表す キーワードに 見出し を使用し、見出しや段落の設定は左上にある 書式選択 のドロップダウンリストから選択する。

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

画像の挿入

bluegriffon-025

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

bluegriffon-022

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

bluegriffon-023

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

挿入した画像のサイズの変更は ALL PROPERTIESwidth を追加して任意の幅を指定。

ビデオの挿入

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 が起動しない場合は起動を再試行。
関連記事
KompoZer-0.8b-icon

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

Index KompoZer の特徴開発元ダウンロードシステム要件インストール設定KompoZer の使い方 KompoZer の特徴 ウェブページを作成する無料のウェブオーサリングソフト WYSIW…