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

BlueGriffon-icon
LINEで送る
Pocket

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

BlueGriffon は、Mozilla Composerをベースにした「 Nvu 」の派生ソフトで、開発が継続されている貴重なWYSIWYG(ウィジウィグ)対応のウェブオーサリングソフト。
基本部分は無料で使用でき、現バージョンは日本語にも対応している。

すでに「 Nvu 」は開発が終了しており、同じ派生ソフトでは「 KompoZer 」も存在していたが、2010年のベータ版0.83を最後に開発が止まっているため、Nvuの後継ソフトで生き残っているのは BlueGriffon のみになる。

HTML5 や基本的な CSS も無料で利用可能だが、テンプレートやレスポンシブデザインなど様々な機能は有料版(75ユーロ)にて提供されている。

マークアップ言語(HTML)やカスケードスタイルシート(CSS)を理解していなくても、ワープロやグラフィックソフトの操作に近い形で視覚的に作業することができるので、取り敢えず「 ウェブページを作ってみる 」という場合には最適。

システム要件

バージョン3.0.1現在

OS:Windows 7/ 8 / 10(32bit & 64bit)

ソフトの入手先

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



BlueGriffon のインストール

有償版の場合はライセンスを購入して制限されている機能をアクティベートするので、無償版も有償版もダウンロードするインストーラーは同じ。
セットアップウィザードは日本語化されていないが、アドウェアなどのインストール項目もなく、インストール作業は至ってシンプル。

BlueGriffon Web Editor 008

ダウンロードのリンク先から使用するPCのアーキテクチャに合わせて、Windowsの32ビットまたは64ビットのリンクをクリック。

BlueGriffon Web Editor 001

ダウンロードしたインストーラーを起動し、ユーザーアカウント制御を許可すると、セットアップウィザードが開始するので「 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 Web Editor 007

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

BlueGriffon の使い方

WYSIWYGはWhat You See Is What You Get(見たままをGETできる)の略で、ブラウザで表示されるイメージ(見たまま)でWEBページの作成が可能になっているとは言え、デザインなどに大きな制限がかかるため、多少なりともCSSやHTMLの知識が必要になってくる。

HTMLやCSSを勉強する切っ掛けには最適かも。

BlueGriffon Web Editor 013

新規ページを作成する場合は、「 ファイル 」メニューに「 新規作成 」と「 新規作成ウィザード 」があるので、ビギナーは「 新規作成ウィザード 」を選択。

ウィザードではページの基本設定が行える。

BlueGriffon Web Editor 014

文書の種類を選択。
現在は「 HTML5 」の使用が推奨されているらしいので、「 HTML5 」を選択して「 次へ 」。

BlueGriffon Web Editor 015

文書のプロパティでは「 meta要素 」になる各項目を入力する。
meta要素は文書の定義で、最も基本的なSEO(サーチエンジン最適化)対策になる。

「 タイトル 」はブラウザのタブや検索結果に表示されるもので、上図のように「 TEST 」とのみ入力すると、検索結果にも「 TEST 」としか表示されないので、サイト名などを含めた分かりやすものにする。

「 説明 」にはページの概要を、わかりやすく、詳しく記載したほうがSEO的に良いとか。。。
「 キーワード 」についてはページに関連したキーワードを入力し、キーワードはカンマ(,)で区切る。
最近の傾向ではSEO的にキーワードの重要性は低下しているらしい。

BlueGriffon Web Editor 016

「 言語 」は「 言語選択 」をクリックして「 日本語 」を選択すると「 ja 」が表示される。

BlueGriffon Web Editor 017

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

BlueGriffon Web Editor 018

背景に画像を表示させる場合は、フォルダアイコンをクリックして任意の画像ファイルを指定する。

BlueGriffon Web Editor 019

「 タイトル 」の項目には「 None 」「 Horizontally 」「 Vertically 」「 Both 」があり、指定した画像の配置を単体・横並び・縦並び・全体で指定できる。
また、「 スクロール 」は指定した背景をスクロール時に移動させるか、固定したままにするか選択。

BlueGriffon Web Editor 020

最後の設定はページレイアウト。
ページの幅を固定する場合は「 幅 」のドロップダウンリストから選択可能。
タイトル部分に看板画像を表示させる場合、「 ウインドウ幅 」にすると画像の幅を超えたウインドウサイズになると、画像の横に微妙な空白が生じるので、サイズを指定したほうが見た目的に良いかも。

サイドバーを作成する場合は「 サイドバー 」のドロップダウンリストから位置とサイズを選択。

BlueGriffon Web Editor 024

