絶対に失敗しないWindows Live Writerの「テーマの更新」方法を探る！

PR 2015/3/15 Windows Live Writer 4

Windows Live Writerには「テーマの更新」という機能があります。

「テーマの更新」機能は、Windows Live Writer（以下WLW）のエディター上にWordpressで使用しているテーマのスタイルを適用することにより、テーマの見た目通りにWYSIWYGでエディター上でも編集できる機能です。（WYSIWYGとは、見たままが得られるという意味）

ただ、このWLWのテーマ更新機能は、正常に動作しないことも多いです。僕は、これまで「テーマの更新」は、まともに成功したことがないので、使用していませんでした。というか、まともに機能しないものだと思っていました。

けど先日、テーマフォーラムに「Windows Live Writerにテーマを取り込みたい」という要望をいただきました。そのとき方法をちょっと調べてみたところ、「テーマでの設定とWLWの設定側で何とかできるのかも？」ということがわかりました。

それで、昨日いろいろ調べていたら、主な原因と解決方法がわかりました。

photo by Niall Kennedy

テーマの更新の失敗

テーマの更新の失敗には以下の2種類があります。

そもそもテーマの更新作業で失敗する（スタイルをダウンロードできない）
テーマの更新がうまくいっても、思い通りのスタイルにならない

以下では、それぞれの失敗原因について簡単に説明します。

テーマの更新作業で失敗して取得できない

テーマの更新がうまくいかない理由の一つとして、テーマ内にWLWのテーマ更新に必要なコードが含まれていないというのがあります。

WLWでは、home.phpやindex.phpのテンプレート内にthe_title()やthe_content()を探してタイトル部分とコンテンツ部分のある場所を判断します。（get_the_title()やget_the_content()でも多分OK）

なので、テンプレート内にそれらのコードが含まれていないと「テーマの更新」でスタイルの取得に失敗します。

WLWのテーマスタイルを取得する手順を簡単に説明すると以下のようになっていると思います。（あくまで予想）

home.phpテンプレート内にthe_title()やthe_content()があるか探す
無い場合は、index.phpテンプレート内を探す
無い場合はテーマスタイルの取得に失敗する

こんなメカニズムで失敗しているものと思われます。解決方法は後述します。

参考 Windows Live Writer テーマの取得について

思い通りのスタイルが適用されない

「テーマの更新」作業がたとえうまくいっても、思い通りのスタイルが適用されないこともあります。

例えば、投稿ページのスタイルを適用したいのに、インデックスページのスタイルが適用されてしまうとか。

これは、やはり先程のWLWの動作と関連しています。

WLWは、テーマを更新するときに、home.phpとindex.phpしか読み込みません。

なので、どうしてもトップページのインデックス部分のスタイルが読み込まれてしまうのです。

昔のブログならインデックス部分では以下のようなスタイルが一般的でした。

テーマで言えば、Twenty TenとかTwenty Elevenとか。

WLWは、home.phpとindex.phpから、the_title()やthe_content()を探し出して取り込むので、こういった場合はうまくいきます。

しかし、最近の主流は、インデックスページに投稿本文は表示させず、ブログカード形式というのが多いです。

Simplicityなども、そのような形式をとっています。

このような形式のインデックスページ（home.phpとindex.php）から、テーマのスタイルを取得してしまうので、投稿ページのスタイルにならず、思ったような表示ができなくなっています。

WLWのテーマ更新を成功させるには？

簡単に手順を説明するとこんな感じになります。

「WLW更新用テーマ」を作成する
「WLW更新用テーマ」をZIP圧縮してアップロード後インストール
WordPressの設定の確認
WLWでテーマの更新
それでもスタイルが崩れた場合は、WLWのスタイルシートを編集

「WLW更新用テーマ」の作成

WLWの「テーマの更新」がうまくいかない場合は、「WLW更新用テーマ」を作成します。

「WLW更新用テーマ」の作成といっても簡単で、index.phpをちょこちょこっとコピペで編集するだけです。

※これは、現在使用しているテーマをそのまま編集せず、一旦テーマフォルダを複製コピーして「WLW更新用テーマ」として編集してください。

WLWのテーマ更新を成功させるには、使用しているテーマのindex.phpの中身を、single.phpの中身をコピペして入れ替えてしまうという方法があります。

そのテーマの中でthe_title()やthe_content()がちゃんで呼び出されているかをチェックします。（get_the_title()やget_the_content()でも多分OK。index.php内のテンプレート呼び出し関数（get_template_part()など）の呼び出したテンプレート内に関数が書かれていても多分OK。)

home.phpがある場合は、更新用テーマには不要なので削除してください。

「WLW更新用テーマ」をWordpressにインストール

その編集後の更新用テーマをZIPで圧縮して使用しているサーバーにアップロードします。

