Subscribe via RSS Feed tettori Google+
2015年 08月 12日

MarsEditのプレビュー画面を自分のブログデザインに合わせつつ簡単に軽量化する方法


20150813 marsedit

ブログを書く際に重宝するツールMarsEditで、プレビュー画面を自分のブログに合わせたデザインにする方法に加え、僕が普段やっている軽量化の方法についても一緒にご紹介します。

今回はChromeを例に説明していますが、若干の操作の違いはありますがSafariやFirefoxも同様の機能を持ち合わせていますので、お好きなブラウザを使って試してみてください。

手順

WordPressへログインし、新規投稿画面からタイトルと本文を以下のように入力した後プレビューをクリックします。

タイトル : #タイトル#
本文 : #本文#
150813 0001

プレビュー画面が表示されます
150813 0001

画面内で右クリック→Inspect Elementを選択します
150813 0005

ソースコードが表示されます
150813 0006

コード内でマウスを移動させながらページ内の適当な場所を選択してクリックした後…
150813 0009

削除!(タイトル画像が消えました)
150813 0010

更に選択して…
150813 0011

削除!!という感じで、本文以外の不要なものをどんどん削除していきます。間違って必要な物を削除してしまった場合は、Command+zで元に戻せます。
150813 0012

たまにウィンドウサイズを変更しながら、表示確認をしつつ作業を進めていきます。
150813 0014

sponsored link

ひと通り作業を終えたら、コードの最上位にあるhtmlを右クリックしてCopyします
150813 0016

MarsEditを起動し、適当な記事のプレビュー画面を表示させた後、画面下のEdit Templateをクリック
150813 0017

表示された枠内のテキストを全て削除し、先程コピーしたhtmlコードを貼り付けます。
150813 0022

Command+Fを押して検索枠を表示し、Find枠とReplace with枠にそれぞれ以下のように入力しReplace Allをクリック

Find枠 : #タイトル#
Replace with枠 : #title#
150813 0026

同様に以下のように入力しReplace Allをクリック

Find枠 : #本文#
Replace with枠 : #body##extended#
150813 0025

検索枠を閉じ、Template編集枠右下のSave Changesをクリックで完了!
Preview Template

いかがでしたでしょうか?

ブログの見た目が本番環境と同じデザインになっていると完成形のイメージがしやすく、またプレビューを行う際に不要なコードを取り除くことでモッサリ感が軽減され、よりスピーディーに作業を進めやすくなります。


もしよろしければfacebookページのフォローをお願い致します!


RSS登録はこちらからどうぞ

テットリでは主に開発者向けの情報を国内外から集めてまとめ記事にしたり、作成したお役立ちツール、たまに海外(現在ベルリン在住)での奮闘記なども公開していきます。

sponsored link

Filed in: 開発系 • Tags: , , , ,