[Marsedit] ブログの見た目そのままでリアルタイムプレビューする方法

Marseditを導入して記事を書いているけれど、今ひとつ解せない部分。
それはプレビュー画面が実際のブログと見た目が違うこと!

確かにリアルタイムプレビューは便利だけど、やっぱりブログ見た目のままじゃないと意味ないですよね。
そこで今回は、ブログそのままの状態でプレビューする方法を紹介します。

 

MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more.
カテゴリ: ソーシャルネットワーキング
現在の価格: ¥4,000
手順を紹介

デフォルトの状態で記事を書いて、プレビュー画面を表示するとこんな感じ。

16

まあ、確かにプレビューはされているけど、実際のブログとはほど遠い感じがします。
これだと、実際にどんな感じに仕上がっているのかわかりません。

ですので、ちょっと手を加えていきます。

仮の記事を作成する

WordPressの管理画面を使用して、プレビュー用の仮の記事を作ります。

21

Titleは、「#title#」と入力、本文は、「#body##extended#」と記載して「下書きとして保存」ボタンを押します。保存できたら、「プレビュー」をクリックして、ブラウザ表示します。

 

すると、こんな表示になるはずです。
22

 

ここで、ページのソースを表示させます。

23

ChromeやIEなら右クリックで表示できますが、Safariでは表示されませんので、こちらの記事を参照してください。

[Mac] Safariを使用してページのソースコードを確認する方法  | Senbonsakura.com

 

ソースを表示したら、丸ごとコピーしておきます。

プレビュー画面を作成する

コピーができたら、Marseditを起動して、メニューバーの「Blog」→「Edit Preview Template」を表示します。

18

 

するとこんな画面が表示されます。

19

デフォルトの設定が記載されていますので、これを全部消して、先ほどコピーしたソースをドン!と貼り付けます。貼り付けたら、右下の「Save Changes」をクリックして保存します。

基本的にはこれでOK!
では、Previewをクリックしてみましょう!

 

24

ほら、見た目通りになりましたね!

注意点

SEO対策や、ブログの分析などで「Google Analytics」を使用している方も多いと思います。その際に、ページのソースコードの中に「Google Analytics」の記載が入っていることがあります。

その場合には、削除しておかないとプレビューのたびにアクセスが発生して、実際のデータが異なってしまう場合があります。「Google Analytics」側で、IPアドレスのフィルタなどが設定されていればOKですが、念のため「Google Analytics」の記載は全部削除してしまいましょう。

Edit Preview Template画面で、コマンド+Fキーを押すと文字列の検索ができます。「google-analytics.com」で検索して、その文字を含むスクリプト全体を丸ごと削除しておけば大丈夫です。

<script type="text/javascript">
		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-○○']);
		  _gaq.push(['_trackPageview']);
		  (function() {
		    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();
		</script>

の部分ですね。

 


これでずいぶんと使い勝手が良くなったはずです。

次回は、画像リンクをMarseditから貼る方法をご紹介します。

 

MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more.
カテゴリ: ソーシャルネットワーキング
現在の価格: ¥4,000
Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>