ブログのエントリーを作成にHTMLソフトHTML Project2

前回ブログの投稿アプリとして、ジャストシステム:ブログ編集ソフト「xfy Blog Editor」トライアル版を紹介しました。(http://weblibrary.s224.xrea.com/weblog/mt/xfy_blog_editor.html)あのソフトは優秀そうでまだまだこれから使い勝手を覚えてゆくアプリでオススメできるのですが、大抵はHTMLソフトHTML Project2を使ってブログのエントリーを作成しています。

HTMLソフトHTML Project2
自動入力補完とダイアログ一括編集の使い分け可能なHTML4.01/XHTML/CSS2完全対応エディタ
http://www.vector.co.jp/soft/win95/net/se111772.html

WEB制作で手打ちでコードをたたくようになってからは、このアプリを使っています。Dreamweaverもよかったのですが、XHTML+CSSを制作するようになってからは、もっぱらこのアプリ。ブログのエントリーもこのHTMLソフトHTML Project2で作成するようになりました。

エントリーの正確なプレビュー確認を実際の画面で行いたい

先日mixi:MTコミュニティーのトピに「エントリーの正確なプレビュー確認を実際の画面で行いたい」という投稿があり、いくつかの考えられる方法が紹介されていました。

私は、このHTMLソフトHTML Project2をオススメで返信してみました。他の方法はというと

Drk7.jp:MT のエントリー確認画面を構築後の画面と同一にする方法
http://www.drk7.jp/MT/archives/000976.html
/lib/MT/App/CMS.pm を編集することで表示できる方法のようです。(試していません)
LivePreview
http://plugins.movalog.com/livepreview/
これもよさげなプラグインかも:oscarさんのオラオラ:LivePreviewのエントリにて紹介されています。http://www.zelazny.mydns.jp/archives/000062.php

この二つの方法が紹介されていました。その後どうなったかはわかりませんが、投稿者の方は、会社での投稿前の上部への確認決済が必要との理由により、プラグインの利用を検討されている模様。

WritelyでMTブログへ投稿する

複数の人間でエントリーの内容を確認する必要があるなら、どうだろうウェブワードプロセッサーの Writelyを使ってみてもいいかもしれない。設定でWritelyから直接自分のMTのブログへの投稿もできるので、複数の人間でエントリーを編集・確認するにはいいかもしれない。確認プレビューもできる。そして、自動バックアップ機能がついているので作成している最中に勝手に保存作業もしてくれる。作成途中で何かの原因でPCがフリーズしてもある程度までは、データは残っていると思う。
また、ワードと同じような文書もかけて、ファイルを共有できるので会議の文書などの流用も簡単かも知れない。

使い方は、また次回のエントリーで説明してみたいと思っている。複数の人間でエントリーを編集・作成するのであればWritelyはオススメできる。

Writely (ウェブワードプロセッサ):Googleのサービス
http://www.writely.com/
概略を説明しているエントリー:http://www.ariel-networks.com/blogs/tokuriki/2006/01/writely.html

とりあえず私は使い慣れているHTMLソフトHTML Project2をオススメしておくと同時にちょっとした使い方も説明しておきます。

HTMLソフトHTML Project2

全画面表示
クリックで拡大表示

  • 薦める理由は、CSSの設定ができる。
  • プレビュー画面を見ながら実際投稿後のエントリーと同じスタイルで見ることができる。
  • WEB標準が必須といわれている今、XHTML文書の利点を引き出すためにも構造的にエントリーを作成できる。(マークアップ)
  • 自動入力補完で簡単にマークアップやタグ打ちができる。
  • その他HTML作成アプリなので大抵のことはできる。
  • 特にコードを表示するときは、文字実態参照が簡単にできる。
  • (preタグでエントリーしている方が多いようです。私は dp.SyntaxHighlighterというJavascriptを使った表示方法をとっているので、<textarea name="code" class="xml" cols="60" rows="5" id="code"></textarea>のタグで囲むことで、コードが行列番号と一緒に表示されるようになります。一応、文字実態参照にて入力変換しています。)
dp.SyntaxHighlighter
http://www.dreamprojections.com/SyntaxHighlighter/Default.aspx
コードの種類によって、CSSクラス指定で色分け表示することが可能です。view plainでコピーできるポップアップウインドウ画面も表示します。Yahoo! UI Library: Grids CSSでその存在を知りました。

HTML Project2をブログのエントリー用に設定

自分のブログと同じようにプレビューしながら、エントリーを作成するには、ちょっと設定が必要です。簡単に紹介しておきます。

1).ヘッダー情報の設定