本文スペースの列数を指定する。
「 追加 」をクリックし、ドロップダウンリストから任意のレイアウトを追加していく。
特にレイアウトが決まっていない場合は「 1列,100% 」を追加。

設定が終了したら「 完了 」をクリック。

BlueGriffon Web Editor 025

サンプル文章が入った新規ページが出来上がり。

BlueGriffon Web Editor 023

ページができたら取り敢えず「 ファイル 」→「 保存 」でファイルを保存する。
保存時のファイル名は必ず半角英数を使用。

ファイルの保存先
作成したファイルは完成した時点で、使用した画像などの素材も含めてアップロードが必要になり、相対パスでリンクするためには、全て1つのフォルダ内に入れておく必要がある。

基本的にはホストの初期フォルダ(ルートディレクトリ)の中に、ページの表示に必要な素材などを全てアップするため、フォルダ分けをしっかり行わないと、後からの処理が非常に煩雑になってしまう。
一般的には作成したページそのものを保存するフォルダと素材フォルダを分け、それらのフォルダを格納したカテゴリー別のフォルダなどで整理する。
作成したフォルダ内のファイルやサブフォルダの名称は全て半角英数を使用。

書式設定

フォントのサイズやカラー、インデント、文字間隔などの書式設定はスタイルシート(CSS)を使用するのだが、 BlueGriffon はWordで文書を作成するのと同じような要領で編集すると、自動的にスタイルシートが記述されていく。
ただ、無償版ではCSSエディタは付属していないため、直接編集する場合は「 ソース 」を修正することになる。

BlueGriffon Web Editor 027

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

BlueGriffon Web Editor 026

右サイドにパネルが表示されていない場合は、右端にある上図赤枠部分をクリックするか、カーソルでドラッグするとパネルを引っ張り出せる。

BlueGriffon Web Editor 028

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

BlueGriffon Web Editor 030

基本的に編集する部分をクリックし、マウスカーソルが「 Iビーム 」になっている箇所が選択されるが、「 プレビュー 」の状態では選択移動がスムーズに行われないことがあるため、下部にある「 ソース 」をクリック。
「 ソース 」ではマウスカーソルの位置がマーカーされて表示されるので、確認してから「 プレビュー 」に戻って操作すると良いかも。

BlueGriffon Web Editor 032

CSSをこれから勉強するビギナーであれば、IDやクラスを BlueGriffon が自動的に設定してくれるオプションがあるので「 有効 」にしていると便利。
上部メニューの「 ツール 」→「 オプション 」で「 スタイル 」を選択し、「 CSSの編集方法 」で「 自動 」にチェックを入れる。

本来であればIDやクラスは自分で分かりやすいものを設定したほうが、編集する際に何かと都合が良いのだが、そもそもIDやクラスの概念が分からないと使いようもないので、ビギナーにはオススメ。

また、 BlueGriffon はファイル保存時にバックアップ用の「 .bak 」という拡張子を持つファイルを生成するため、「 オプション 」にある「 文書 」の「 編集機能 」で「 ファイルの保存前にバックアップ(*.bak)を作成する 」のチェックを外しておくと良いかも。

前景色・背景色

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

BlueGriffon031

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

前景色・背景色は「 ◯ 」をクリックするとカラーパレットが開くので、任意の色を指定するだけ。

BlueGriffon033

グラデーションを使用する場合は、「 背景画像 」の「 + 」をクリックして「 線状 」または「 放射状 」を選択。
ただし、グラデーションの作成機能はエラーが発生しやすく、時間もかかるため使用は控えたほうが良いかも。

BlueGriffon034

設定画面が開くので「 + 」をクリック。

BlueGriffon035

上図赤枠部分の楕円アイコンをクリックするとカラーパレットが表示されるので、グラデーションの開始カラーを指定する。

カラーパレットで色を指定すると、一時的に設定画面が消えてしまうが、 BlueGriffon 上でクリックすると設定画面が表示される。

BlueGriffon036

同じ要領でグラデーションの終点色を指定する。
その際、設定画面が再表示されるまで結構な時間がかかるが、エラーではないので、 BlueGriffon を選択した状態のまま、設定画面が再表示されるまで忍耐強く待つ。

「 長さ 」を空白にしていると自動設定されるが、指定する場合は数値を入れた後に「 単位 」を選択する。

BlueGriffon038

「 設定 」が完了したら「 OK 」をクリック。
うまく行けば指定した箇所にグラデーションが反映される。

