MacのMarsEditとWordPressビジュアルエディタの比較

MarsEditIcon

MacBook Pro 13インチでWordPressブログを書くエディタを試行錯誤していたんですけど、MacアプリのMarsEditを使うことになりそうです。

ノートパソコンの13インチってとくに画面の縦が狭いのでブログエディタ選びが難しくなります。

Web画面のエディタにはビジュアルエディタとテキストエディタの2種類がありますが、

  • ビジュアルエディタだと写真がそのまま表示されて全体を把握しにくい
  • テキストエディタだとそもそも使いにくい

という問題があって13インチのノートパソコンではちょっと使いにくいのが本音でした。

そこでMarsEditならHTML書きながらリアルタイムプレビューされるし全体的に使いやすくてビジュアルエディタとテキストエディタの良いとこ取りのようなアプリとなっています。

※2017年12月にアップデートされ、MarsEdit 4になりました。14日間の試用期間付き。6,000円。

カテゴリ: 仕事効率化, ソーシャルネットワーキング
価格: 無料 (掲載時)
スポンサーリンク

WordPressのブログエディタ

MacBook Pro(13インチ)でブログを書く方法としては以下を試しました。

  • WordPress標準のビジュアルエディタ
  • WordPress標準のテキストエディタ
  • MarsEdit

いろいろなんて言う割には誰でも使える標準のエディタとMarsEditしか試していません(笑)

他にもブログエディタはあるみたいですけど、ちょっと調べた限りMacでブログエディタを使うとしたらMarsEditが定番らしいので、情報を探すのも楽だと思います。

以下、実際にそれぞれのエディタのメリットやデメリットを簡単にメモしていきます。

WordPressのビジュアルエディタ

WordPressビジュアルエディタの編集画面

もともとWordPressの管理画面に実装されているエディタのビジュアルエディタです。誰でも使える標準の執筆モードですね。

Wordみたいに文字の色を変えたらそのまま見た目に反映されたり画像を挿入したら画像がそのまま見えたりしていわゆるリッチテキストエディタと言われるものです。

ただしちゃんと範囲選択しているのにHTMLタグが思ったとおりに適用されなかったりして好きじゃない人も多いようです。

個人的にはビジュアルエディタでもCSSを適用して自分のブログとまったく一緒の見た目にすればかなり使いやすいですけどね。

※追記:「OnePress Image Elevator」というプラグインを使えば貼り付けのショートカットキーCtrl+Vで画像の挿入が簡単にできるようになりました。

参考:「OnePress Image Elevator」の使い方と設定まとめ

これ以上簡単にしようがないほど効率化されたので、画像の挿入に関してはMarsEditよりも上記のほうが使いやすくなりました。

画面が広いデスクトップの場合は、Macでブログを書くとしてもビジュアルエディタのほうが便利かもしれません。

WordPressのテキストエディタ

WordPressテキストエディタ

標準のテキストエディタ(HTML編集モード)だとメリットはほぼありません。

タグは色分けされずに見難いし、プレビューボタンを押していちいちページを読み込まないと実際の見た目を確認できないし、

MacでもWindowsでもWordPress純正のテキストエディタはおすすめしません。テキストエディタ風にブログを書きたいなら、MarsEditなどのブログエディタの導入を考えたほうが良いでしょう。

MarsEditの特徴

さて、MarsEditの特徴を簡単に書いてみると、

リアルタイムプレビュー

MarsEditリアルタイムプレビュー

自分のCSSを適用すればまったく同じ見た目にしてリアルタイムにプレビューを表示することができます。

画面左側でHTMLエディタを書いて右側にプレビュー画面を表示しておけば編集しやすいです。

標準のビジュアルエディタにCSSを適用すればリアルタイムプレビューできるようなものですが、HTMLとプレビューを同時に見たい人ならMarsEditのほうが良いということになりますね。

プレビューは実際のCSSが反映される

MarsEditプレビューに自分のCSSを反映

MarsEditのプレビュー設定にはCSSの欄があって自分のブログと同じデザインにすることができます。

設定はCSSのコピペが必要だったりするのでやや難しいですが、プレビューするならあったほうが良い設定です。

欲を言えばMarsEditのリッチテキストモードでCSSデザインを完全に反映させて直接編集ができたら最高ですけど、それはできないみたいです。

画像の挿入が簡単

MarsEdit画像挿入

MarsEditでは画像をドラッグ&ドロップで挿入することができます。

  • 画像ファイルをドラッグ、Skitchからドラッグ、iPhotoからドラッグなど、ドラッグに融通が効く
  • MarsEditにドラッグする時に好きな場所に挿入できる。
  • 挿入と同時にclass名・alt・サイズなどの指定ができるので二度手間にならない
  • 大きな画像をドラッグしても自分が指定したサイズに自動でリサイズされてファイルサイズも小さくなるので画像の処理をあまり心配する必要がない

というふうにあまり難しいことを考えずにドラッグしまくれます。

ただしショートカットキーを使った貼り付けはできないのでその点ではWordPressビジュアルエディタでOnePress Image Elevatorのほうが使いやすいです。

画像の挿入に関しては、昔ほどMarsEditにアドバンテージはありません。

マークダウン記法が使える

MarsEditマークダウン記法

MarsEditではマークダウン記法というHTMLタグに変換される専用のタグを使った記法が使えます。

例えばh2見出しを書く場合、普通のタグとマークダウンを比較してみると、

  • 通常・・・ <h2>○○○</h2>
  • マークダウン・・・ ##○○○

普通は開始タグと閉じタグが必要なのにマークダウン記法では閉じタグが必要ないのでそのまま書き進めることができます。

マークダウン記法はMarsEditだけじゃなく、記法をサポートしているエディタだったら使えるので覚えておいて損はありません。

