ブログの下書きツール

Blogの原稿に使っているツールをちょっと紹介してみようかなと思いました。ez-HTMLというツールです。ブログ用ではなくHTMLエディタです。

秀丸などの、テキストエディタでもブログの原稿としては十分使えるのですが、どれが「見出し」で、リストや段落等を表現できないため、HTML形式で作っています。いつかスタイルシートで格好良くしようかなと思ったり、将来のFlash対応で動的ページにしようかなと睨んでいたりもします(マークアップさえしっかりしてればXMLへの変換も楽)。

ez-HTMLは、XHTML記述が楽に出来るような入力支援と構文チェック機能がついたエディタなのです。UTF-8にも対応しているのが魅力。HTML編集とプレビューが簡単にできます。複数のファイルをタグで切り替えて表示をする事が出来ます。カスタマイズすると見た目がMIFES風？になります。テンプレートのカスタマイズなどでもスタイルシートが綺麗に整形され使いやすい。

と、マニアックな説明をしてみましたが、要はHTMLタグを使ったブログ表現が楽にできてBlog管理も楽。とりあえずHTMLなら何でもこなせるHTMLエディタツールです。当然ネットブックでも快適に動きます。

BlogでのHTMLのメリットは？

Blogのメリットは、HTMLタグを知らなくてもブラウザの画面や携帯から楽に投稿できる事があります。ボタンを押せば色もつけたり太字も出来ます。その代わり、改行に<br />を利用するため、それぞれの文に対して意味を持たせる事が出来ません(これは見出しだ！！とか、これは文章だ！！、この文は強調だ！！といった感じで)。

Hamazoからはき出されるBlogページは、XHTML 1.0 Transitionalを宣言しています。つまり、XHTML形式で書いても問題ないのです。そして、XHTMLのルールに基づいてBlogを書くと「検索エンジンに拾ってもらわれやすい」というメリット？があります。といっても昔の話、今は関係ないのかなぁ。

使い方

とりあえず、Hamzaoの「ブログ環境設定」にある、「自動で改行しない」を選択。これで、HTML形式での入力がまともに出来るようになります。

ez-HTMLの「カスタム」の「HTMLの仕様と文法」を「XHTML 1.0 Transitional」にセットして完了(これが重要)

UTF8の設定もあるけど、初期のテンプレートがS-JISだったからそのままでいいのかなぁ適当にセット。後は、パソコンの適当なフォルダをブログ用にして、そこへ年月日の名前をつけて放り込んでいくだけ。

1. ez-HTMLから新規作成にて年月日の名前でブログフォルダに保存
2. とりあえず、じゃんじゃん書いていく
3. 絵は、Hamazoの記事投稿からアップロードして、タグをコピー＆ペースト
4. ez-HTMLのプレビューで構造を確認
5. Hamazoの記事投稿の本文にコピー＆ペースト
6. 「実際の表示をプレビュー」で、最終確認。
7. 投稿ボタンを押す

Blogのカスタマイズに使うCSS

ついでに、CSSのツールのおすすめは、『TopStyle Lite』です。と、最近TopStyle4がでて、無料で使えるLite版がなくなってしまった。思うに、有料版のTopStyleより、Liteの方がシンプルで使い勝手がいい。なにより入力支援がたまらなく心地いい。ブラウザごとのCSS対応状況も表示が出て便利。ez-HTMLとTopStyle Liteを2画面で表示をさせるとすごく便利。

TopStyleは、Dreamweaverの開発者と同じらしい。Dreamweaverは、プロ用の為なれるのが大変だし、デザインで食っていくならまだしも、アマにはハードルが高い。アマなら、ポチポチ手打ちでがんばる。

と、CSSは気合いを入れてやらないといけないので、放置してあったりします。でも、HTMLのルールに従って書けば、それなりに整って表示がされます。ちゃんと段落の間にスペースができインデントも入ります。下手なものならない方がいいくらいブラウザ標準のスタイルがよくできているおかげです。

とりあえずまとめ

なんだか、書いてみて気づいたけど、結構複雑だったりして。でも、XHTMLなんて一度わかるとすごい簡単で、文章の構造をしっかりさせるにはいいツールです。

