AIUEO Lab2

1年のうち250日は夕飯を作る主夫が、iPhoneや料理、気になったものを紹介するブログです。

はてなブログのデザインそのままMarsEditでリアルタイムプレビューする方法

120615-0001

初期設定だとイメージしづらい

MarsEditはリアルタイムプレビューしながら記事が書ける便利なエディタです。

MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more.
カテゴリ: ソーシャルネットワーキング, 仕事効率化

でも、デフォルトのままだと自分のブログと実際には違う表示になるのでいまいちイメージしにくいんですよね。

ある程度書いてから下書きをブラウザでプレビューしてもいいんですが、はてなブログはプレビュー画面が狭いんです。記事の公開前に何度もプレビューして誤字や言い回しのチェックをしたい私にはちょっぴりストレスでした。

ブログ記事編集_-_はてなブログ.png

MarsEditのリアルタイムプレビューについて検索してみると、WordPressの見た目を反映する方法を書いている方はたくさんいましたが、はてなブログに関して書いている人はいないようだったので書いておきます。

自分のブログのHTMLをコピーする

はてなブログは下書きのプレビューが、上に載せた画像のようにブラウザの小さい枠内にしか表示できません。ブログの見た目そのままのHTMLを取得するには一度テスト記事を公開するか、同じデザインのテストブログを作成しテスト記事を公開してください。

タイトルに「#title#」本文に「#body##extended#」と入力して[公開]してください。

AIUEO_Lab2.png

公開した記事を表示してソースを表示します。Chromeなら表示された画面で右クリックして[ページのソースを表示]をクリック。

スクリーンショット_2014-03-22_21_40_04.png

ソースが表示されたら[⌘+A]で全てを選択し[⌘+C]でコピーします。

view-source_akiueo_hatenablog_com_entry_2014_03_22_190936.png

MarsEditでEdit Preview Templateを設定する

MarsEditに設定したはてなブログを右クリックし、[Edit Preview Template]をクリック。

スクリーンショット_2014-03-22_21_53_01.png

表示された初期のHTMLを全て消して、先ほどコピーしたHTMLを貼り付けます。

Preview_Template.png

GoogleAnalitycsを使ってアクセス解析している方は、プレビューのたびに自らのアクセスが増えてしまうためコードを削除します。 「command+F」で検索窓を出し「Google」と検索。

下記の画像を参考に該当箇所を削除してください。サイドバーにGoogle AdSenseを設置している場合は、そこも削除しておきます。終わったら右下の[Save Changes]をクリックして保存。

スクリーンショット_2014-03-22_19_20_37.png

これでMarsEditのプレビュー画面がブログのデザインと同じになります。

-2022-jp?B?GyRCJUkkRyMxSFY/TTUkJE4lKyVsITwkcjxCOl0kSzpuGyhC?= ってみた_と_MarsEdit.png

Markdownで書いている人へ

はてなブログをMarkdown記法で書いている方は、MarsEditもMarkdownで書けるように設定しましょう。

[Editing]→[Preview Text Filter]を[Markdown]に変更。

_はてなブログ__Settings_と_MarsEdit.png

Markdownで書いている方はテスト公開する際「# title #」と書いても太字になってしまうので、別のハイフンなどの記号で一度書いてから置換してください。

まとめ

これではてなブログを書くのがストレスフリーになりました。カテゴリやアイキャッチ画像の設定、カスタムURLはブラウザでやらないといけないですけどね。

画像をはてなフォトライフにアップしている場合や、Twitterを埋め込みたい時はブラウザで最後に入れればいいと思います。

MarsEditではてなブログを書いている方にはオススメです。

MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more.
カテゴリ: ソーシャルネットワーキング, 仕事効率化