{
background-image: repeating-linear-gradient(#始点色コード, #終点色コード);
}

作成されるコードは一行のみで、使用するカラーコードさえわかれば、上記のコードを追加したほうが手っ取り早い。
ただ、ここで「 ID 」が必要になる。

BlueGriffon039

グラデーションを追加したい箇所をクリックした後、「 ソース 」を表示すると。「 id ="BG_xxxxxxxxxxxx" 」という記述があれば、それが「 ID 」。

BlueGriffon040選択した箇所にIDらしきものが見当たらない時は、一旦「 プレビュー 」に戻って、適当に背景色を設定してから、再度ソースを確認するとIDが追加されている。

BlueGriffon041

追加されたIDを確認し、そのままページを上にスクロールしていくと、追加したIDで「 background-color: 」という表記が出てくるので、ここの { から } までのコードを前述のグラデーションのコードに置き換え、「 プレビュー 」に戻ると背景色が指定したグラデーションになっているはず。

BlueGriffon043

背景画像を設定する場合は、グラデーションと同じ要領で「 背景画像を追加する 」を選択し、フォルダアイコンをクリックして背景にする画像を指定したら「 OK 」。

BlueGriffon044

画像を追加するとデフォルトで「 要素内に収める 」が選択されているので、「 大きさ 」の項目で任意の表示設定を選択。
大きい画像を小紋柄のように並べて表示したい時は「 大きさを選択 」で任意の数字と単位を入力する。

BlueGriffon045大きさの感覚が全くわからない時は、取り敢えず「 30px 」くらいで設定すると良いかも。

体裁

フォントの大きさや文字揃え、装飾、行高の指定などは「 一般 」の項目で設定する。

BlueGriffon049

Wordなどと同じ似たような感じで設定できる。
ただ、ここでもマージンなどの設定はソースを直接編集する必要がある、

px と em 、%などは絶対値と相対値の違いが有り、レスポンシブデザインが推奨されてからは相対値の使用が増えているものの、相対値は感覚が掴みにくいので、取り敢えずは絶対値の「 px 」を使用して作成したほうが分かりやすいかも。

BlueGriffon050

「 行高 」を30px、「 中央揃え 」、文字の太さを「 標準 」に指定した状態。

BlueGriffon051

マージンやパディングなどの設定は「 ALL PROPERTIES 」で可能。

BlueGriffon060

BlueGriffon の左サイドにはツールバーがあり、文字装飾や記号付きリスト、文字揃えなどが行えるが、スタイル プロパティで設定するのと基本的に同じ。

フロート(float)

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

BlueGriffon062

指定するには「 位置とレイアウト 」の項目にある「 フロート 」で「 左・右のフロート 」と「 フロートしない 」のアイコンを選択。

BlueGriffon061

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

ただ、スマホでの閲覧を考慮した場合、フロートは決して見やすい構成ではないため、最近はフロートを使用しないデザインが多い。

文章の作成

WordやPowerPointなどでは「 見出し 」や「 本文 」の書式を設定し、文書の体裁を整えるが、HTMLでは「 見出し 」の順位がSEO的に結構重要で、ページのタイトル的な部分が「 見出し1 」、サブタイトルが「 見出し2 」といった具合に、基本的にはページの内容を表すキーワードに「 見出し 」を使用する。
Googleなどのクルーラーはページの内容を読み込む際に、この「 見出し 」とページ内の文字列を認識するらしい。
ただ、「 見出し1 」を一番大きなサイズにする必要はなく、見た目ではなく重要度に合わせて設定するのがポイント。

BlueGriffon070

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

BlueGriffon072

 

見出しの書式を設定する項目はなく、文字色やフォントサイズを変更する場合はスタイル プロパティで変更することになるが、「 ソース 」で見出し(h1~)箇所を修正すれば変更可能。

BlueGriffon073

部分的にでもCSSを修正すると、サイトの表現力が向上したりする。

画像の挿入

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

BlueGriffon059

上部の画像アイコンをクリック。
または、メニューの「 挿入 」→「 画像 」を選択。

BlueGriffon054

「 画像の場所 」でフォルダアイコンをクリックして挿入する画像を指定。
「 URLをページ対して相対にする 」にチェックを入れる。

Title代替文字列を入力したら「 OK 」をクリック。

BlueGriffon056

ヘッダー部分に挿入した画像は、タイトル文字との間に余白があり、本文との間が狭すぎてバランスが悪い。

BlueGriffon057

画像を選択した状態で「 ALL PROPERTIES 」を展開し、「 + 」をクリックして「 margin 」を追加する。

上部の余白を削減するため「 margin-top 」の値を「 -16px 」、本文との間隔を開けるため「 margin-bottom 」の値を「 20px 」で設定。

BlueGriffon058

タイトルとの間隔が詰まり、本文との間隔が広くなる。

挿入した画像のサイズを変更する場合は、「 ALL PROPERTIES 」で「 width 」を追加して任意の幅を指定する。
上図のようにページの横幅いっぱいに合わせるなら「 Width 」の値を「 100% 」にする。

ビデオの挿入

ビデオの挿入も基本的には画像と同じ。
YouTubeから動画を引っ張ってくるのではなく、動画ファイルは画像などと同様に素材としてフォルダ内に保存が必要。

BlueGriffon074

上部のビデオカメラアイコンをクリックし、挿入する動画ファイルを選択すると、設定画面が開くので、ページに挿入する際のプレーヤーのサイズと、「 ビデオの制御コントロールを表示する 」「 自動再生 」「 繰り返し 」の3項目に任意にチェックを入れて「 OK 」をクリック。

「 現在のフレームをポスターとして使用する 」に関しては、テスト環境化でJavaScriptのエラーが発生して使用できなかった。

BlueGriffon075

「 プレビュー 」では挿入した動画の再生も可能。

ただし、動画ファイルはサイズが大きいため、無料のレンタルサーバではアップロード可能なファイルサイズを超えていることが多く、通常はYouTubeなどへ一旦アップした後、埋め込みコードをソースに追加するのが一般的かも。

リンクの挿入

リンクにはページ内に移動するものと、ページ外に移動するものがあり、ページ内のリンクには「 アンカー 」を使用し、ページ外のリンクは絶対URLを使用する。
いずれの場合も、リンクを追加する文字列を選択した状態で、メニューやコンテキストメニュー(右クリックメニュー)から「 リンクの挿入または編集 」を選択する。

BlueGriffon063

リンクを挿入する場合は、対象となる文字列や画像などを選択。

BlueGriffon064

上部のリンクアイコンをクリック。
または、コンテキストメニュー(右クリックメニュー)から「 リンクの挿入または編集 」を選択。

BlueGriffon065

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

「 リンクを開く場所 」では「 現在のウインドウ 」「 新規ウインドウ 」などが選択可能。
フレームについてはHTML5で廃止になったので使用しないほうが良いらしい。

BlueGriffon066

新規ページ ウィザードで指定したリンクの体裁で表示される。

アンカー

「 アンカー 」はURLなどがない場所に、無理やり錨を下ろして印を作るようなもの。

ここをクリック すると、このページの「 使用方法 」まで戻り、「 使用方法 」をクリックすると、ここに戻ってくる。

アンカーは任意のIDを設定し、ページ内であればリンクに「 #任意のID 」を入力すれば作成でき、他ページのアンカーへ移動させるにはページのURLの後に「 #任意のID 」を追加すればOK。

BlueGriffon067

アンカーを作成するには、任意の箇所をクリックし、上部のアンカーアイコンをクリック。
アンカーの場合はリンクのように文字列や画像などの要素を選択する必要はない。

BlueGriffon068

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

BlueGriffon069

アンカーが挿入されるとプレビュー画面で錨のマークが表示される。

ブラウザでの確認

作成したページがブラウザでどのように表示されるのか、確認作業は必須。

BlueGriffon076

ブラウザを起動するには、上部の地球アイコンをクリック。

BlueGriffon077

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

Google Chromeブラウザの場所:
C:¥Program Files (x86)¥Google¥Chrome¥Application

Firefoxの場所:
C:¥Program Files (x86)¥Mozilla Firefox

IEの場所:
C:¥Program Files¥internet explorer

Edgeの場所:
C:¥Windows¥SystemApps¥Microsoft.MicrosoftEdge_*******

※上記はいずれもWindows10の場合。

ブラウザを指定して「 リンクを開く 」をクリックすると、ページがブラウザで表示される。

起動時の不具合

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

bluegriffon080

「 Disruptive Innovations SARL 」は隠しフォルダになっている「 Roaming 」フォルダ内にある。

場所は  C:¥Users¥ユーザー名¥AppData¥Roaming になるが、デフォルト設定ではAppDataフォルダが見えないため、「 ファイル名を指定して実行(Win + R キー) 」で 「 %appdata% 」と入力すればRoamingフォルダが開く。

bluegriffon081

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

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

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

 





WEBオーサリング

BlueGriffon-icon

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

基本機能を無料で利用可能なWYSIWYG対応のウェブオーサリングソフト BlueGriffon は、Mozilla Composerをベースにした「 Nvu 」 … “BlueGriffon のインストールと使い方” の続きを読む

KompoZer-icon

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

ウェブページを作成する無料のウェブオーサリングソフト KompoZer (コンポーザー)は WYSIWYG (ウィジウィグ)でウェブページが作成できるウェブオー … “KompoZer のインストールと使い方” の続きを読む





LINEで送る
Pocket