Open Live Writer にVasterのテーマを反映させる方法まとめ。

ブログを、ブログテンプレートの実際表示に合わせて編集できる、Open Live Writer。
ですが！僕が使っているテンプレートVasterではそれが機能しません。それをこのたび機能するように加工しましたのでご紹介します！ ※過去の投稿を再度編集してまとめました。現在はVaster2を使用しています。

実際のブログ表示でを記事作成できるのがLive Writerなんですが…

Open Live Writer（以下ＯＬＷ）は、実際のブログの表示を確認しながら記事作成できます。

Windows Live Writer を使用すると、写真や動画をほぼすべてのブログサービスで簡単に共有できます。Writer では、ブログに追加するコンテンツを事前にすべてプレビューできるため、フォント、レイアウト、色、画像などの見栄えを確認してから公開することが可能です。Windows Live Writer を使用すると、洗練された写真や動画を作成することも簡単です。フォトアルバムを作成することもできます。スタイルを選んだら、後は Writer におまかせ。Writer には、便利な機能が満載です。もっと自在に編集したいという方には、あらゆる種類のプラグインも用意されています。 Microsoft　Windows Live Writer ダウンロードページより

※現在Windows Live Writer は更新されていないので、Open Live Writerを使っています。これが非常に便利で、bloggerに行って、ブラウザから編集していた頃から比べると、ものすごい楽に、早く記事が作れるようになりました。やり方は簡単。blog accountのupdate themeを押すだけ！
ですが！それはblogger純正テンプレートを使っているときの話！ 外のテンプレートVasterではそれがうまく機能しません。試しにテーマ取得機能でやってみてもこのとおり。

#blogger プレビューもこのとおり(´･ω･`)　#openlivewriter oxygentukiさん(@oxygentuki)が投稿した写真 – 2016 4月 24 7:46午後 PDT

テーマのデータを作って読み込ませる戦法でいく

OLWに何が何でもテーマ取得させてやる！と思っていろいろ調べ回りましたが、行った先のサイトに書かれている意味がさっぱりわからん…激ムズであります。とにかくわかったのは、 １．Vasterのような「ブログカード」が並ぶページがHOMEだと、Wordpressでも取得ができない ２．｛post-title}と｛post-body}がテーマのHTML内に無いと取得できない ３．OLWは記事編集用のHTMLページを生成して、それを読み込んでいる（＝テーマ） なるほど、では{post-title}と｛post-body}を含んだページのデータを自作して読み込んでもらえばいいということだ！さっそくテーマのデータをつくっていくことにします。参考にしたサイト・絶対に失敗しないWindows Live Writerの「テーマの更新」方法を探る！・Windows Live Writerでのテーマ取得失敗対処とCSSカスタムのTIPS | TeraDas－テラダス・全てのWindows Live Writer利用者へ、便利な3つのTips | CHUSUKE.COM 【pc】LiveWriter2011テーマ更新失敗の対処方法 | 鍋風呂

OLWでテーマ取得したEdit画面とPreview画面の違いを見比べる

これからテーマ用のデータを作っていくのですが、一体何がテーマ用データに必要なのかを見極めるために、「編集画面用」「プレビュー用」「ブラウザでの表示」のそれぞれを見比べてみました。
いろいろ実験するための仮のブログを新しく作って、そこのデータを使ってテーマをいじってみます。本線がぐちゃぐちゃになったら嫌ですし…

１．blogger純正テーマでブログを作り、これをOLWでテーマ取得します。

ぽちっとな。するとこのとおり、編集画面が実際表示という状態になるのです！早くここまでたどり着きたい！

２．取得したテーマのデータを確認する…{post-title}と{post-body}の記述が必要

