【MarsEdit】初心者必見!プレビュー画面に自分のブログを表示させる方法

IMG_3065

ずーっと昔に購入したMarsEditを使ってみようと最近になって試行錯誤しているタムきち(@tamukichi_net)です。

MardsEditのプレビューって便利ですよね。
ただ、なんとなくのレイアウトはわかるので便利は便利なんですが
「やっぱり自分のブログと同じデザインのプレビューを見たい」
って思いますよね。
今回はそんなあなたのために(私がそうしたかったからだけど)自分のブログのデザインをプレビューするための方法を説明していきますよ。(自分の備忘録にもなるし、ね。)

スポンサーリンク

どう変わるの

まずは実際に見てもらうとわかると思います。

▼通常のプレビュー
めっちゃシンプル。白黒です。

スクリーンショット 2016 07 02 17 19 15

▼設定後のプレビュー
ちゃんとブログのデザインが反映されてます。

スクリーンショット 2016 07 02 17 18 44

自分のブログのデザインの方がカラフルだし、やる気も出ますよね!

スポンサーリンク

設定

じゃあ実際に設定していきましょう。

パソコンにくわしくない私でもできたんだから、あなたもきっとできます。

「下書き」記事を作る

上記のとおり、下書きの記事を作ります。

これはまず、MarsEditでプレビュー画面に設定されているを書き換えるための HTMLを取得するためです。

スクリーンショット 2016 07 01 22 19 22
  • タイトル欄→#タイトル#と入力
  • 本文欄→#本文#と入力

▲上記のようにそれぞれ入力します。
入力後、「下書きとして保存」し、プレビュー表示します。

「下書き」記事からHTMLコードを取得する

下書きの記事ができたら、そのHTMLコードを取得しますよ。

プレビュー表示後、メニューバーの「開発」から「ページのソースを表示」を選択します。

スクリーンショット 2016 07 02 0 49 09

▼そうすると画面下にHTMLコードがつらつらと表示されます。
「全て選択(control+A)」し、一旦「テキストエディタ」に貼りつけます。

スクリーンショット 2016 07 02 17 03 12

▼ちなみに、私が使ったテキストエディタは「CotEditor」というアプリです。

やっぱり日本語表示なのが使いやすい。無料だしおすすめ。

Mineko IMANISHI
posted with iTunesLinker at 16.07.02
「ページのソースを表示する」なんてないよって人は……
はじめは表示されない設定です。表示されるように変更しましょう。

▼メニューバーの「Safari」から「環境設定」を開きます。

スクリーンショット 2016 07 02 0 47 39

「詳細」の一番下にある「メニューバーに”開発”メニューを表示」を選択します。

スクリーンショット 2016 07 02 0 48 23

これで先ほどのHTMLコードがつらつらと表示されるはずです。

テキストエディタに貼りつけたHTMLを修正する

次にテキストエディタに貼りつけたHTMLを少しだけ修正します。
下書きのときに入力した#タイトル#と#本文#をそれぞれ直してきますよ。

▼「CotEditor」の場合は、メニューバーの「検索」から「検索」を選択

スクリーンショット 2016 07 02 17 04 11

「#タイトル#」を検索し、「# title #」へ「すべて置換」します。

スクリーンショット 2016 07 02 17 04 58

▼タイトルと同じように「#本文#」を検索し、「#body##extended#」へ「すべて置換」します。

スクリーンショット 2016 07 02 17 43 17

ここまで終わればもう一息。

このHTMLをMarsEditに貼りつけていきますよ。

注意
このHTMLの中にGoogleAnalyticsのタグが入っていると、MarsEditでプレビューを表示するたびにカウントされてしまうそうです!
「UA-」で検索してみて、該当するタグが入っていたら消すようにしてください。
ちなみに私はWordPressからログインすれば自分のアクセスを除外できるというプラグイン「Ultimate Google Analytics改」を導入していたためか、問題ありませんでした。

【Google アナリティクス】自分のアクセスを除外するプラグイン「Ultimate Google Analytics改」

2016.06.12

HTMLコードをMarsEditへ

修正したHTMLコードをMarsEditの該当する箇所に貼りつけます。

▼MardsEditのメニューバー「Blog」から「Edit Preview Template…」を選択します。

スクリーンショット 2016 07 02 17 11 14

▼元はこんなHTMLコードが入っています。
これをすべて削除し、先ほどの修正したHTMLコードを貼りつけます。

スクリーンショット 2016 07 02 17 12 31
心配な人は
一応元のHTMLコードをコピーして別にテキストエディタに貼りつけて保存等しておけば安心ですね。

▼こんな感じにつらつら長いものになります。

スクリーンショット 2016 07 02 17 12 54

以下のブログを参考にさせていただきました。
とても分かりやすくてありがたい。

スポンサーリンク

おわりに

これで自分のブログのデザインのプレビューができました。
パソコンに詳しくなくても、上記のようなブログを見れば私でもできました。
最終的にはWordPressから確認はしますが、MarsEditからプレビューを見れるということはWordPressで確認する回数が減るので効率的ですよ。
あなたもぜひお試しあれ。

ABOUTこの記事をかいた人

タムきち

医療機関で働きながら、4歳の娘とパパの3人で暮らし毎日奮闘している28歳のママ。 楽しそうでブログを始めました。 iPhone、Macやガジェットがだいすき。最近はおしゃれにハマっていて、購入品紹介やコーディネートの記事が多いです。 「WEAR」始めました。 ➡︎「WEAR」でたむきちのコーデを見てみる