ez-HTMLのいいところは、タグやプロパティのスペルを厳密に覚えなくても、入力支援ですぐに出せる事。候補に出てこなかったら、使ってはいけない物とわかるし、タグを閉じるときに、「</」まで打てば適当な候補が出てきてくれる事です。

昔は、StyleNoteや、HTML Project2もありましたが、今も更新しているのはez-HTMLだけです。もしかしたら、HTML Project2の方が使い勝手がいいかもと思いますがUTF-8が煩わしいです。

「説明しなくてはわからないということは、説明してもわからないということだ。」と、なんか急に頭に浮かびました。一昨日ブログで書いたため「1Q84」の世界にまだいるのかな。たしかに、今日のBlogにはこの言葉が当てはまりそう。それじゃぁいかんと、XHTMLについてちょっとだけ書いておきます。

XHTMLタグの簡易紹介

これだけ知っていれば、Blogで事足ります。他にも引用やルビなど色々あるので『XHTML+CSSスタンダード・デザインガイド』などを調べてみてください(絶版ですが浜松中央図書館にあります)。3年以上前の事なのでどれも絶版でが、ここ数年IE8がCSS2に対応したぐらいで変化はないです。逆にIE8がCSS2に対応して一般化してるので、タグの一覧だけあれば、デフォルトスタイルシートの情報は必要ないのかな。

デザインなどの見た目は、CSS(Cascading Style Sheets：スタイルシート)を利用して表現します。CSSは、プロパティ一覧シートが一枚あれば十分です。浜松市立北図書館の、たしか表紙がオレンジ色の雑誌「インプレスムック」にある、見開きの「CSSデザインに役立つブラウザ別CSS対応表」が、非常にわかりやすくて便利です。スペルの確認には何タラ辞典は使いにくい。ノートに張ったコピーしかない為タイトルわかりませんが、北図書館にあるのは間違いありません『スタイルシート＆Web制作 知識とルール総まとめ』シリーズのどれかです、興味があれば図書館でレファレンスを利用するか探してみてください（北図書館はWeb関係が妙にそろっています）。

HTMLの基本ルール

<マークアップ>とあれば、</マークアップ>で閉じてください(</)。<マークアップ />とあれば、それは閉じる必要はありません。

あと、インライン要素とブロック要素というのがあります。ブロック要素の中にインライン要素が入ります。これが基本ですが、例外もあります。インラインは(I)ブロックは(B)でここでは書いておきます。

テキスト＆プレゼンテーション

<h1>～<h6>

文章の見出し、レベル1(大見出し)からレベル2(中身出し)で、レベル6まで、大きな見出しから順に6段階でマークアップする。(B)

<p>

文章を記述する。段落ごとに<p>でマークアップする。(B)

<em>

強い強調(I)

<strong>

より強い強調(I)

<del>

コンテンツの削除を示す。(削除)(I)

<div>

ブロック要素をブロック化します。見出し＋文章などをひとまとめにブロック化する事で、より関連性の高さを示す事が出来ます。divの中にブロック要素やインライン要素を入れる事も出来ます。(B)

<span>

文字をマークアップします。タグ自身には意味がありませんが、スタイルシートでデザインを指定したり、情報を付加する事が出来ます。(I)

<hr />

区切り線。コンテンツの区切りを示す場合に挿入する。(B)

リスト

ulなどはブロック要素です。でも、liの中にはブロック要素もインライン要素も入れる事が出来ます。ちょっと複雑？

<ul>

箇条書きリスト。(<li>：リストを記述します)

<ol>

番号付きリスト。上から順番に番号が振られます。(<li>：リストを記述します)

<dl>

定義型リスト(<dt>：説明したい語句。<dd>：説明)

リスト使用例

<ul>
   <li>リスト1</li>
   <li>リスト2</li>
<ul/>

リンク＆画像＆表

<a>

リンクを記述する。※説明省略(I)

<img />

画像を表示する。※説明省略(I)

<table>

テーブル(表)を作成する。※説明省略(I)