Web

「MarsEdit」の絶対やるべきプレビューを自分のブログデザインにしてもう一手間

投稿日:

 

こんにちは。夜更かしすると次の日はまったく起きてられないPEAKHEADZのキクです。すっかり寝てしまって更新できませんでしたが気にしても責めちゃいけないよ自分のこと。

 

よし、やりましょう!

前回は、「MarsEdit」を導入するにあたって気に入った2つの点について記事を書きました。

みんな使ってる「MarsEdit」の惚れちゃったよこんな機能!!

 

今回は、「MarsEdit」で絶対やるべきプレビューを自分のブログデザインにしてもう一手間加えようということで書いていきます。

 

といっても、僕自身は以下の記事を参考にして進めて特につまづくこともなく完了出来たので詳しくはそちらを見ていただくとして、ここではざっくりかつ補足程度で説明します。

[Å] MarsEdit初期設定 :デビュー2日目「プレビューに自分のブログデザインを反映させる」

 

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

1.WordPressの新規投稿画面を開き、タイトル欄に#タイトル#、本文欄には#本文#と入力する。この2つは置換用なので、#ブログのタイトル#や#本文欄#でも構わない。自分の分かりやすいように。

2.WordPressでそのままプレビューを表示し、ブラウザでソースを表示する。google Cromeなら右クリックからのメニューですぐ表示できる。

スクリーンショット 2014 04 05 0 01 12

3.ソースを全部コピーして、置換機能があるテキストエディタやコードエディタにペースト。僕はDreamweaverで行った。

4.#タイトル##title##本文##body##extended#に置換する。Dreamweaverならメニューの編集から選択できる。

スクリーンショット 2014 04 05 0 13 33

5.置換後のソースを再び全部コピーして、MarsEditの「Edit Preview Template」を選択してペーストする。この時、個別の記事の編集画面では項目を選択できないから、Windowは記事一覧を確認できるMain Windowを表示しておこう。

スクリーンショット 2014 04 05 0 18 28

6.無事、Preview Templateにペーストできたら、SaveChangesをクリックして完了だ。

スクリーンショット 2014 04 05 0 28 08

 

 

ここまで出来たらプレビュー画面には自分のブログのデザインと同じように表示されているはず。

もうこれで記事のデザインチェックも出来て便利ですね!やったー!

スクリーンショット 2014 04 05 0 31 52

 

 

さらにもう一手間加える。

この状態でもプレビューには自分のブログデザインが表示されているので記事の作成も、
デザインのチェックもしやすく利便性も格段に向上しました。

ですが、僕の場合は記事欄が左側にあるので、ただプレビューを表示しすぐに記事の確認は可能です。

でも、左側がサイドバーの方はどうでしょうか?
いちいちプレビューを起動したら右にスクロールしなくてはいけません。

メインビジュアルなど使用している方などは、
記事欄までに到達するまでにスクロールしなくてはいけません。

どちらも小さいことですが、毎度のことになると鬱陶しい気がしませんか?

いっそのこと、もう一手間加えて最高のプレビューにしましょう!

記事欄以外のタグを全部消しちゃう!

その方法は、記事欄以外のタグを全部消してしまうことです。

具体的には、

・header
・sidebar 
・footer

などのタグのことです。

ご自分でWordPressのテーマのカスタマイズやHTML&CSSを触ったことの有る方ならピンと来たはずです。

実際、プレビューで確認したい部分は記事のデザインだけなので、その他の部分は不必要なのです。

僕の場合ならば、「head」と「body」など基本のタグと記事部分がある「main」や「contents」タグさえあれば十分です。

みなさんそれぞれのコードがあると思うので画像にて一概に説明はできませんが、
ご自分のコードを確認してもらって不必要なところは消してみて調整してもらうといいと思います。

Dreamweaverなどのタグを閉じるや、コメントアウトなどを行って試すのもいいかもしれません。

バックアップなども忘れずに。

注:コーディングの仕方はさまざまです。タグ名が違っている可能性はあります。

-Web
-

Copyright© WebLogz , 2019 All Rights Reserved.