※追記:標準のビジュアルエディタでもマークダウン記法が使えるようになったので、そんなに差が無くなりました。

ショートカットキーでタグ入力

MarsEditショートカットキー

MarsEditでは自分の好きなHTMLタグをショートカットキーに割り当てることができるのでやろうと思えば何でもできます。

自分はとりあえずh2タグのマークダウン「##」をcontrol+2に割り当てたりしてシャープの連続入力さえワンアクションで入力できるようにしました。

  • control+2・・・「##」(h2見出し)
  • control+3・・・「###」(h3見出し)
  • control+4・・・「####」(h4見出し)
  • control+R・・・「- 」(リスト)

これらを設定するだけでもかなり書きやすくなります。

その他 <span class="sankou">参考</span> のようなspanとclassで囲む自分で作った長いタグで囲むようなものもショートカットキーを設定できるので自分専用のタグをショートカットキーで呼び出すことができます。

ただし、これもビジュアルエディタだとh2見出しはCtrl+Alt+2で標準でできるし、長いタグで囲むのもAddQuicktagというプラグインを使えばできます。

長いタグもショートカットキーで挿入できるというのはメリットの一つですが、設定が一つ一つ必要になるので、使い始めるのが意外と面倒だったりしますね。

HTMLタグの自動色分け

MarsEditのタグ色分け

開始タグ、class、URLなどがそれぞれ役割ごとに色分けされていてHTMLタグを直接いじりたい時に編集がしやすくなっています。

幅(width)を後で変えたい時とかすぐに見つけることができて便利。

HTML編集モードで書く人にとっては色分けが非常に重宝します。

プラグインによる機能拡張

AppHtmlME検索

例えばアプリの紹介リンクを作成するWebサービスにAppHtmlWebというサービスがありますがWebブラウザからアクセスする必要があるので操作がやや煩雑になります。

またMacのローカル上で動くAppStoreHelperというアプリもありWebブラウザよりマシですがMarsEditから画面を切り替えないといけないのでまだ完璧ではありません。

これをMarsEdit専用プラグインAppHtmlMEを組み込むことによってMarsEdit内でアプリの検索から貼り付けまでを完結することができるようになります。

  • プラグインを起動するショートカットキーを押す
  • iPhone・iPad・Macなどの検索対象を選択
  • アプリ名検索
  • 表示するレイアウトを選択
  • HTMLタグが挿入される

という手順で完結できます。素晴らしい。(ただし設定がけっこうややこしい)

上記はアプリのリンクを作成する例でAppHtmlMEについて書きましたがその他にもMarsEditに組み込むことができるプラグインはいろいろあります。

オフラインで編集可能

今となってはWebのビジュアルエディタもだんだん高機能になってきたのでその差が縮まっていますが、MarsEditだとオフラインでもブログが書けます。

テキストの執筆から画像の挿入までMarsEdit内で完結させておいて、ネットに繋がった時にアップロードができるので、作業を切り分けできるメリットはあります。

ただ、今どきオフラインでもブログを書くような人は少ないんじゃないかと思うので、そこまでのメリットとは思えません。

Wi-Fiや色んな所で使えるし、スマホだとテザリングができるので、完全にオフラインで集中して執筆するような状況は少ないんじゃないでしょうか。

WordPressのエディタの使い勝手が上がってきた

この記事を執筆してから時間も経ち、今ではWordPress標準のエディタもかなり便利になってきました。

上記までに紹介してきた中で、画像の挿入、マークダウン、基本的なHTMLタグのショートカットキー挿入など、ビジュアルエディタが確実に進化してきています。

画像の挿入はOnePress Image Elevatorというプラグインが登場して完全にビジュアルエディタのほうが便利になったし、マークダウンはWordPress 4.3から標準対応したし、実際の見た目をそのまま再現することも可能で、テーマによっては標準機能として搭載しているものも出てきました。

徐々にブログエディタが必要になることも少なくなるんじゃないかなぁって思ってます。

まとめ

以上、WordPressのビジュアルエディタとMarsEditを比較していきました。

昔ほどMarsEditにアドバンテージがありませんが、上記で上げてきた特徴と相性が良いなら検討の余地ありです。

カテゴリ: 仕事効率化, ソーシャルネットワーキング
価格: 無料 (掲載時)
スポンサーリンク

このページのシェア・保存はこちら

Amazonでの買い物について

当ブログではAmazonの商品をよく紹介しています。

いつもコンビニ払いしている人は、Amazonギフト券をチャージするとポイントが余分にもらえるので、今まで知らなかったという人は読んでみてください。

・キャンペーン中なら初回購入で1000ポイント付与
・チャージする金額によって0.5~2.0%ポイント付与

Amazonギフト券チャージタイプの詳細はこちら

また、プライム会員ならさらに0.5%上乗せされます。

ーーー

プライム会員の特典は「お急ぎ便無料」「プライムビデオで多数の映画やアニメ見放題」が特にお得。それ以外にも音楽・読書の使い放題サービスあり。

料金は年額3,900円(月換算325円)で、世界的に日本だけなぜか破格の安さになっているので、配送・映像・音楽・読書など、一部でもよく利用する人なら非常におすすめです。

プライム会員の詳細はこちら

学生ならPrime Studentがさらにお得

スポンサーリンク

著者のフォローはこちら

名前:
Twitter
YouTube

ーーー

制作物:「ノイズレスサーチ

プロフィール
問い合わせフォーム
当サイトご利用時の注意事項

記事が良いと思ったら、Twitterでツイートしたり、ブログなどで紹介してくださると嬉しいです。よろしくお願いします。

コメント(本文のみでOK。URL含むコメントは承認待ちになります)

メールアドレスが公開されることはありません。