MarsEdit4のプレビューデザイン変更方法【簡単】

Macアプリ・ソフト

「MarsEdit 4 のプレビュー画面のデザインって、どうやって自分のブログと同じように変更すればいいの?」って疑問を、解決していきます。

Mac のブログエディターアプリ「MarsEdit」。魅力の1つに、自分のブログと同じデザインや見た目で、記事をリアルタイムに執筆できるポイントがありますよね?

この記事では、初心者でもわかるように3つのステップにわけて、わかりやすく説明していきます。難しくないので、ぜひトライしてみてくださいね。

というわけで今回は、MarsEdit 4 のプレビューデザイン変更方法について解説します。

MarsEdit 4 のプレビューデザイン変更方法【3ステップ】

MarsEdit 4 のプレビューデザイン変更方法について、解説します。

MarsEdit 4 に組み込まれたテンプレートのダウンロードボタンをクリックして、ちょっと CSS を削除するだけなのでご安心を!

それでは、いってみよ〜!

【ステップ1】Edit Preview Template をクリックする

Marsedit preview edit1

ステップ1は、Edit Preview Template をクリックしましょう。

まずは MarsEdit 4 をインストールして起動してください。さらに、自分のブログが登録できている状態にしてください。

【関連】MarsEdit4にブログを登録・追加するやり方

Marsedit preview edit2

MarsEdit 4 の左サイドバー下にある 歯車ボタンを、クリックしてください。

表示されたメニューのEdit Preview Template をクリックしましょう。

ここまでで、ステップ1「Edit Preview Template をクリックする」作業は完了です。

【ステップ2】Download Template ボタンをクリックする

Marsedit preview edit3

ステップ2は、Download Template ボタンをクリックします。

ステップ2までの作業が終わると、「Preview of」のウィンドウが表示されます。

「Preview template for blog:」で選択されているブログのテンプレートデザインを、編集している状況になっています。

左側に出てくるコードは、MarsEdit 4 のベーシックな HTML と CSS のテンプレートになります。WordPress ブログから直接テンプレートをコピペできる場合には、ここに貼り付けてあげればデザインが反映されますよ。

初心者の方は、Download Template... ボタンをクリックしましょう。自動であなたのブログのテンプレートに適用されている HTMLとCSSのコードをダウンロードしてきてくれますよ。

Marsedit preview edit4

「Publish a temporary post(一時的な投稿を公開する)」のウィンドウが、表示されます。

下の文章は「A post will be published to buikd a template of your blog's visual theme. The post will be deleted immediately after it is published.」で、ブログのビジュアルテーマのテンプレートを作成するための投稿が公開され、投稿は公開後すぐに削除されますって意味になります。

一時的にブログの投稿ページを作り、MarsEdit 4 がそこからデザインに関するコードを読みとる仕組みになっているようです。

難しいことは抜きにして、OK をクリックしちゃいましょう。実際に筆者も押しましたが、大丈夫でしたよ。テンプレートのダウンロードが始まります。

ここまでで、ステップ2「Download Template ボタンをクリックする」作業は、完了です。

【ステップ3】不要な CSS や HTML コードを削除する

Marsedit preview edit5

ステップ3は、不要な CSS や HTML コードを削除しましょう。

ステップ2までの作業で、あなたのブログのデザインに関するテンプレートのダウンロードが終わると、左側のコードが変更されているはずです。

しかしこのままだと、ダウンロードしたコードの中に、プラグインやアナリティクスのタグなどが入ったままになっています。地道にコードの中を検索しながら、不要な箇所を削除してあげましょう。

たとえば、「Analytics」や「sidebar」といったワードを、 ⌘ CommandFで検索して、該当箇所をデザインが崩れない程度に削除していきます。もし間違えても、またステップ2に戻れば問題ありません。デザイン自体は、MarsEdit 4 だけ変更されるので、ブログ本体には影響がありません。

また何度もテンプレートをダウンロードしにサーバーへの負荷を気にする人は、1度ダウンロードしたテンプレートを全文コピーして、テキストエディターに保存しておけばOKです。間違えたら、貼り付けし直して納得いくまでデザインを追い込むことができますよ。

Marsedit preview edit6

ブログを執筆するのに必要なデザインまで、不要な箇所を削除できたらOKです。

特に、PVのアナリティクス系のコードは削除しておきましょう。執筆するたびにページビューが増えてしまうので、正確な数値を測ることができなくなってしまいますからね。

ここまでで、ステップ3「不要な CSS や HTML コードを削除する」作業及び、MarsEdit4のプレビューデザイン変更方法の解説は終了です。

MarsEdit 4 のプレビュー画面で、デザインが反映されているか確認しよう

Marsedit preview edit7

MarsEdit 4 のプレビュー画面で、デザインが反映されているか確認しましょう。

実際にリアルタイムで、自分のブログのデザインを見ながら、執筆してみました。新規記事を立ち上げて、文章を書いてみます。

ある程度できたら MarsEdit 4 画面上部の Preview をクリックしてください。

Marsedit preview edit8

プレビュー画面が表示されて、あなたのブログデザインが反映された状態で、執筆を行えるようになっているはずですよ。

今回の検証では、サイドバーを極力減らしたり、画像を読み込まないようにしたり、プラグイン等の削除を行なっております。テキストのデザインや行間など、最低限の確認ができればオッケーなので、十分ですね。

これで、MarsEdit 4 のプレビュー画面で、デザインが反映されているか確認作業は完了です。お疲れ様でした!

まとめ

MarsEdit4のプレビューデザイン変更方法まとめ

※ 全体の流れがわかったら、ステップ1から挑戦してみましょう。リンクをクリックで、記事の上部に移動できます。ぜひご利用ください。

MarsEdit 4 のプレビューデザイン変更方法について、解説させていただきました。

やっぱりブログを書いているときに、同じデザインで書けたほうが気分が上がりますよね。個人的にはタグ打ちで文章を書いているので、ほとんどプレビュー機能使っていないんですけどね汗。

MarsEdit 4 の画像をアップロードする機能が、メインで使っているところがあります笑。と言いましても、初心者にとってはプレビュー機能こそが本命。ぜひ今回ご紹介した方法を活用して、あなたのブログ記事執筆に役立ててみてください。

それじゃあ、今回はこの辺で!? ほかにも、Mac アプリや MarsEdit 4 についての記事を書いていますので、あわせてこちらの記事もどうぞ↓

【関連】Mac歴10年のおすすめアプリ・ソフト27選【どどーんと大列挙】

サウンドオルビス

5,461,299 views

サウンドテック・ラボ編集長兼ライター。「音楽×テクノロジー」で、あなたの「やってみたい」をお手伝いします。人生にドラマを!!

プロフィール

ピックアップ記事

カテゴリ内の記事