「外観→テーマ」から「テーマのアップロード」をクリック。

作成した更新用テーマを選択して「いますぐインストール」を押してください。

こうすることで、index.phpがsingle.phpと同様のデザインになり、そのスタイルがインデックスページに適用されます。それをWLWで読み込みます。

インストールが終わったらテーマを有効化します。

有効化。

WordPressの設定の確認

ここで、Wordpress側の設定を確認します。

WordPress側で、固定ページをフロントページにしている場合は、WLWの「テーマの更新」がうまくいかないので設定を一旦戻します。

フロントページの解除は、「設定→表示設定」の「フロントページの表示」項目の「最新の投稿」にチェックを入れて「変更を保存」ボタンを押します。

WLWでテーマの更新

あとはWLW側で「テーマの更新」を行います。

WLWでテーマの更新を行うには、「ブログアカウント」タブから「テーマの更新」ボタンをクリックしてください。

これでおそらく、大抵の場合はうまくいくと思います。

WLWのスタイル編集

前項目までの設定でおおよそうまくいくと思うのですが、それでもうまくいかなかったときは、WLWのスタイルシートを自前で書き換えて無理やり思い通りに表示させるという方法もあります。

その設定ファイルがある場所は、以下の場所になります。（Windows7、8で確認）

C:\Users\ログインユーザー名\AppData\Roaming\Windows Live Writer\blogtemplates\

blogtemplatesフォルダ内を見てみて、フォルダが2つ以上ある場合は、更新日時が新しい方を開きます。（さっきテーマの更新をしたので更新日時が新しい）

設定フォルダを開くと、以下のようなファイル構成になっています。

この中で、スタイル編集に必要なのは、index.htmのみです。

そのindex.htmをテキストファイルで開いて、以下の部分にスタイルを記入しWLWを再起動すると、そのスタイルがWLWエディターに反映されます。

<STYLE type="text/css">
/*ここにスタイルを書いていく*_
</STYLE>

記入するスタイルは、テーマフォルダ内のstyle.cssから必要な部分をコピーするのが手っ取り早いと思います。

ちなみに、Simplicityのindex.htm内の投稿本文部分は以下のようになっています。

<BODY class="home blog">
<DIV id="container">
<DIV id="body">
<DIV id="body-in">
<DIV id="main">
<DIV id="post-4693" class="post-4693 post type-post status-publish format-standard has-post-thumbnail category-news">
<DIV class="article article-list">
<H1 class="entry-title"><A href="http://wp-simplicity.com/">{post-title}</A></H1>{post-body}</DIV></DIV></DIV></DIV></DIV></DIV></BODY>

このHTMLに合うようなスタイルシートを、テーマ内のstyle.cssから見つけてきて以下のように貼り付ければ、そのスタイルが適用されます。

<STYLE type="text/css">
/************************************
** 基本設定（General Setting）
************************************/
html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family:
      'Lucida Grande','Hiragino Kaku Gothic ProN',
      Meiryo, sans-serif;
  font-size:1em;
}

img{
  border-width:0px;
}

.article{
  font-size:16px;
  line-height:170%;
}

.article-list{
  margin-bottom:130px;
  border-bottom: 1px solid #aaa;
}

/*記事・カテゴリ中の画像を要素内に収める*/
.article img,
.category-description img,
.wp-caption{
  max-width:100%;
  height:auto !important;
}

.aligncenter{
  clear:both;
}

/************************************
** 見出し（H1-6）
************************************/
h1, h2, h3, h4, h5, h6{
  line-height:130%;
  color:#333;
}

.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{
  position:relative;
  margin-top:35px;
  margin-bottom:20px;
}
.article h1 {
  margin-top:30px;
  margin-bottom:20px;
  font-size: 30px;
  line-height:117%;
}

#archive-title{
  padding-bottom:20px;
  font-size:26px;
}

.article h2 {
  border-left:1px solid #000;
  margin: 40px -29px 20px;
  padding:25px 30px;
  font-size:26px;
}

.article h3,
#comment-area h3,
#related-entries h3{
  font-size:23px;
  border-bottom:5px solid #e7e7e7;
  padding:10px 0;
}

.article h4, .article h5, .article h6{
  font-size:20px;
  padding:8px 0;
}

.article  h4{
  border-bottom:5px dashed #eee;
}

/************************************
** アンカー
************************************/
a {
  color: #2098A8;
}

a:hover {
  color: #C03;
}

/*設定したいスタイルシートを追記していく*/
</STYLE>

index.htmにスタイルを記入していけば、結構思い通りにスタイルが適用できるので、どうしてもうまくいかないときには有効だと思います。

参考 Windows Live Writerでのテーマ取得失敗対処とCSSカスタムのTIPS

