【MarsEdit】投稿する画像にdivタグを自動で付ける

Mac
Writing
Writing Photo by jjpacres

どうも@_tenbiです。
最近画像を中央に寄せる様にしたのですが、僕の使っているMarsEditでは、標準ではclassタグを付与してくれません。というわけでちょこっと弄ってdivタグを付けてみました。

MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more. MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more.
価格: ¥3,450
カテゴリ: ソーシャルネットワーキング, 仕事効率化
App Storeで詳細を見る


実装方法

実装といってもそんなに難しくはありません。
まず、画像をアップロードする時に出てくるユーティリティ画面からStyle→Customizeと選択します。

スクリーンショット 2013 01 03 21 17 36

そうすると「Media Markup Templates」という画面に転移するので「Name」にテンプレート名を、「Opening Markup」に希望の投稿形式を入力します。僕の場合は以下の様に入力しました。

[html]
<div class="MarsEdit"><img src="#fileurl" alt="#alttext"></div>
[/html]

このテンプレートでは以下の値が使用出来るようです。

出力値
#fileurl# 画像のURL
#alttext# 画像の代替テキスト
#displayname# ファイル名
#imgwidth# 画像の幅
#imgheight# 画像の高さ
スクリーンショット 2013 01 03 21 09 40

つまり、このテンプレート上でdivタグやclassタグを設定しておけば、後々一つずつタグを挿入する手間は省けます。

あとは画像の投稿時に、作成したテンプレート名を選択すれば、先程作成したテンプレートでHTMLが出力されます。

スクリーンショット 2013 01 03 21 17 36 1

LightBoxに対応させる

LightBoxに対応させるには先ほどの様に以下のテンプレートを追加します。

[html]
<img src=”#fileurl#” alt=”#alttext#” title=”#displayname#” border=”0″ width=”xxx″ height=”auto” />
[/html]

widthは希望の横幅にすればOKです。

まとめ

ちょっと工夫するだけでブログの見栄え、HTMLの見栄えが良くなるならお得です。
@isloop さんの【CSS】スタイルシートを使って画像(IMG)を中央揃えにする方法。 | 和洋風KAIのように、CSSで画像を中央そろえにさせる時にも便利ですね。早速僕もCSS実装しました: )

ではまた。

関連記事