Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / ライフハック / MarsEditのプレビューをサイトとほとんど同じにする方法

2017年12月28日 By KD コメントを書く

MarsEditのプレビューをサイトとほとんど同じにする方法

MarsEditのプレビューをサイトとほとんど同じにする方法

MarsEditを使うことのメリットはライブプレビュー(記事を書いている時にリアルタイムでサイトのプレビューが見れること)です。その時に自身のサイトと違う見た目ではプレビューの意味がありません。そこで、プレビューをサイトとほとんど同じにする方法を紹介します。

見出し

  • 1 基本的なプレビューテンプレートを作成する方法①MarsEditの読み込み機能を使う
    • 1.1 MarsEditのプレビュー画面から読み込む
  • 2 基本的なプレビューテンプレートを作成する方法②自分でHTMLを作る
    • 2.1 まず雛形となるページを作る
    • 2.2 HTMLのソースコードをコピーする
    • 2.3 プレビューテンプレートを編集する
  • 3 プレビューテンプレートを調整する
    • 3.1 ポイント1 必須のタグの調整
    • 3.2 ポイント2 不要な要素の削除
    • 3.3 ポイント3 必要に応じてタグを追加する
  • 4 実際にプレビューしながら記事を書いて見る
  • 5 最後に
  • 6 環境
    • 6.1 関連記事

基本的なプレビューテンプレートを作成する方法①MarsEditの読み込み機能を使う

MarsEditのプレビュー画面から読み込む

「Blog->Edit Preview Template…」からプレビュー画面を表示し、「Download Template…」をクリックします。

うまくいけばこれでブログから自動的にHTMLを読み込んでテンプレートを作成してくれます。

基本的なプレビューテンプレートを作成する方法②自分でHTMLを作る

方法①でうまくいかない場合は、自分で作成しましょう。

まず雛形となるページを作る

いつもやっている通りにWordPressの投稿から記事を作成します。この時にタイトルを「#title#」、コンテンツを「#body##extended#」と記載します。このタグはMarsEditがプレビューする時に使っているもので、ここで入力しておくと後でテンプレート編集が楽になります。

スクリーンショット 2017 12 24 20 26 11

HTMLのソースコードをコピーする

雛形ページを「プレビュー」で表示します。私のサイトの場合はこんな感じになりました。

スクリーンショット 2017 12 24 20 26 47

その後、プレビュー画面で、ブラウザがChromeであれば「Option+Command+U」でHTMLのソースコードが表示できますので、それをまるっとコピーします。

プレビューテンプレートを編集する

ここでやっとMarsEditを起動し、対象のサイトをクリックした状態で上部のメニューから「Blog -> Edit Preview Template…」を選択します。

スクリーンショット 2017 12 24 22 22 09

そうするとデフォルトのテンプレーが表示されます。

スクリーンショット 2017 12 24 20 10 50

この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#を追加で設定しています。

実際にプレビューしながら記事を書いて見る

私の場合はこんな感じの仕上がりになりました。ばっちりですね。

スクリーンショット 2017 12 24 23 39 35

最後に

思い通りにライブプレビューできましたか?せっかくMarsEditを買ったのですから、ここまで設定しないと損ですよ。では、また。

環境

  • MarsEdit : 4.0.4
  • WordPress : 4.9.1
The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • MarsEditのつまずかない初期設定

    ブログをWordPressにしたことで、記事作成ツールも新しくしてみたくなり、お高いMarsEditを導入してみました。…

  • MarsEditでMarkdownを使う場合の設定

    MarsEditの初期設定が完了した後、ブログを書き始めるわけですが、皆さんはどういうフォーマットで書きますか?リッチエ…

  • WordPressサイトの表示が遅い場合の対処法

    WordPressを使い始めるとキャッチ画像などを毎回設定したり、分かり安くするために画像多めの記事を作ってみたりと、気…

  • XserverとWordPressのSSL設定と保護された通信にならない場合の対処法

    Google主導のもと、SSLじゃないサイトは排除される流れになっています。SSLはセキュリティ強化なので、ユーザのこと…

  • WordPressブログに広告を自由自在に配置するための無料のプラグイン4選

    アフィリエイトでブログに広告を配置する場合、どこにどれくらい配置すべきかを検討することは重要ですが、配置したい場所に配置…

カテゴリ : ライフハック タグ : marsedit, wordpress

コメントを残す コメントをキャンセル

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
    SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • Go言語のためのVisual Studio Codeの設定方法
    Go言語のためのVisual Studio Codeの設定方法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • MarsEditのつまずかない初期設定

    ブログをWordPressにしたことで、記事作成ツールも新しくしてみたくなり、お高いMarsEditを導入してみました。…

  • MarsEditでMarkdownを使う場合の設定

    MarsEditの初期設定が完了した後、ブログを書き始めるわけですが、皆さんはどういうフォーマットで書きますか?リッチエ…

  • WordPressサイトの表示が遅い場合の対処法

    WordPressを使い始めるとキャッチ画像などを毎回設定したり、分かり安くするために画像多めの記事を作ってみたりと、気…

  • XserverとWordPressのSSL設定と保護された通信にならない場合の対処法

    Google主導のもと、SSLじゃないサイトは排除される流れになっています。SSLはセキュリティ強化なので、ユーザのこと…

  • WordPressブログに広告を自由自在に配置するための無料のプラグイン4選

    アフィリエイトでブログに広告を配置する場合、どこにどれくらい配置すべきかを検討することは重要ですが、配置したい場所に配置…

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes