Categories: MacWordPress

Mac 人気ブログエディタ「MarsEdit 4」の設定方法

初めに

2020年11月再編集して、MarsEditと”Alfredのショートカット”Snippets”を紐付ける方法を追加しました。

シリーズ最新版となる「MarsEdit 4」は、「macOS Mojave」に対応し、マークダウンのプレビュー機能のほか、挿入する画像サイズの指定、投稿したすべての記事を取得できるなどの新機能が追加されています。

 

またMacがダークモードになったせいか「MarsEdit 4」もダークモードです。

 

 

旧バージョンの「MarsEdit 3」を使用していて問題はなかったのですが、macのOSが「macOS Mojave 」に変わってから記事をサーバーにアップできなくなった。

 

調べてみた結果「MarsEdit 4」に変えるか?他のブログエディターを使うしか無いようです。

 

知り合いからは「MarsEdit 4」は「評判があまり良くない、するぷろZが良いらしい」と聞いて調べたのですが、確かに、「MarsEdit 4」の評価を悪く書いている人がいますが・・・?

MarsEdit4にすることにした。

 

MarsEdit4にすることにした

使い慣れていることもあり「MarsEdit4」にすることにしました。

 

まず自分がWordpressで使用しているテーマをブログで書く時に「プレビュー上」で反映させ見ながら書ける事は大きい、またオールマイティーに使うことができ、結局「MarsEdit 4」を無料でダウンロードして14日間試用することにしました。

 

公式サイト「red sweater 」で購入する。公式サイトなら体験版もあるので使ってみてから良ければ購入するのも良いかもしれません。

 

テスト導入する人はこちら・・・ 「red sweater 」からダウンロードすると良い です。

 

MarsEditは日本語には対応しておらず、すべて英語表記となっています。ですから当初「MarsEdit 3」を購入した時も、しばらくは設定が分からず放置していました。

 

しかし設定後Wordpressで使用しているテーマをプレビュー画面で確認しながらブログ作成できるので、長い間、便利に使用していました。

 

ブログエディターを使用する良い点

ブログエディターで、下書きしてほぼ完成したところで、投稿できる点です。
画像なども設定しとけば入れたい位置に入れることができビジアルエディターで確認しながら、書くことができるなど〜など・・・

  • ブログのアイキャッチ画像の保存
  • 画像サイズの自由な変更
  • ローカルファイルの保存履歴の強化
  • プレビュー画面のかんたん同期
  • テキスト入力を中央で行うタイプライターモード

ユーチューブ動画の貼り付けなどもその場で画面サイズなど調整できます。他にもあるかもしれません。

 

「MarsEdit 4」 をアップグレード価格で購入

Macブログアプリ「MarsEdit 3」を使用していて「MarsEdit 4」をアップグレード価格で購入する方法をしたい人は「gori.me」さんのブログに詳しく書かれていますので参照して下さい。

 

Macブログアプリ「MarsEdit 4」をアップグレード価格で購入する方法 「gori.me」

 

ちなみに僕は、アップグレード価格で購入を見落として、正規価格になってしまいました。しかし、色々な不具合を、かなり修正してきているようで現段階でも満足しています。

 

「MarsEdit 4」導入方法

初めに・・・テスト番を導入する人はこちら・・・ 「red sweater 」からダウンロードすると良いです。
もちろん公式サイトからも購入できます。為替の関係で金額が変動します。

 

まだ持っていない方はこちらから購入できます!

 

 

はじめから購入する人は「Mac App Storeで – iTunes – Apple」でダウンロードします。

初心者はこちらから購入が良いでしょう。

 

ブログの初期設定 ブログと、紐付ける。

MarsEdit4で「新しいサイト」を追加する。起動すると、ブログにを紐付けするウィザードが起動します。

起動しない場合は上部メニュー”MarsEdit”から”Preferences”をクリックします。

 

 

 

 

 

 

Preferences”の中の”Blogs”をクリックして”Publishing”をクリックして下の画像のところプラスボタンをクリックします。

 

