Casual Developers Notes

初級・中級のエンジニアやデザイナー向けに技術情報と英語学習情報を提供中。エンジニアもデザイナーも技術と英語を身に着けて海外に飛び立とう!

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

2017年12月28日 By Keid Leave a Comment

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.
  • この記事を書いた人
  • 最新の記事
Keid
Twitter のプロフィール

Keid

カナダを拠点に活躍する(予定)デベロッパー。 大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職したまでは予定通りの人生だったが、日本のIT業界に失望したことで考え方が変わり、海外への挑戦を決意。海外に行きたくても英語ができなかっため、語学留学を経て強制的に英語を上達させ、カナダへの切符を手にした。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。(写真はラスベガス)
Keid
Twitter のプロフィール

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

  • 自作のNPMモジュールをsemantic-releaseを使って自動的にセマンティック・バージョニングで管理する方法 - 2019年2月15日
  • Go言語でさくっとREST APIを作ろう(Gorilla Mux編) - 2019年2月4日
  • MacBook ProでApp Storeのアプリをアップデートする際に「This item is temporarily unavailable」と怒られた場合の対処法 - 2019年2月1日

関連記事

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

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

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

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

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

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

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

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

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

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

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

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

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

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

技術力と英語力を向上させて
あたなを次のステージへ引き上げるための無料メルマガ

Sponsored Links

About Author

Keid

カナダを拠点に活躍する(予定)デベロッパー。 大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職したまでは予定通りの人生だったが、日本のIT業界に失望したことで考え方が変わり、海外への挑戦を決意。海外に行きたくても英語ができなかっため、語学留学を経て強制的に英語を上達させ、カナダへの切符を手にした。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。(写真は旅行で行ったラスベガス)

https://casualdevelopers.com/

最近の投稿

  • 自作のNPMモジュールをsemantic-releaseを使って自動的にセマンティック・バージョニングで管理する方法

    自作のNPMモジュールをsemantic-releaseを使って自動的にセマンティック・バージョニングで管理する方法

    2019年2月15日
  • Go言語でさくっとREST APIを作ろう(Gorilla Mux編)

    Go言語でさくっとREST APIを作ろう(Gorilla Mux編)

    2019年2月4日
  • MacBook ProでApp Storeのアプリをアップデートする際に「This item is temporarily unavailable」と怒られた場合の対処法

    MacBook ProでApp Storeのアプリをアップデートする際に「This item is temporarily unavailable」と怒られた場合の対処法

    2019年2月1日
  • Go言語のためのVisual Studio Codeの設定方法

    Go言語のためのVisual Studio Codeの設定方法

    2019年1月28日
  • reCAPTCHAをWordPressに導入してロボットによるスパムメールを防ぐ方法

    reCAPTCHAをWordPressに導入してロボットによるスパムメールを防ぐ方法

    2019年1月25日

カテゴリ

  • 技術 Tips & Tutorials (85)
  • 技術塾 (5)
  • ライフハック (25)
  • 海外留学 (11)
  • 英語学習 (3)
  • コラム (7)

アーカイブ

最高の学習のために

人気記事ランキング

  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • データサイエンスのためのAnaconda環境構築とTensorflowのインストール方法(Docker編)
    データサイエンスのためのAnaconda環境構築とTensorflowのインストール方法(Docker編)
  • Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法
    Herokuの無料dynoをスリープさせないで24時間稼働させる4つの方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • PythonでWebスクレイピング入門(Scrapy+Selenium編)
    PythonでWebスクレイピング入門(Scrapy+Selenium編)
  • [tips][Sublime Text] Sublime Text 3で文字化けしない方法
    [tips][Sublime Text] Sublime Text 3で文字化けしない方法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • [tips][Windows] Windows Updateを一括で行う方法
    [tips][Windows] Windows Updateを一括で行う方法
  • [tips][bat] バッチで明日の日付を計算する。
    [tips][bat] バッチで明日の日付を計算する。

Bitcoin寄付

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

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

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

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

Keid

カナダを拠点に活躍する(予定)デベロッパー。 大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職したまでは予定通りの人生だったが、日本のIT業界に失望したことで考え方が変わり、海外への挑戦を決意。海外に行きたくても英語ができなかっため、語学留学を経て強制的に英語を上達させ、カナダへの切符を手にした。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。(写真はラスベガス)
Keid
Twitter のプロフィール

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

  • 自作のNPMモジュールをsemantic-releaseを使って自動的にセマンティック・バージョニングで管理する方法 - 2019年2月15日
  • Go言語でさくっとREST APIを作ろう(Gorilla Mux編) - 2019年2月4日
  • MacBook ProでApp Storeのアプリをアップデートする際に「This item is temporarily unavailable」と怒られた場合の対処法 - 2019年2月1日

関連記事

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

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

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

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

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

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

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

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

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

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

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

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

Copyright © 2019 Keid - Casual Developers Notes