MarsEditを使うことのメリットはライブプレビュー（記事を書いている時にリアルタイムでサイトのプレビューが見れること）です。その時に自身のサイトと違う見た目ではプレビューの意味がありません。そこで、プレビューをサイトとほとんど同じにする方法を紹介します。
見出し
まず雛形となるページを作る
いつもやっている通りに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 (全て見る)
- CircleCI 2.0とCodecovでNodeJSアプリケーションをテストしてカバレッジを測定する方法(Jest編) - 2018年8月13日
- UXデザイン初学者のための基本用語まとめ - 2018年8月6日
- Heroku Container Registryのcontainer:push後のcontainer:releaseの対応方法 - 2018年8月3日
コメントを残す