HTML Project2設定:ヘッダー情報の設定【ページ設定】でヘッダー情報の中のCSS(スタイルシート)アドレスを入力(絶対参照)して、名前をつけて設定保存する。
毎回エントリーを作成する前に【ページ設定】で保存ファイルを呼び出します。

HTML Project2設定:ヘッダー情報の設定2
2).登録タグを設定

HTML Project2設定:登録タグを設定よく使うタグは、任意のボタンとして登録することができます。これを使って、ブログのエントリー前のdiv要素などのタグをすべて登録します。

自分のブログのソースを開いて、エントリー本文の前までのコードを全部コピペで前方タグに登録し、エントリーの本文後のタグを全部広報タグに登録します。(必要な部分のみのdiv要素だけでもいいと思います。)HTML Project2設定:ヘッダー情報の設定2

よく使うタグは、名前をつけて登録しておきます。後は、必要な時にワンクリックで書き込めます。

3).設定項目でその他の設定

HTML Project2設定:登録タグを設定MTブログはXHTML形式にて作成する必要があるので、すべてのタグを閉じて終わらなければならないです。【設定】でXHTMLモードにチェックをつけます。あとも表示している内容にチェックをつけます。


以上の設定でブログと同じ表示をプレビューしながらエントリーを作成することができます。ファイルもマメに保存しながら作成しておけば、フリーズといったときにもデータは、残ったままで作業の継続が可能です。複数の方で確認をするなら、共有フォルダに保存するようにすれば、普通にHTMLにて保存されますので、ブラウザからも確認できます。

実態参照表示

コードなどの実態参照表示も選択してから、右クリックの選択部分を変換で簡単に実態参照表示コードに変換できます。
HTML Project2設定:実態参照表示実態参照表示


タグの編集

基本的にタグの編集もタグをダブルクリックするか、ファンクション【F2】で編集ができます。スタイルシートの設定もできますので結構便利です。

実態参照表示

以上のような感じで設定して使って行きます。各種ツールも自分の使い勝手に変更しなおせば、かなり使いやすいエディタになります。書き終えたら、エントリーの本文のみをコピペして貼り付けて、投稿という作業となります。

Movable Type は、XHTMLで生成されるので、正しくマークアップして構造的に文書を作成しないといけないのですが、完璧にはできないです。どちらにしてもこれからは、WEB標準が当たり前の時代です。テンプレートなどもSEOを言葉にして公開しているのですが、実際にエントリーの記述の仕方もレクチャーしていかないといけないような気がします。

他の皆さんがどのようにエントリーを作成しているかわかりませんが、少しずつでもこういったエディタを使って作成していったほうが後々楽だと思います。私も使いながら、タグを勉強していっています。特にWEB標準はかなり狭い範囲なので、細かい設定がいくつもあり、パターンを経験して覚えていくには、こういったツールを日々使うように心がけています。オススメしておきます。

参考文献

XHTMLの書き方と留意点
http://www.kanzaki.com/docs/html/xhtml1.html

トラックバック(0)

このブログ記事を参照しているブログ一覧: ブログのエントリーを作成にHTMLソフトHTML Project2

このブログ記事に対するトラックバックURL: http://weblibrary.s224.xrea.com/x/mt/mt-tb.cgi/53

コメントする

アイテム

  • ff-logo-big

    ff-logo-big: firefoxロゴ

  • fmtube_image

    fmtube_image: fmtubesキャッチイメージ

  • mock.jpg

    mock.jpg: fm+tubesのモックページ(デザインレイアウト)。最終的にはこのスタイルでマルチブログで展開してみる構想。

  • mtdeinfo

    mtdeinfo: Movabletypeを勉強するならこのサイト。サンプルファイルもあって、情報も探しやすいです。とてもきれいに情報表示されていて、とても参考になります。

  • mytumblr

    mytumblr: 個人の趣味でのtumblrです。女性のポートレートなんかがおおいです

  • caputure_contextmenu

    caputure_contextmenu: tumblr caputureを右クリックコンテキストメニューで選択する

  • tumblrgallery

    tumblrgallery: tumblrを使ってWEBデザインGalleryを簡単に作ってみました。

  • psdtuts

    psdtuts: http://psdtuts.com/のイメージ画像

  • designflavor.

    designflavor.: http://www.designflavr.com/のイメージ

  • entrymain_template

    entrymain_template: ブログ記事の概要は、インデックステンプレート、ブログ記事のリスト(アーカイブテンプレート)、検索結果(システムテンプレート)の3つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

このブログ記事について

このページは、スカイが2006年9月 9日 21:12に書いたブログ記事です。

ひとつ前のブログ記事は「MovableTypeで Google Sitemaps用テンプレートコード」です。

次のブログ記事は「最近のトラックバックテンプレートタグ」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。