はてなブックマーク - 見え方って重要!MarsEditのプレビュー画面を自分のブログのデザインと同じにする方法
Pocket

MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more. App
カテゴリ: ソーシャルネットワーキング
価格: ¥4,000(記事更新現在)

MarsEditのプレビュー画面を、自分のブログと同じデザインにカスタマイズする方法を紹介。

スポンサードリンク


デフォルトのプレビューって味気なくし文字小さい

これが初期設定時のプレビュー画面。まあ記事を書く分には、これでも別に困ることはない。

しかし読みやすさなどを考慮すると、どこで改行すべきか、段落を入れるべきか、全体の原稿量が多すぎないか、といった事を考えつつ修正を行う必要がある。

それには、このデフォルトのプレビュー画面からではイメージしにくい。実際のブログデザインと同じ状況で確認しないといけない。

プレビューをカスタマイズする方法

このプレビュー画面の下に「Edit Template」とあるのでここをクリック。

これがデフォルトのプレビューを表示させるためのHTMLになる。

  • #weblogName# = ブログ名
  • #title# = 記事のタイトル
  • #body# = 記事本文
  • #extended# = 記事本文の続き

これらの要素が必要になる。

ブラウザでプレビューに使いたいブログのページのソースを表示してコピーする。

テキストエディタなどにペーストして、先ほどの#body#など、表示させたい要素を配置する。

そして先程のテンプレートのソース部分にコピペすれば完成。

右下の「Save Changes」をクリックすれば反映される。

どこに#body#などの要素を入れたらいいかわからない場合は、#タイトル# #本文# などと入力して1つ記事を作成して更新するといい。

そのページをコピペして、それぞれの要素と差し替えればOKだ。更新した記事は完了したら削除しておこう。

注意事項

TwitterやFacebook等のソーシャルボタン、そしてGoogle AdSense等の外部サービスのソースが入っているとプレビュー画面を表示すると非常に動作が重くなります。

必要なのは本文の配置イメージだけなので、それらのソースは根こそぎ排除しておきましょう。

Analyticsのソースも無駄にカウントしてしまうので削除しましょう。

カスタマイズ完了後のプレビュー画面がこちら。グレーの四角い部分は本来アドセンスが配置される部分。グレーの画像データを作って配置してみた。

改行位置やテキストのボリューム等、しっかり確認できる。

MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more. App
カテゴリ: ソーシャルネットワーキング
価格: ¥4,000(記事更新現在)

Tags: ,
2015年3月17日

ブログの更新情報はこちらからどうぞ

RSSリーダーへ登録していただく他に、facebookページや、twitterからもブログの更新情報をお知らせしています。是非ご登録下さい。



自己紹介

サムリ。1974年4月生まれ。東京都出身、埼玉在住。アメコミ映画に、仮面ライダー、ロボットアニメが好きな二児の父でフリーランスやっています。詳しいプロフィールはこちら

  • サムリブログのはてなブックマーク数