paso360.hateblo.jp

pasocmのこと、その他も扱う

#5-BlueGriffonを使ってみる

 

BlueGriffonを使ってみる

1. はじめに

f:id:pinokio360:20200713093825p:plain

BlueGriffon(青鷲・鷲獅子)は、HTML5対応のWYSIWYGHTMLCSSエディタである。

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)、見出し(h1h6)、整形済み書式要素(pre)div要素などに変換することができる。

f:id:pinokio360:20200713093856p:plain

 

要素の選択

要素を選択するには、プレ ビュー画面の該当部位をポイントしたりセレクトしたりもできるが、下の3つの方法で行うのが確実。

正確に要素を選択した上で移 動させたり、コンテクストメニュー(右クリック)から削除、変更、要素のHTMLのコピーなどができる。要素選択ツールからHTMLをコピーできるので、ここに貼り付け ることもできる。

f:id:pinokio360:20200713093917p:plain

タグリストバー

ステータスバーに表示される タグリストバーのタブをクリックすることで要素を選択できる。

f:id:pinokio360:20200713093933p:plain

 

タグ・ツリー

DOM Explorerパレットの上にあるタグ・ツリーでも選択できる。

f:id:pinokio360:20200713093952p:plain

「表示」→「All Tags モード」

タグボタン(黄色いボタン) で選択できるのだが、ダブルクリックしないと選択したことにならないので注意が必要。

f:id:pinokio360:20200713094012p:plain

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