ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更

      2015/02/16

WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更

前回の記事、「WordPress[MarsEdit] 過去記事を30件以上に変更」で既に多くのブロガーの方がお使いのMarsEditを少し紹介しましたが、今回MarsEditを導入したらまずやっておきたい設定を備忘録として残したいと思います。最初はちょっと難しそうに見えるMarsEditですが2、3回このエディターから記事を投稿したら慣れると思うのでまだ使った事がない方は是非使ってみてください。このアプリ価格がちょっとお高い感じですが、今は値段分の意味があったかなと思っています。

MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more.
カテゴリ: ソーシャルネットワーキング
現在の価格: ¥4,000

スポンサーリンク

プレビュー画面を自分のブログデザインにする

MarsEditを使いたかった理由はここにある!とも言えるのが「プレビュー画面を自分のブログデザインにする」です。

WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更

上記の写真だと左がエディット画面で右がプレビュー画面です。MarsEditではプレビュー画面をカスタマイズすると自分のブログデザインに変更できます。実際のブログでの表示を確認しつつ記事が書けるので、「あ、ここ改行した方が見た目綺麗かも!?」「タイトルは3文字追加した方が読みやすいかも!?」みたいのがリアルタイムで確認しながら作業が出来ます。ここで注意なのはブログのデザインを「完璧」に再現することは出来ませんが、ほぼ正確に表示出来ます。あとプレビュー画面がたまにバグって止まりますが、再読み込みすれば大丈夫です。それでは実際のカスタマイズの方法を残します。

WordPressで記事を新規で作成します

作成した記事のタイトル部分に「#title#」と入れ、本文の部分には「#body##extended#」と入力します。

WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更

入力後右側の「プレビュー」ボタンをクリックしてプレビューします。

WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更

現状上記のようにプレビューされます。

WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更

次にブラウザのソースプレビュー画面からソースをコピーしてきます。Google「Chrome」だとOption+Command+Uかメニューバーから「View」→ 「Developer」 → 「View Source」でソース画面を表示出来ます。

WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更

ソース全体をcommand+Aなどで全選択してコピーします。

スポンサーリンク

MarsEditにペースト

次にコピーしたソースをMarsEditの「Edit Preview Template」にペーストします。

WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更

MarsEditのメインページを開いて、変更したいブログを選択して「右クリック」をします。「Edit Preview Template」を開いて、元々書かれているソースコードを全選択した後に、ペーストして上書きしてください。

WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更

完成

全ての作業が終わったら実際にプレビュー画面を開いて確認してみましょう。

WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更

以上、「WordPress[MarsEdit] プレビュー画面を自分のブログデザインにする」でした。MarsEditに関してもまだ色々あるのでまた投稿したいと思います。読んで頂いてありがとうございました。

スポンサーリンク

 - WORDPRESS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

WordPress「Stinger3」サイドバーの背景色を変更する方法
WordPress「Stinger3」サイドバーの背景色を変更する方法
WordPress[Revive Old Post] アップデート後に過去記事自動ツイートが停止
WordPress[Revive Old Post] アップデート後に過去記事自動ツイートが停止
WordPress[Stinger3用 子テーマ] サイトマップ(目次)を設置する方法
WordPress[Stinger3用 子テーマ]サイトマップ(目次)を設置する方法
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress[Stinger5] 画像に囲み線を入れる
WordPress[Stinger5] 画像に囲み線を入れる
WordPress[Stinger5] めちゃ便利スマホ固定式フッターメニュー
WordPress[Stinger5] スマホ固定式フッターメニューを導入
WordPress[さくらサーバーでCloudFlare] 管理画面にログイン出来ない問題
WordPress[さくらサーバーでCloudFlare] 管理画面にログイン出来ない問題
WordPress[RSS Footer] RSSに署名やリンクを載せて盗作防止
WordPress[RSS Footer] RSSに署名やリンクを載せて盗作防止
WordPress[Acunetix WP Security] ファイルスキャンを行ってファイルのパーミッションを変更
WordPress[Acunetix WP Security] ファイルスキャンを行ってファイルのパーミッションを変更
WordPress[Simple Local Avatars] Gravatarに登録不要!プラグインでアバター画像を変更
WordPress[Simple Local Avatars] Gravatarに登録不要!プラグインでアバター画像を変更