ブログの文書管理および効率のよい作成方法

ブログの文書管理および効率のよい作成方法

だいぶブログ歴も長くなり、そこそこの分量の記事をアップしていますが、これだけ多くなると文書管理というかそういったものが必要ではないかと考えるようになりました。ついでにこれまでどのような方法でブログ作成したかも紹介したいと思います。

Wordpress効率のよい文書管理術
WordPress
効率のよい文書管理術

Initializing...

効率のいいブログ作成方法

ある程度経験を積んでくるとブログ作成には、WordPress(以下ワードプレス)を使っている方が多くなります。ワードプレスは、ブログの作成ツールでもあり記事のアップロード管理もあわせてできるツールです。ただ文書作成・デザイン等は当然ユーザーがやらなければならないので、やってみると結構センスや文書作成技術などが要求され、ちょっとしきいが高い気もします。その分逆に一番大事なコンテンツ作成に100%力を注ぐことができるブロガーにとっては最良のツールです。

そうして私もワードプレスで記事を作成しているのですが、文書の見出しを作ったり、重要な文字を太くしたり、図を配置したり、その図の代替文字をいれたりと原稿つくるのは、専門ソフトでないワードプレスでは少し大変。もっと改善できないかと常々考えています。

ある日ふと、原稿作成といえばMicrosoft WORDでなんとかこれを使ってブログ記事を作りたいと思うようになりました。そしてもう一つWeb作成ツールでは、AdobeのDreamweaverも一緒に検討してみることにしました。

Wordで直接htmlを出力もできる

Wordは、「名前を付けて保存する」で、ファイルの種類を「Webページ(*.htm;*.html)」を選択すると直接htmlに出力できます。ただこれを使う人はまずいない。理由は、はき出すhtmlコードが大変複雑で、直接編集することはまず無理でまたWord上に持ってきてメンテナンスしなければならない。一度つくれればよいとかそんな感じでなければ全然役にたつものではない。先ほど紹介したadobe社では、WordとDreamweaverを連携してWebを作成する方法を紹介している。

Dreamweaver での Microsoft Office ドキュメントの読み込み(Windows のみ)

少しはまともなhtmlになりましたが、でも基本的にはWordで直接出力したhtmlと差異はないです。

独自の連携方法で対応

以下の点を検討して独自連携してみました。

・Wordはvbaマクロを使ってワードプレスに沿ったhtmlタグに変換

・Dreamweaverをワードプレスとの間にはさんで、画像を自動的にサーバーサイトにアップするとともに、自動的にリンクさせる

・できあがったhtmlを直接ワードプレスのテキスト画面に貼り付ける

※Dreamweaverを持っていなければ、ワードプレス上で作業すれば可能かもしれません。

メリット

中間(Dreamwever)で、多少の修正がはいるものの基本的にword文書を直接ワードプレスに送り込んでいます。大げさにいえば、Word文書=ワードプレスです。なので、文書はすべてWordで管理することにすればいいのです。Wordであれば大量の文書も用意に管理できます。

Wordでブログを書けば、作業効率も文書管理も最強!

独自連携の詳細

まだ内容がちんぷんかんぷんだと思いますが、これからそれぞれのソフトの連携手法とその詳細について述べさせていきます。

Wordの連携

詳細

Wordでは通常どおり文書を作成していきます。これらの文章を段落ごとにマクロでhtmlタグに変換していきます。作成するマクロでは、見出し1はh3タグに、見出し2はh4タグに、見出し3はh5タグにというような感じです。

※私のつくるブログ記事の大見出しはh3、中見出しがh4、小見出しがh5という構造になってます。

その他、段落ではありませんが文字単位で、強調太字のスタイルはstrongタグに変換するとか、画像なんかは単なる挿入ではなくリンク形式でWord文書に貼り付ければ、ローカル環境のパスもマクロで取得できるので、のちのちのDreamweaverに持っていったときに、画像ファイルパスをローカルからサーバーへと自動変換ができます。

要は、マクロで対応範囲をどこまでするかでほとんど無修正でワードプレスへ変換することが可能なのです。

このマクロの作り方は、以下のサイトに基本コードがありますので、これをカスタマイズすればいいと思います。

VBA 文書をまともなHTMLに変換するWordマクロ

thomさん、ありがとうございます。参考にさせていただきました。

ちなみに私が拡張したマクロでは

表題、h3~h5タグに対応

強調太字、文字カラー、フォントサイズ

表組み

画像のリンク、サイズ、代替テキスト

箇条書き

引用文

以上に対応したタグをはき出します。

注意点

マクロの内容によりますが、図を挿入する場合に単なる挿入ではなく、[挿入とリンク]を利用するようにします。そうすることによりマクロ中でローカルパスを取得できます。また図に「図の書式設定」 > 「代替えテキスト」を入力するようにします。

このマクロの対応の範囲で今後ブログを続けていこうかと思ってます。

Dreamweaver連携

詳細

Dreamwever連携の主な目的は、画像の管理です。Dreamweaverの特徴を生かせば、前述の通り画像パスをローカル環境からサーバー環境に自動変換してくれます。

通常、Dreamweverは画像を貼り付けると、サイト設定の詳細設定にあるデフォルトのイメージフォルダーに定義されているサーバーパスに画像があるものとしてリンクします。ただリンクパスは“file:///c:~“というようなローカルパスのままです。サーバーパスなら”http:~“から始まらなければなりません。

画像のサーバーへの自動コピーとリンクアドレスのサーバーパスへの変換が必要!

しかし、これを自動的におこなってくれる唯一のやり方がDreamweverには隠されています。

それは、基本となるphpファイルの実態を新規で作成し、まだ保存されていない状態で画像の貼り付けをするのです。

そうすると、基本ファイルが保存される場合に、”依存ファイルのコピー”というダイアログを表示して保存場所選択と画像自体のコピーをしてくれます。

以下のように基本ファイルを保存(新規)しようとすると

画像を拡大表示する

  1. 別名で保存を選ぶ
  2. “依存ファイルのコピー“ダイアログを表示
  3. コピー先を入力

注意点

最も期待する挿入した画像のサーバーパスですが、2つだけ気をつけたい点があります。

基本となるphpファイルはWebルートに保存すること

画像のリンクパスは、phpファイルからの相対パスとなっているので、先頭に/(スラッシュ)をつけて、絶対パスに変更する

これで出来上がったコードをワードプレスにそのままコピーしても、画像もふくめて正常に表示させることができます。

まとめ

ここで紹介した方法は、Microsoft WordでHTML文書に変換する方法です。Microsoft Wordで直接HTML文書をはき出すことはできますが、前述したとおり複雑なHTML構造であったり柔軟性がないので使いたくないので、vbaマクロで作成する手法と撮りました。

画像のアップロードやサーバー上のリンクに仕上げるためにDreamweaverを使いましたが、手動でアップ修正するならなくても利用が可能です。ぜひ挑戦してみてください。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク
ページ上部へ戻る