最近のブログはPCとスマホの両方からアクセスが来ますよね。 MarsEditでPC用とスマホ用のプレビューをパタパタ切り替える方法を書きます。

複数のプレビューテンプレートを登録する

以下にやり方を書きます。

ここからプレビューテンプレート切替用に別のダミーブログを作成します。 Blog作成開始
テスト用のテンプレート名(=ダミーブログ名)と適当なURLを指定して「OK」。 Blog名指定ダイアログ
ダイアログが出てくるので、設定した名前とURLが入ってるか確認し「OK」。 NewBlog設定
すると、新しい「ダミーブログ」が追加される。本物ブログとアイコンが違う。 NewBlogできた
できたダミーブログを右クリックして「Edit Preview Template」を選択して、 SS 2017 01 28 12 21 06
この画面で別のプレビューテンプレートを作ります(たとえばスマホ用のプレビューテンプレート)。 プレビューテンプレートの作り方は後述します。 SS 2017 01 28 13 53 05
これで複数テンプレートプレビューの仕込みは終わり。

プレビューをパタパタ切り替える

「New Post」か「Edit Post」を開きます。
Preview画面を出しておき、「Blog」のところを選択して切り替えると、 Blogを選ぶ
プレビューが変わります。これはPC用のテンプレートで表示したプレビュー。 SS 2017 01 28 12 14 48
これはスマホのiPhone6用のテンプレートで表示したプレビュー。 SS 2017 01 28 12 15 14
こんな感じ。

プレビューテンプレートの作り方

基本的なやり方は、こちらの参考記事あたりを参照してください。


要は、ブラウザの機能を使って、自分のブログページのソースを表示して、CSSへのリンク情報と、各種MarkupタグのクラスとID指定をパクってくる作業です。

iPhoneの場合、スマホ版のソースは以下の方法で見れます。

  1. iPhone Safariの設定の「詳細」で「Webインスペクタ」をオンにする
  2. iPhoneをMacにライトニングケーブルで繋ぐ
  3. iPhoneのSafariで対象ページを開いた状態にする
  4. Mac Safariの「開発」のメニューから自分のiPhone名を選んで SS 2017 01 28 13 19 56
  5. iPhone safariで開いているページのHTMLソースを選ぶ SS 2017 01 28 13 19 50
  6. こんな画面が出てきてHTMLソースが見れる SS 2017 01 28 13 25 09
あとは、PCとやることは同じです。

参考)私のテンプレート定義

私のブログはライブドアブログの「ホワイトプレス」というデザインをベースにカスタマイズしています。 スマホ用はカスタマイズできないのでそのまま「ホワイトプレス」です。

私のプレビューテンプレートを下記に置いておきましたので、見たい方はどうぞ。

これの頭の方の <link rel="stylesheet" href="URL"> のところは自分のHTMLソースをみて自分のCSSのURLに変えてくださいね。 ライブドアブログのひな形ならそれで大体できると思います。

さいごに

これでPublishしたあとで、スマホからアクセスして見て焦ることがなくなりました。

MarsEdit、本当に便利ですよね。