#5-BlueGriffonを使ってみる
BlueGriffonを使ってみる
1. はじめに
BlueGriffon(青鷲・鷲獅子)は、HTML5対応のWYSIWYGなHTML・CSSエディタである。
WYSIWYGと言うのは、ディ スプレイに現れるものと処理内容(特に印刷結果)が一致するように表現する技術のこと。
だが、HTMLを全く知らないでBlueGriffonを使うのは・・と思うが、とりあえず 新規ファイルを作成してみる。
2.新規作成ウイザード
はじめに「新規作成ウイザー ド」を使って、タイトル「わたしのページ」(赤)と文章「yahooにリンクします」、「yahoo」の画像も入れてみます。すべて中央寄せにします。
3.新規作成で
つ ぎは「新規作成」で、作ってみます。中身は同じです。
4.ワードとリーブルでも作ってみます
そ れぞれを、エディタを使ってって調べます。おもしろいことがわかります。
中心部分は、これで す。
<p style="text-align: center;">
<strong style="color: red;">わたしのページです</strong>
</p>
<p style="text-align: center;">
<span style="color: black;">yahooへリンクします</span>
</p>
<p style="text-align: center;">
<span style="color: black;">
<a href="http://yahoo.co.jp" title="yahoo" arget="_top">
yahoo</a></span>
</p>
<div style="text-align: center;">
<img src="file:///C:/Users/user/Downloads/z_yahoo.gif" alt="">
</div>
<div style="text-align: center;"><br>
</div>
5.設定
ツールアイコン
画像(img)、テーブル(table)、リンク(a)、span要素、強調(em)、番号なしリスト(ul)、番号付きリスト(ol)、定義項目(dt)、定義説明(dd)、引用(blockquote) などはツールアイコンで追加したり、セレクトした範囲をその要素に変換して作成することができる。
ブロック要素選択プルダ ウンメニュー
行をポイントしたり、複数行 をセレクトして、段落(p)、見出し(h1〜h6)、整形済み書式要素(pre)、div要素などに変換することができる。
要素の選択
要素を選択するには、プレ ビュー画面の該当部位をポイントしたりセレクトしたりもできるが、下の3つの方法で行うのが確実。
正確に要素を選択した上で移 動させたり、コンテクストメニュー(右クリック)から削除、変更、要素のHTMLのコピーなどができる。要素選択ツールからHTMLをコピーできるので、ここに貼り付け ることもできる。
タグリストバー
ステータスバーに表示される タグリストバーのタブをクリックすることで要素を選択できる。
タグ・ツリー
DOM Explorerパレットの上にあるタグ・ツリーでも選択できる。
「表示」→「All Tags モード」
タグボタン(黄色いボタン) で選択できるのだが、ダブルクリックしないと選択したことにならないので注意が必要。
6.リンクページ
(ヤッ フー) http://yahoo.co.jp
(グー グル) http://www.google.jp
(ラ イブドア) http://blog.livedoor.jp
(ラ ジコ) http://radiko.jp
(ジョ ルダン) http://www.jorudan.co.jp
(パ ソみんな) http://paso360.hateblo.jp
(パソ去年) http://blog.livedoor.jp/pinokio360