マーベリック流ブログ運営ノウハウ

MarsEditのプレビューに、WordPressのデザインを反映!

このエントリーをはてなブックマークに追加
level003
MarsEditのプレビューに、WordPressのデザインを反映!
bnr_松山式#1

Macのブログエディタ『MarsEdit』は、ぼくがいつも愛用しているツール。WordPress(ワードプレス)で『WEBメディア』を構築して運用していくのなら、必ず使って欲しいツールの1つです。

その理由は『MarsEditでWordPress(ワードプレス)の投稿を10倍楽にする』でも伝えた通りですが、MarsEditのメリットのひとつにリアルタイムにプレビューを確認できるというものがあります。(リアルタイムにプレビューを確認するメリットは、『MarsEditでWordPress(ワードプレス)の投稿を10倍楽にする』を確認してくださいね。)

ただし、これを実現するには少しカスタマイズが必要ということで、今日は『MarsEditのプレビュー画面に、WordPress(ワードプレス)サイトのデザインを適用する方法』をみていきたいと思います。

MarsEditのプレビューに、WordPressのデザインを反映させる

STEP1:仮投稿をする

まずはWordPress(ワードプレス)管理画面にログインして、仮の投稿を行います。

MarsEditのプレビューに、WordPressのデザインを反映!

その際に、上記の画像のようにタイトル部分に『▼タイトル▼』。本文の部分に『▼本文▼』と入力します。これは後で検索できれば何の文字列でも大丈夫です。

MarsEditのプレビューに、WordPressのデザインを反映!

そのまま公開をしてしまうのではなく、『プレビュー』ボタンをクリックしてサイト上での表示を確認します。

STEP2:ソースコードをゲットする

MarsEditのプレビューに、WordPressのデザインを反映!

サイト上でプレビュー画面で、ソースを取得します。

Google Chromeの場合は、トップメニューの『表示 > 開発/管理 > ソースを表示』で表示できます。

MarsEditのプレビューに、WordPressのデザインを反映!

表示されたソースを、全部選択してコピーしておきましょう。

STEP3:ソースをテキストエディタで編集

MarsEditのプレビューに、WordPressのデザインを反映!

先ほどコピーしたソースを、テキストエディタ (Cotediterなど)に貼り付けます。

MarsEditのプレビューに、WordPressのデザインを反映!

テキストエディタの「検索&置換」の機能を使って以下のとおり置換を行います。

  • 『▼タイトル▼』を『#title#』に全部置換
  • 『▼本文▼』を『#body##extended#』に全部置換

で、置換されたカスタマイズ済みのソースを、コピーしておきます。

STEP4:MarsEditの環境設定で設定する

MarsEditのプレビューに、WordPressのデザインを反映!

MarsEditを起動して、トップメニューの『Blog > Edit Preview Template…』を選択。

MarsEditのプレビューに、WordPressのデザインを反映!

STEP3でカスタマイズしたソースを、丸ごとここに貼り付けます。一応…、バックアップをとっておいたほうがいいですね。

ソースを貼りつけたら、『Save Changes』を押して、保存します。

MarsEditでWordPress ワードプレス の投稿を楽に使いこなしている件02

以上で完了!きちんと設定ができていれば、図のように実際のサイトの表示に沿ったプレビューを確認することができるようになります。

最後にもうひと押し

ここまでで問題なくサイトの表示に沿った形でプレビューを確認することができるのですが、実は動作がもっさりしてしまう可能性があります。プレビューの生成に時間がかかってしまうんですね。

実際に記事を執筆している際に必要な箇所は本文のところだけ。ヘッダーやサイドバー、フッター部分というのは、記事執筆時にはプレビューする必要がありません。

ということで、先ほどの『Blog > Edit Preview Template…』の部分で、もう一度ソースを表示させて、ヘッダーやサイドバー、フッターの部分を削除してしまいましょう。

ヘッダーやサイドバーのタグ全体を削除してしまうというよりは、できるだけ表示を崩さないようにしながら、中身の部分だけ削除するといいと思います。

このエントリーをはてなブックマークに追加

人生の向かう先が見えず悶々とした日々から抜け出したくて、転職を決意したぼく。主将宮本。勤務先はなんとマレーシアだった。。。ぼくは愛する妻と生まれたばかりの子供を日本に残し、単身マレーシアへいくことを決断した。

マレーシアに来て、WEBメディアに関わるようになり、日本よりも物価が低い国での暮らしも知り、アジア各国を回って経済を知り・・・投資を知り、騙されたりもして、辿り着いた先。

ぼくは『マーベリックWEBメディア部』を創り活動を始めた。ぼくが知り得るWEBメディア運営の情報を、メルマガという形で部員全員に共有させていただき、部員全員で「好きを仕事に」を目指していくWEB上の部活動だ!

どんなビジネスをするにしろ、これからはWEBメディアの運営が不可欠。期間限定で無料登録公開中。

マーベリックWEBメディア部 部員登録(メルマガ登録)

お名前(姓)*
お名前(名)
メールアドレス*
follow us in feedly

このカテゴリーの関連記事
マーベリック流ブログ運営ノウハウ
wordpress

WordPress(ワードプレス)は世界で最も普及しているCMS

WordPress(ワードプレス)は2003年に誕生したブログツールのこと。バージョンを重ねていくにつれ、ブログを作成するだけ

マーベリック流ブログ運営ノウハウ
WordPress(ワードプレス)をサーバにインストールする方法

WordPress(ワードプレス)をサーバにインストールする方法

WordPress(ワードプレス)サイト構築の5ステップ。今日は【ステップ3】サーバーWordPress(ワードプレス)をイン

マーベリック流ブログ運営ノウハウ
名称未設定-1

ぼくが記事投稿で使っているHTMLタグ

日々の記事投稿でよく使用するHTMLタグについて、解説します。最低限次に紹介する程度を覚えておけば、『マーベリックWEBメディ

マーベリック流ブログ運営ノウハウ
投稿してみよう

WordPress(ワードプレス)の管理画面から投稿してみる

WordPress(ワードプレス)サイト構築の5ステップ。今日は最後です。【ステップ5】WordPress(ワードプレス)の管



Leave a Reply

*