WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更

2014/04/062015/02/16

前回の記事、「WordPress[MarsEdit] 過去記事を３０件以上に変更」で既に多くのブロガーの方がお使いのMarsEditを少し紹介しましたが、今回MarsEditを導入したらまずやっておきたい設定を備忘録として残したいと思います。最初はちょっと難しそうに見えるMarsEditですが２、３回このエディターから記事を投稿したら慣れると思うのでまだ使った事がない方は是非使ってみてください。このアプリ価格がちょっとお高い感じですが、今は値段分の意味があったかなと思っています。

[adsense]

プレビュー画面を自分のブログデザインにする

MarsEditを使いたかった理由はここにある！とも言えるのが「プレビュー画面を自分のブログデザインにする」です。

上記の写真だと左がエディット画面で右がプレビュー画面です。MarsEditではプレビュー画面をカスタマイズすると自分のブログデザインに変更できます。実際のブログでの表示を確認しつつ記事が書けるので、「あ、ここ改行した方が見た目綺麗かも！？」「タイトルは３文字追加した方が読みやすいかも！？」みたいのがリアルタイムで確認しながら作業が出来ます。ここで注意なのはブログのデザインを「完璧」に再現することは出来ませんが、ほぼ正確に表示出来ます。あとプレビュー画面がたまにバグって止まりますが、再読み込みすれば大丈夫です。それでは実際のカスタマイズの方法を残します。

WordPressで記事を新規で作成します

作成した記事のタイトル部分に「#title#」と入れ、本文の部分には「#body##extended#」と入力します。

入力後右側の「プレビュー」ボタンをクリックしてプレビューします。

現状上記のようにプレビューされます。

次にブラウザのソースプレビュー画面からソースをコピーしてきます。Google「Chrome」だとOption+Command+Uかメニューバーから「View」→　「Developer」 →　「View Source」でソース画面を表示出来ます。

ソース全体をcommand+Aなどで全選択してコピーします。

[adsense]

MarsEditにペースト

次にコピーしたソースをMarsEditの「Edit Preview Template」にペーストします。

MarsEditのメインページを開いて、変更したいブログを選択して「右クリック」をします。「Edit Preview Template」を開いて、元々書かれているソースコードを全選択した後に、ペーストして上書きしてください。

完成

全ての作業が終わったら実際にプレビュー画面を開いて確認してみましょう。

以上、「WordPress[MarsEdit] プレビュー画面を自分のブログデザインにする」でした。MarsEditに関してもまだ色々あるのでまた投稿したいと思います。読んで頂いてありがとうございました。

[adsense]