参考 Windows Live Writerでテーマが崩れる場合の対処法.

設定後の動作確認

今回当サイトの場合、設定後Windows Live Writerのエディターは以下のように表示されるようになりました。

タイトルとアイキャッチ部分

見出し部分など

これはブラウザの表示ではなくて、WLWエディターの表示です。

僕はこれまで「テーマの更新」機能はまともに使ったことはなかったのですが、ここまで正確に表示されるとは思っていませんでした。

ここらへんは、テーマの更新前の画像と比較すると分りやすいと思います。

「テーマの更新」前

プレビュー画面など

プレビュー画面なんて、もうほとんどブラウザと同じです。

まとめ

これまでWindows Live Writerの「テーマの更新」機能は、うまくいったことがなかったので放置していました。

しかしそれが、なんともったいないことだったのか。編集のしやすさが段違いです。

まず、いつも見慣れている画面と、文字の大きさと、カラム幅なので見やすさが全然違います。すごく読みやすいので、確認作業がはかどり、誤字脱字の発見がしやすくなりました。

もし、Windows Live Writerで、テーマのスタイルを反映させて利用していない場合は、是非この機会に「テーマの更新」を成功させることをお勧めします。

本当、この編集のしやすさをこれまで味わえなかったのは、ものすごく損した気分。

Simplicityで「テーマの更新」を成功させる方法

SimplicityでWindows Live Writerのテーマ更新を成功させる具体的な方法を書きました。

Simplicity＆WLWユーザーで、「テーマの更新」がうまくいかない場合は、以下の方法を試してみてください。

Windows Live WriterでSimplicityの「テーマの更新」を失敗しない方法

SimplicityでWindows Live Writerのテーマ更新が失敗するなんて人には、1度試してみて欲しい方法です。

『絶対に失敗しないWindows Live Writerの「テーマの更新」方法を探る！』へのコメント

名前:yui 投稿日：2017/03/10(金) 16:06:25 ID：c1b209179
お世話になっております。
yuiと申します。
先週wordpressを始めたばかりの初心者なので見当違いな質問かもしれませんが、よろしくお願いします。
Open Live Writer0.6.0.0
WordPress 4.7.3
Simplicity2 childバージョン: 20161002
こちらを利用させていただいております。
見出しなどのテーマを反映させるべく、まずは

こちらを試させていただきました。
(固定ページ未作成のため「フロントページの表示」画面が出ず未設定)
「プレビュー」画面は色など大分取り込めたのですが、「見出し」が反映されませんでした。
次にこちらの記事の作業をさせていただいたのですが変化なしでした。
行った内容が間違っていると思いますので、ご確認よろしくお願いします。
1．「テーマの編集」Simplicity2 childに「index.php」が無かったため親のSimplicity2確認。
「個別投稿 (single.php)」の中身を全部コピー。
→「メインインデックスのテンプレート (index.php)」の中身を一度消し空欄にしてから上記コピーした内容を記述。
2.「ファイルの更新」
3.OLWで「テーマの更新」
反映されませんでした。
(念のため、テーマを親･子それぞれ有効にして試してみましたが結果は同じでした)
やはりやり方が間違っているのでしょうか？
お忙しいと思いますが改善策を教えていただけますでしょうか
名前:わいひら投稿日：2017/03/10(金) 21:41:43 ID：b7b20ec68
タイトルにあるように、この記事はWindows Live Writerのやり方です。
Open Live Writerは、使ったことがないですし、どこまで互換性があるのか分からないので、僕には原因はわからないです。
ただ、僕も最近Windows Live WriterにSimplicityテーマを取り込む方法で、Windows Live Writerでテーマの取得を行ったのですが、見出しだけはどういうわけか取得できませんでした。
以前と全く同じ方法で僕もやったのですが、「見出しだけが取得できない」という症状になり、僕もそれについての原因はわかってないです。
ただ、見出し以外は特に問題もないので、そのまま利用しています。
名前:yui 投稿日：2017/03/11(土) 02:04:10 ID：57846a032
ご連絡ありがとうございます。
WLWでもうまくいかない状態なのですね･･･。
仕様などもいろいろ変わってしまっているんですね。
相談に乗っていただいてありがとうございました。
名前:わいひら投稿日：2017/03/11(土) 13:02:35 ID：83b8e3d92
Windows Live Writerも、1年前くらいから、見出しだけなぜか取得できなくなってしまいました。
僕の環境だけかと思っていたのですが、Open Live Writerでもそうなんですね。
Windows Live Writerがエディター表示に使用している、スタイルを変更すれば、見出しも変更できると思うのですが、僕はスタイルが書かれた部分を探すのが面倒くさいのでやってなかったりします。
とりあえず見出し以外はスタイルを取得できているので、「まあいいかな」と妥協して利用しています。