Macのブログエディタ『MarsEdit』は、ぼくがいつも愛用しているツール。WordPress（ワードプレス）で『WEBメディア』を構築して運用していくのなら、必ず使って欲しいツールの1つです。
その理由は『MarsEditでWordPress（ワードプレス）の投稿を10倍楽にする』でも伝えた通りですが、MarsEditのメリットのひとつにリアルタイムにプレビューを確認できるというものがあります。（リアルタイムにプレビューを確認するメリットは、『MarsEditでWordPress（ワードプレス）の投稿を10倍楽にする』を確認してくださいね。）
ただし、これを実現するには少しカスタマイズが必要ということで、今日は『MarsEditのプレビュー画面に、WordPress（ワードプレス）サイトのデザインを適用する方法』をみていきたいと思います。
MarsEditのプレビューに、WordPressのデザインを反映させる
STEP1：仮投稿をする
まずはWordPress（ワードプレス）管理画面にログインして、仮の投稿を行います。
その際に、上記の画像のようにタイトル部分に『▼タイトル▼』。本文の部分に『▼本文▼』と入力します。これは後で検索できれば何の文字列でも大丈夫です。
そのまま公開をしてしまうのではなく、『プレビュー』ボタンをクリックしてサイト上での表示を確認します。
STEP2：ソースコードをゲットする
サイト上でプレビュー画面で、ソースを取得します。
Google Chromeの場合は、トップメニューの『表示 > 開発/管理 > ソースを表示』で表示できます。
表示されたソースを、全部選択してコピーしておきましょう。
STEP3：ソースをテキストエディタで編集
先ほどコピーしたソースを、テキストエディタ (Cotediterなど）に貼り付けます。
テキストエディタの「検索&置換」の機能を使って以下のとおり置換を行います。
- 『▼タイトル▼』を『#title#』に全部置換
- 『▼本文▼』を『#body##extended#』に全部置換
で、置換されたカスタマイズ済みのソースを、コピーしておきます。
STEP4：MarsEditの環境設定で設定する
MarsEditを起動して、トップメニューの『Blog > Edit Preview Template…』を選択。
STEP3でカスタマイズしたソースを、丸ごとここに貼り付けます。一応…、バックアップをとっておいたほうがいいですね。
ソースを貼りつけたら、『Save Changes』を押して、保存します。
以上で完了！きちんと設定ができていれば、図のように実際のサイトの表示に沿ったプレビューを確認することができるようになります。
最後にもうひと押し
ここまでで問題なくサイトの表示に沿った形でプレビューを確認することができるのですが、実は動作がもっさりしてしまう可能性があります。プレビューの生成に時間がかかってしまうんですね。
実際に記事を執筆している際に必要な箇所は本文のところだけ。ヘッダーやサイドバー、フッター部分というのは、記事執筆時にはプレビューする必要がありません。
ということで、先ほどの『Blog > Edit Preview Template…』の部分で、もう一度ソースを表示させて、ヘッダーやサイドバー、フッターの部分を削除してしまいましょう。
ヘッダーやサイドバーのタグ全体を削除してしまうというよりは、できるだけ表示を崩さないようにしながら、中身の部分だけ削除するといいと思います。
人生の向かう先が見えず悶々とした日々から抜け出したくて、転職を決意したぼく。主将宮本。勤務先はなんとマレーシアだった。。。ぼくは愛する妻と生まれたばかりの子供を日本に残し、単身マレーシアへいくことを決断した。
マレーシアに来て、WEBメディアに関わるようになり、日本よりも物価が低い国での暮らしも知り、アジア各国を回って経済を知り・・・投資を知り、騙されたりもして、辿り着いた先。
ぼくは『マーベリックWEBメディア部』を創り活動を始めた。ぼくが知り得るWEBメディア運営の情報を、メルマガという形で部員全員に共有させていただき、部員全員で「好きを仕事に」を目指していくWEB上の部活動だ！
どんなビジネスをするにしろ、これからはWEBメディアの運営が不可欠。期間限定で無料登録公開中。
