MarsEditを使うことのメリットはライブプレビュー（記事を書いている時にリアルタイムでサイトのプレビューが見れること）です。その時に自身のサイトと違う見た目ではプレビューの意味がありません。そこで、プレビューをサイトとほとんど同じにする方法を紹介します。
見出し
基本的なプレビューテンプレートを作成する方法①MarsEditの読み込み機能を使う
MarsEditのプレビュー画面から読み込む
「Blog->Edit Preview Template…」からプレビュー画面を表示し、「Download Template…」をクリックします。
うまくいけばこれでブログから自動的にHTMLを読み込んでテンプレートを作成してくれます。
基本的なプレビューテンプレートを作成する方法②自分でHTMLを作る
方法①でうまくいかない場合は、自分で作成しましょう。
まず雛形となるページを作る
いつもやっている通りにWordPressの投稿から記事を作成します。この時にタイトルを「#title#」、コンテンツを「#body##extended#」と記載します。このタグはMarsEditがプレビューする時に使っているもので、ここで入力しておくと後でテンプレート編集が楽になります。
HTMLのソースコードをコピーする
雛形ページを「プレビュー」で表示します。私のサイトの場合はこんな感じになりました。
その後、プレビュー画面で、ブラウザがChromeであれば「Option+Command+U」でHTMLのソースコードが表示できますので、それをまるっとコピーします。
プレビューテンプレートを編集する
ここでやっとMarsEditを起動し、対象のサイトをクリックした状態で上部のメニューから「Blog -> Edit Preview Template…」を選択します。
そうするとデフォルトのテンプレーが表示されます。
このHTMLが書かれている箇所に、先程コピーしてきたサイトのHTMLソースコードを全て貼り付けます。これで概ね完成です。
プレビューテンプレートを調整する
単にHTMLを貼り付けただけだと、表示が少し崩れたり、重くてプレビューに時間がかかったりしてしまう場合があるため、調整が必要です。それでは、ポイントを押さえながら一つずつやっていきましょう。
ポイント1 必須のタグの調整
貼り付けたHTMLのタグが正しく設定されているかプレビューテンプレートを検索して確認します。
- タイトルは「<title>#title#</title>」となっているか？
- コンテンツは「<div>#body##extended#</div>」となっているか？
ポイント2 不要な要素の削除
使用しているWordpressのテーマによるのですが、だいたい「<nav></nav>」と「<header></header>」、Wordpressの管理者用の項目を表示している部分は削除しても影響が無いと思いますので、プレビューで確認しながら削除して下さい。
ポイント3 必要に応じてタグを追加する
今回最初に作ったプレビューテンプレートでは#title#、#body#、#extended#の3つのタグしか使っていませんでしたが、実はもっと種類があります。なので、プレビューに反映させたいものがあれば、必要に応じて使ってみて下さい。以下が一覧になります。
MarsEditのプレビューテンプレートで使えるタグ一覧
| タグ | 内容 |
|---|---|
| #title# | タイトル |
| #url# | URL |
| #body# | コンテンツの内容 |
| #categories# | カテゴリ |
| #tags# | タグ |
| #extended# | 拡張 |
| #excerpt# | 抜粋 |
| #weblogName# | プログ名 |
| #weblogURL# | ブログURL |
ちなみに、私の場合は#categories#と#tags#を追加で設定しています。
実際にプレビューしながら記事を書いて見る
私の場合はこんな感じの仕上がりになりました。ばっちりですね。
最後に
思い通りにライブプレビューできましたか？せっかくMarsEditを買ったのですから、ここまで設定しないと損ですよ。では、また。
環境
- MarsEdit : 4.0.4
- WordPress : 4.9.1
最新記事 by Keid (全て見る)
- 令和時代にGraphQLを知らないエンジニアはいらない！GraphQLとPrismaのバックエンド開発入門(GraphQL Yoga編) - 2019年7月18日
- Google Adsense(アドセンス広告)で収益を受け取るまでの手順 - 2019年7月12日
- TypeScriptのためのバックエンド用フレームワークNestJSにさくさく入門しよう - 2019年6月28日
関連記事
コメントを残す