取得したテーマのデータは、以下に入っています。
C:ユーザー/（ユーザー名）/AppData/Roaming/OpenLiveWriter/blogtemplates/（文字列） AppDataは隠しファイルです。フォルダの表示をお忘れなく。ちなみに上記アドレスはWindows１０ですので、７やVistaはちょっと違うかも。この超長い文字列フォルダの中にある、htmファイルが必要なやつです。index.htmとindex[1].htmてのがあるのですが、それぞれ編集用画面と、プレビュー画面のデータです。まずはこの二つのhtmを見比べてみます。テキストエディタで印刷して、並べて…
※写真はイメージです。これはCSS記述の部分。比べてみると、やっぱり編集画面用のほうがいろいろと文字が少ない。要素が少ないのが軽く動作してくれる要件なんでしょう。
見比べて目立つのは、タイトルと本文の記述…{post-title}と{post-body}のところ…以降がバッサリ無くなっているとこですね。本文が表示されるところのHTMLはこんだけの量なのか。</div></body></html>とかの終わりのタグがちゃんと書いてあればいいようです。では次にVasterの構成がどうなっているのか確認していきますね。

Vasterテーマをブラウザから保存して、構成を見てみる

３．Vasterを適用したブログ「記事」のページをブラウザで保存。要素を見る

ブログをブラウザで保存します。このときに、HOMEではなく、記事のページを保存します。編集に必要なのはHOMEの一覧表示じゃなくて記事のページですからね。で、保存したHTMLデータをテキストエディタなどで開き、印刷します。また見比べる作業…前回のBlogger純正テーマと何が違うのか…どこを削るのか… やっぱり、Vasterで書かれた記事のタイトルと、本文をそれぞれ…{post-title}と{post-body}に置き換えればいいみたいです。あとは特別純正と違うような表記はありませんでした。最初の写真のように、仮記事のタイトルと本文を何か入れておいて、それをページ保存すれば修正箇所……{post-title}と{post-body}を入れる場所がすぐわかります。

４．Vasterで書かれた記事のタイトルを{post-title}に、本文を{post-body}に置き換えてｈｔｍｌデータを作成。テンプレート保存フォルダへ入れる

早速書き換えてみて、OLWのフォルダ（超長い文字列のフォルダ）に放り込んでみましょう。HTMLと一緒に付随するデータ（フォルダにまとめて入っている）もくっついてきてくれます。この際にファイル名…HTMLのファイル名を、indexにしておきます。そしてOLWを開いてみますと！ OLWが固まりました！｡｡｡＿|￣|○ 余計な要素が多すぎるようです。強制終了。不要なHTML記述を削っていきましょうか。

５．HTMLの不要な部分を削ってOLWが動くようにしていく

なんとか編集画面用の必要要素が見えてきた…感じのするOLW。これまでダウンロードしてきたデータを見比べ、不要部分を削っていきます。この作業にはBracketというフリーソフトを使いました！Brackets -－オープンソースで開発されているWebアプリ開発向けのコードエディター…窓の杜これだとchromeと連携して実際表示がどう変わったか、すぐわかるので超便利です。タグが閉じれていない、などのエラーも表示してくれます。間違っていればプレビューも表示できないので、よくわかります。
Edit画面や、Preview画面と見比べて不要と思われるところを削っていきます。編集画面には本文のところだけあればいいので、ヘッダーやサイドバーを削除。 幸いVasterにはここからここまでがヘッダーだよ！とか本文（コンテンツ部分）とかサイドバーだよ！と区切りが書いてあるので見つけやすい。 あとはhttp~などとアドレスが書かれている部分はいらん読み込みを誘発しそうなので削除しました。本文中なら、タグのリンクを読む記述があるので、リンクのところを削ってただの文字にします。本文のところはこんな感じ。これ以降はバッサリ削除します。＜/body＞</html>で終わるのを忘れないように。で、出来上がった画面がこちら。おお~余計なものもなく、ちゃんとHタグ（見出し）もデザイン通りですやん！続いてプレビュー画面用を作ります。

プレビュー画面はリッチに…と言いたいところですが諦めました

せっかくプレビューなんだから表示されるとおりにしたいよね、と思って作っていきましたが…めんどくさすぎてやめ！リンクを切っていく作業が面倒なのと、サムネイルの表示がうまくいかない、そして動作が重い、ということで、ヘッダーだけ残してあとは削除しました。文章中のアドセンス表示もうまくいきません。諦めました(´・ω・`)。というわけで完成！ちょっと不具合はあるけどねプレビュー画面が出来上がりました！画像の挿入や、リンクもちゃんとできます！しかしまだ不具合も少しありまして、