プラスボタンをクリックすると下記の画面になります。

 

ブログ名とURLを入力

するとこんなウィンドウが表示されます。

ブログ名とサイトURL、パスワードを入力します。

 

登録の際に、二段階認証のプラグイン等は解除しておくことをオススメします。

こちらの2つを入力しましょう。

 

  • ブログ名
  • URLを入力

 

ブログ名 は 中山 富夫 美容塾
「ブログURL」というのはトップページのURLですね。このブログなら「https://tomio23.com/」がそうです。

 

入力したあとは「Continue」を押せばオッケーです。

ログインに成功すると「Connecting to your blog…」という表示がされるので、そのままContinueを押せば、初期設定は完了です。このような編集画面が終われば、使える状態になっています

 

WordPress管理画面の情報を入力

そしてWordPressの管理画面へログインする情報を入力します。

 

こちらの2つですね。

 

  • Username(ユーザーネーム = ID)
  • Password(パスワード)

 

僕の場合、Username(ユーザーネーム = ID)はtomio23です。
Password(パスワード)・・・・・・・

 

できたらOKをクリックで問題ありません。

 

「Continue」をクリック

次に出てきた画面は「Continue」をクリックします。

 

これでOKです。すると過去に書いた記事がダウンロードされます。

 

追加したブログを選択

さっき追加したブログを選択してください。

 

右クリック→「Edit Settings」

追加したブログの名前の上でマウスを右クリックします。するとウィンドウが出るので、その中から「Edit Settings」を選択してください。

 

 

もしくは上のメニューバーからBlog→Edit Settingsでもオッケーです。

 

 

記事投稿の設定をする

そして、記事投稿の設定をします。

まず、タブにあるBlogs → Editingを選択して下さい。

 

 

(A) Size Defaults To Full Size
画像挿入時に画像サイズを(Width600px Height600px)に設定しています。すぐ下にある「Width(画像の横幅)」と「Height(画像の縦の長さ)」を入力すればそのサイズに自動で縮小してくれます。

(B) Post Statusの変更
初期状態だと、投稿した瞬間に公開されてしまいます。Post Status Draft(投稿したときに「下書き」にする)「Draft」を選びます。

ブラウザで確認してから公開するケースが一般的ではないかと思いますので投稿時に、下書きとしてアップロードされるよう設定変更しておきます。

(C) Comments Closed
(コメント欄を表示させない)Closed 僕はこのようにな設定に変更しています。

 

プレビューの見た目をブログデザインと合わせる

デフォルトの場合、実際のサイトの見た目とことなるため、投稿したときのイメージが持ちにくいです。

 

MarsEditのプレビュー画面から読み込む

「Blog->Edit Preview Template…」からプレビュー画面を表示し・・・

 

「Download Template…」をクリックします。

 

僕はこれだけでうまくいきました。ブログから自動的にHTMLを読み込んでテンプレートを作成してくれます。旧バージョンで、できていたからでしょうか。簡単にできました。

 

これでうまくいかない時は、基本的なプレビューテンプレートを作成する方法です。

 

WordPress投稿画面からデータを取得する

一回、Wordpressの投稿画面からデータを持ってくる必要があります。とりあえず投稿画面→新規投稿画面を開いて次の画像のようにタイトルと本文を入力しましょう。

 

タイトルの部分に「#title#」、本文には「#body# #extended#」と入力します。そしてプレビューをクリックします。

 

いつもやっている通りにWordPressの投稿から記事を作成します。

 

 

そしてプレビューをクリックします。

 

 

ここでプレビューを開きます。

プレービュー画面から、マウスを右クリックするとウィンドウが開き、中からページの「ソースを表示」をクリックします。

 

 

開いたら、「ソースを表示」をクリックします。Chromeだったら右クリックすれば「ソースを表示」がありますので、それをクリックします。

 

(僕はChromeを使っていますが、ブラウザが違う方は多少表記が違うかもしれません)

 

