LINKMarsEditでせかせかとブログを書いているtaka(@takaiphone2010)です。前々からMarsEditのプレビュー画面のテンプレートを変更できるのは知っていたのですが、いつかやろうタスクになってしばらく放置しっぱなしでした。この度、自分のブログのスタイルをプレビュー画面に反映させるべく対応を行ったので書きます。LINKプレビュー画面のカスタマイズにあたってなのですが、普通は記事部分だけをプレビューできればよいという方が多いようなのですが、自分はどうしても、ブラウザでプレビューする時のまんまをMarsEditのプレビュー画面でも実現させたくなりました。いうのはつまり、ヘッダー、フッターやナビも付いたページ全体像を俯瞰して見れるということです。結果的には完全にブラウザでのプレビューまでには持っていけれなかったのですが、ほぼ見た目上同じ状態にできたので、できるだけ簡単に実施する方法として紹介します。HTMLやCSSが詳しい人はなんとでもなると思うのですが、あくまで私のような詳しくない人向けです。自分でもかなり独自で傲慢なやり方のように感じていますが、実現するひとつの方法案ということで。サンプル記事のプレビューのHTMLを取得まずは、自分のブログで公開しない仮の記事を作成してプレビュー表示を行います。本文は「#本文#」といった最低限の内容にします。上記の文字列内容は後で置換に使うだけなので、別になんでもいいです。下書き保存をして、プレビュー表示を行います。表示されたプレビュー画面でHTMLソースを表示させます。表示されたHTMLソースをまるごと選択してコピーします。取得したHTMLをテキストエディタに貼付けます。続いて、テキストエディタの検索&置換機能を使って#タイトル#と#本文#の部分をMarsEditのテンプレートで使用されるタグに置換します。置換が完了すれば、そのソース全体を再度コピーします。MarsEditのテンプレート編集を開きます。Template」を選択。テンプレート編集画面が表示されます。デフォルトのテンプレート内容がセットされていますが、すべて削除して、コピーしていたHTMLソースを丸ごと貼付けます。Changes」をクリック。これでテンプレート設定の完了です。記事のプレビューを見てみましょう。自分のブログ全体のデザインが反映されています!画面上部にWordPressのログイン時に表示されるナビ部分まで含まれています。こちらを非表示にしようと思えばHTMLソースの中から該当部分を見つけ出し削除すればできると思います。私はこの部分は気にならないのでそのままです。そのほか、投稿日時や右ナビ部分は最初のプレビュー画面の時のものがそのまま反映されるので、通常は動的に反映される部分が静的に固定となったりします。見た目を最終形にできるだけ合わせたいだけなので、気になりません。改行がうまく反映されないとりあえず、自分のブログの全体像をテンプレートに反映はできましたが、記事文章の改行がうまく反映されません。1行空けての改行は上手くいくみたいですが、単純な改行だとプレビューには反映されないです。これの原因はわからなかったのであきらめました。注意点2012/12追加ここで、注意点があります。コピーしたテンプレートの中にGoogleAnalyticsのタグが入っていないか?確認しましょう。タグが入っていると、MarsEditでプレビューを表示するたびにGoogleAnalyticsのタグが呼び出され、無駄なアクセス数カウントが発生します。詳しくは下記エントリーを参照ください。MarsEditのプレビュー画面に自分のブログ画面を反映させている方は要注意!チェックしてください。LifeさいごにMarsEditのプレビュー機能は前から使っていますが、結局最終形の画面はブラウザで見ないとわからないので、WordPressのプレビュー画面でも何度も見返していました。この設定を行ってWordPressでのプレビューがゼロになった訳ではないですが、全体像がMarsEdit時点でリアルタイムに確認できるようになったので、確実にWordPressでの最終確認回数は減りました。プレビュー画面を私のようにできるだけブラウザで見ているものに近づけたい人であれば、ぜひ試してみてください。CrossModeLife3周年となりました。引き続きよろしくお願い致します。私がお世話になっているマップ検索系iPhoneアプリ私が”必ず”毎日使っているアプリRECOMMENDこちらの記事も人気です。2012.12.9ブロネクオンエアー第1回終わりました。2013.3.14TextExpanderのスニペット晒し。2013.2.25ブログを書いていると国語力が高まると思う。CrossModeLifeについて岡山在住のアラフォーオヤジが日々生活していく中で、便利、役立つ、おもしろい、シェアしたいと思った情報を気ままに発信しています。@takaiphone2010詳しいプロフィールはこちらFacebookページいいね!していただけるとFacebookで最新記事が受けとれます。