Post on 07-Sep-2020
BlueGriffon3.0 (1/9)
BlueGriffonで作るホームページ(Ver3.0.1)
◆サンプル画面
◆準備作業
①フォルダの作成(マイドキュメントの中)
bxn11xxx-Blue Griffon (先頭は学籍番号)
②サンプル写真のコピー
(以下のフォルダを開き、①の中へフォルダごとコピーする)
[public] → [jugyo] → [kenkou] → [太田] → [情報処理A] → campus-photo
◆作成するファイル (先頭は学籍番号)
「トップページ」 bxn11xxx-top.html
「自己紹介」のページ bxn11xxx-jiko-shoukai.html
「お気に入りスポット1」のページ bxn11xxx-spot1.html
「お気に入りスポット2」のページ bxn11xxx-spot2.html
「おすすめリンク」のページ bxn11xxx-link.html
お気に入りスポット1
おすすめリンク
トップページ 自己紹介
お気に入りスポット2
BlueGriffon3.0 (2/9)
1.Blue Griffon の起動
スタート-すべてのプログラム- BlueGriffon をクリックする
2.Blue Griffonの画面と初期設定
◇文字の入力例
◇設定を変更しておく方がよいもの
メニューのツール-オプションをクリックする
トップページの入力例
バックアップファイルを自動作成しない
(チェックをoffにする)
アンカーを表示する場合はチェックする
BlueGriffon3.0 (3/9)
2-1.ツールバーと文字の設定
新規ページ ファイルを開く 保存
太字 Bold
斜体 Italic
下線 Underline
左揃え 中央揃え 右揃え
前景色と背景色
インデントの設定と解除
表作成 画像挿入 リンク
見出しと段落の設定
見出し1~6
番号が小さいほどレベルが高い
(文字サイズは大きくなる)
CSSスタイル設定
パネル-スタイルプロパティ
デザインを設定する前にスタイル
プロパティを表示させておく
BlueGriffon3.0 (4/9)
2-2.文字の色と背景色の設定
①変更したい行(たとえば「見出し」を設定した行)をクリックする
②スタイルの適用先を「要素名で指定する」にする
③スタイルプロパティの[色]から、前景色(=文字色)または背景色をクリックする
④カラーパレットで色を選択する
2-3.画面全体の背景色の設定
①画面左下の<body>をクリックする(画面全体の文字が選択される)
②スタイルの適用先を「要素名で指定する」を選択する
③背景色を設定する(上記と同様の方法)
②
③
④カラーパレット
※特定の行や一部の文字だけに
スタイルを設定したいとき
①
BlueGriffon3.0 (5/9)
3.ファイルの保存
メニュー ファイル-名前を付けて保存 → ページの表題とファイル名を入力する
(例)ページの表題 → 文教花子トップページ (日本語名でもOK)
ファイル名 → bxn11xxx-top.html (ファイル名は半角英数字、拡張子は html)
4.ファイルを開く
作成済みのページを開く場合は、ファイル-ファイルを開く で選択する
5.リンクの設定
(例) トップページ から 自己紹介のページ にリンクを設定
文字を反転させた状態で
「リンクの挿入」をクリック
ここをチェックしてから、 最後に「OK」をクリック
「bxn11xxx-jiko-shoukai.html」と指定する
ここをクリックして
ファイルを選択
★外部ページへリンクさせたい場合は、「対象」の欄にURLを直接、入力する
(例)文教大学へのリンクの場合 http://www.bunkyo.ac.jp/ と入力する
BlueGriffon3.0 (6/9)
6.画像の取り込み
(例) お気に入りスポットのページ に画像を挿入する
画像を入れたい場所にマウスをあわせ
「画像を挿入または編集」をクリック
フォルダを選択して、画像ファイル
を指定する
最後に「OK」 をクリック
画像を説明する文字列を入力する。(altメッセージ)
または「空の代替文字列を許す」にチェックを入れる。
(注意)
画像を挿入する前に、そのページに[表題]と[ファイル名]を付けて保存しておくこと
(ファイル名が未定の状態では画像は挿入できない)
(柱)ファイルとフォルダの所在と指定方法
①htmlファイルと画像ファイルが同じフォルダ内にあるとき
画像ファイル名
②htmlファイルと画像用フォルダが同一のフォルダ内にあるとき
フォルダ名/画像ファイル名
③htmlファイルより上位のフォルダに画像用フォルダがあるとき
../フォルダ名/画像ファイル名
私のお気に入りスポット
を紹介します
(注)
表示する画像のサイズ変更
①スタイルプロパティで幅と高さを指定する
または
②マウスで画像をドラッグして調整する
BlueGriffon3.0 (7/9)
7.表の作成 (例)2行×5列の表を作成する
◇表の作り方
◇作成した表の設定変更
表の内側で右クリックして表のプロパティをクリックする
表全体の幅 750ピクセル
高さ 140ピクセル
枠線の太さ 1ピクセル
・設定する部分を選択する
セル or 行 or 列
・設定する位置を変たいとき
前 or 次
文字配置や背景色を指定する
表を作成したい場所にマウスをあわせ、
「表を挿入」ボタンをクリック
2行×5列の表を作成する
※表全体のセンタリングやコピーを行うとき
画面左下の<table>をクリックして、
表全体を選択すると簡単に操作できる
【表全体の設定】 【セル・行・列の設定】
BlueGriffon3.0 (8/9)
8.アンカーの設定とリンク
【ページの途中にジャンプさせる方法】
◆手順1 ジャンプ先のページに「アンカー」を設定する
①ジャンプさせたい位置をクリックしておく。
②「アンカーの挿入または編集」をクリックする
③適当な名称を半角文字で入力する(たとえば「seimon」など)
◆手順2 ジャンプ元のページに「リンク」を設定する
①リンク元の写真をクリックしておく
②「リンクの挿入または編集」をクリックする
③「bxn11xxx-spot2.html」の文字列に続けて#とアンカー名を入力する(たとえば「#seimon」)
正門の写真の上位置にアンカーが設定された
BlueGriffon3.0 (9/9)
9.知っておくと便利なこと
(1)ソースコードを直接編集する
・画面下部にある「プレビュー」/「ソース」ボタンで画面表示を切り替えることができる
・ソース画面上では、HTMLタグやスタイル(CSS)を直接編集できる
(2)色設定時の注意点
・色の設定で「透明度」を指定すると、ブラウザによっては色が表示されなくなる
・その場合は透明度の値を「100」に設定する(透明の設定をしない)
(3)マウスが反応しなくなったとき
BlueGriffonの操作中に、マウスが反応しなくなることがある(ソフトの不具合と思われる)。
文字や画像をクリックしても選択できない場合は、一旦、そのページを閉じたあと、すぐに開き直せば
復旧できることが多い。
透明度を指定できる(100は透明なし)