2012年03月28日

実は優秀なブログエディタ!Mac専用「Mou」の設定と使い方

1.jpg


最近使い始めたMac専用のMarkDownエディタ「Mou」がとてもいいです。


今までブログエディタを使ってこなかったのですが、Seesaaの編集画面はリアルタイムにプレビューが見れないのが難点でした。いちいち確認ボタンを押さなければ結果が見れず、しかも確認画面にはユーザー指定のCSSが反映されないため、実際にどう見えるのかは公開してみるまで分からないという有様です。


そのため、記事を書くときはたびたび手戻りが発生していたのですが、Mouを使うことでこの問題が解決されそうです。説明書が日本語しかないため、取っ付きにくい人のために、今日はMouのブログエディタ用の設定方法を紹介します。



1.Mouをブログエディタ用にセットアップ



まずは以下から、Mouをダウンロードしましょう。

Mou - Markdown editor for web developers, on Mac OS X

インストールが終わったら、順にブログエディタ用に設定を変更していきます。


1.オートペア機能を外す

Mouのデフォルト設定では、たとえば「と入力すると、「」と出力され、自動でペアとなる文字が出力されます。しかしこのままだと、例えば”『”などの日本語記号が入力できないため、この設定を解除します。

2.jpg

まずはメニューの「Mou」を選び、「Preferences」を開きます。

3.jpg

画面が出てきたら、上のタブの中から「Editing」を選び、「Auto pair characters([]()"")」についているチェックを外します。これでオートペアの解除は完了です。


2.ブログ用のCSSを設定する

次に、ブラウザで表示した際のプレビューをリアルタイムで見るために、ブログ用のCSSをMouに設定します。

4.jpg

ブラウザでブログ画面を開いて、右クリックし、「ページのソースを表示」を選択します。

5.jpg

上記の画面が出たら、「link rel="stylesheet" href="あなたのブログのCSSファイルURL"…」と書かれている部分を探します。見つけたら、右クリックしてCSSファイルをデスクトップに保存します。

6.jpg

CSSファイルを保存したら、再度メニューから「Preferences」を開き、「CSS」のタブを選び、「Edit…」をクリックします。

7.jpg

Finderが開きますので、先程保存したCSSファイルをここに入れます。

8.jpg

最後に、「Reload」を押してから「Clearness」をクリックし、先程のCSSファイルを選択します。以上で設定は完了です。これで、h2やstrongなど、ブログで使っているタグをそのまま使うことが可能です。


2.Mouはこんな人にオススメ!



冒頭でもあげたように、ブログサービスの編集画面ではリアルタイムにプレビューが見れずに困っているという人に、Mouはかなりオススメです。ブログ用のCSSを設定してリアルタイムにプレビューを見ることができ、リンクや画像イメージもきちんと反映されるため、快適に記事を書くことができます。


また、ブログサービスの編集画面でもプレビューは出るよという人も、記事を更新していたらブラウザエラーが起こり、今まで書いていた内容が全部消えてしまった…という経験はないでしょうか?もう一度記事を書き直すのはとても労力が必要です。リスクを減らすために、Mouで保存しながら記事を書き、終わったら編集画面から投稿することをおすすめします。


3.ショートカット集



最後に、使うと便利かもしれないショートカット集です。

【強調】:テキストを選択して、「command + B」

【打ち消し線】:テキストを選択して、「command + U」

【リンクの挿入】:テキストを選択して、「control + Shift + L」

【画像の挿入】:テキストを選択して、「control + Shift + U」

【改行】:command + Return

【HTMLでエクスポート】:Option + command + E

【PDFでエクスポート】:Option + command + P

【引用タグ】:>

【数字リスト】:"1."+スペースキー

【ボタンリスト】:"*" + スペースキー


関連記事:
ブログを愛する人に、ブログ運営が10倍楽しくなるテクニック7選: 問題解決に効く1日10分の仕事ネタ


Mou_512.jpg

このエントリーをはてなブックマークに追加
RSSに登録
rssnewspaper.jpg
Related Posts Plugin for WordPress, Blogger...


posted by 河村 拓 at 11:00 | Comment(0) | TrackBack(0) | 問題解決に効くネタ
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/260289317
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。