ページのソースコードが表示されたら、そのまますべて・・・
「Command+A」 で全選択します。この文字列を「Command+C」で全部コピーします。

 

Command+A で全選択、Command + C でコピーになります。これでWordpress側から、ほしいデータを拾うことが出来ました。

 

これをMarsEdit側に反映させていきます。

 

MarsEdit側の設定をする

MarsEditを開いたら、ブログ名の上で右クリックで「Edit Preview Template」をクリックします。

 

表示させたエディタを全て選択し、先程コピーしたHTMLを上書きペーストする。

 

 

必要のないものを削除します

テンプレートタグを入れたら、ついでに必要のないJavaScriptやGoogle Analyticsなどのコードも削除しておくことをオススメします。ブログのヘッダやフッタはプレビューに必要ないわけですので・・・記事部分を残してばっさり削除しましょう。

 

テンプレートを壊してしまった……という場合でも、「Restore Default」ボタンからいつでもデフォルト状態に戻せるので安心です。

 

具体的に行った編集は

貼付けたら、少し編集を加えます。具体的に行った編集は以下の通りです。

 

  • GoogleAnalytics(アクセス解析)用のタグを削除
  • Chartbeat(リアルタイムアクセス解析)用のタグを削除
  • GoogleAdsense(広告)のタグを削除
  • サイドバーのデザインの崩れを修正

 

GoogleAnalitycsを削除

「GoogleAnalitycs」などのアクセス解析ツールを使っている場合は、余計なアクセスが増えてしまうため、アクセス解析コードを削除する。

 

 

「command+F」で検索窓を出し「GoogleAnalytics」と入力し、該当箇所を削除します。

 

(A) 画面上で「⌘+F」でウィンドーを開きます。
(B)「 GoogleAnalitycs」など削除項目を入力します。
(C) Previousをクリックすると、その部分が表示されます。
(D) この部分を削除します。
(E) Nextをクリックして削除します。

 

上記に書いた部分を検索し削除したら、「Save Change」をクリックします。

 

以上の設定で、MarsEditでブログを書くときのプレビュー画面が、実際のWordpressのデザインとほぼ同じ表示になります。

 

プレビューテンプレートの中で使えるタグ

プレビューテンプレートの中で使えるタグは以下の通り。

 

#title# Title                       記事タイトル
#url# URL                      記事のパーマリンク
#body# Body                            本文
#categories# Categories          カテゴリー
#tags# Tags                             タグ
#extended# Entended             追記
#excerpt# Excerpt                   抜粋
#weblogName# Blog Name    ブログ名
#weblogURL# Blog URL         ブログのURL

 

これらが最低限必要なんものになります。

 

普段使用しているショートカットを使用する

僕の場合は、Alfredを使用っしていますので、その中の”Snippets”ショートカットを使うように関連付けます。

もしMacパソコン上で”Alfred”を使用してブログを書くのに”MarsEdit”を使用しているのなら、紐付けるとショートカット機能が便利に使えます。

 

MarsEditと”Alfredのショートカット”Snippets”を紐付ける方法

実は、パソコン換え換えの時に、この紐付けることが分からなくて苦労しました。もちろんMarsEditにもショートかと機能はありますが・・・

普段から登録してあるショートカットが使えると、ブログを書くのに時短になります。

MarsEditと”Alfredのショートカット”Snippets”ショートカットを紐付ける

まず、Alfredの検索窓がでます。検索画面が出ますので、ここに”A”を入れましょう。

 

Show Alfred  Preferencesが出ますのでここをクリックして  Preferences画面を出しましょう。

 

 

Preferences画面がでましたら→Features→Snippetsをクリックしてショートカット設定画面を表示させます。

下の画像を参考にして、同じようにして”Automatically”のところにチェックを入れると”MarsEdit”で使えるようになります。

この連携はかなり便利です。以前のパソコンで連携できていたのに、新たなパソコンで使えなかったので、1 日かかりました。

ですので皆さんに共有です。

これでかなりの時短になります。

 

 

tomio23