最近のブログはPCとスマホの両方からアクセスが来ますよね。 MarsEditでPC用とスマホ用のプレビューをパタパタ切り替える方法を書きます。
複数のプレビューテンプレートを登録する
以下にやり方を書きます。
ここからプレビューテンプレート切替用に別のダミーブログを作成します。
テスト用のテンプレート名（=ダミーブログ名）と適当なURLを指定して「OK」。
ダイアログが出てくるので、設定した名前とURLが入ってるか確認し「OK」。
すると、新しい「ダミーブログ」が追加される。本物ブログとアイコンが違う。
できたダミーブログを右クリックして「Edit Preview Template」を選択して、
この画面で別のプレビューテンプレートを作ります（たとえばスマホ用のプレビューテンプレート）。
プレビューテンプレートの作り方は後述します。
これで複数テンプレートプレビューの仕込みは終わり。
プレビューをパタパタ切り替える
「New Post」か「Edit Post」を開きます。
Preview画面を出しておき、「Blog」のところを選択して切り替えると、
プレビューが変わります。これはPC用のテンプレートで表示したプレビュー。
これはスマホのiPhone6用のテンプレートで表示したプレビュー。
こんな感じ。
プレビューテンプレートの作り方
基本的なやり方は、こちらの参考記事あたりを参照してください。
要は、ブラウザの機能を使って、自分のブログページのソースを表示して、CSSへのリンク情報と、各種MarkupタグのクラスとID指定をパクってくる作業です。
iPhoneの場合、スマホ版のソースは以下の方法で見れます。
- iPhone Safariの設定の「詳細」で「Webインスペクタ」をオンにする
- iPhoneをMacにライトニングケーブルで繋ぐ
- iPhoneのSafariで対象ページを開いた状態にする
- Mac Safariの「開発」のメニューから自分のiPhone名を選んで
- iPhone safariで開いているページのHTMLソースを選ぶ
- こんな画面が出てきてHTMLソースが見れる
参考）私のテンプレート定義
私のブログはライブドアブログの「ホワイトプレス」というデザインをベースにカスタマイズしています。 スマホ用はカスタマイズできないのでそのまま「ホワイトプレス」です。
私のプレビューテンプレートを下記に置いておきましたので、見たい方はどうぞ。
これの頭の方の <link rel="stylesheet" href="URL"> のところは自分のHTMLソースをみて自分のCSSのURLに変えてくださいね。 ライブドアブログのひな形ならそれで大体できると思います。さいごに
これでPublishしたあとで、スマホからアクセスして見て焦ることがなくなりました。
MarsEdit、本当に便利ですよね。
