MarsEditの写真投稿を改良!「クリックして拡大画像」を可能にする方法

タイトルが長くなってしまいましたが、そのまんまです。
ブログエディタ、MarsEdit。とても便利に使わせてもらっています。

MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more. App
カテゴリ: ソーシャルネットワーキング
掲載時の価格: ¥4,000
全てのバージョンの評価: (4 / 9件の評価)

これを使い始めて本当に便利になったのですが、一つだけ不満がありました。

このブログでは写真をよく使用します。
クリックして拡大画像を表示させたりしていたのですが、MarsEditはこれに対応していません。
スクリーンショットなど特に拡大させる必要のない写真は良いのですが、
大きく見せたい写真がある場合、これは不便。
デフォルトでは普通についている機能なので、これはなないと困るひともいる。。はず!

。。と思って軽い気持ちで検索してみました。
結果、やっぱりいらっしゃいましたー。
前は検索しても見つからなかったので、需要がないと思っていたのですが、
やっぱりいました。同じこと考えてた人。

思ったより簡単なのでやってみてください。方法は「MediaのStyleを編集する」これだけです。

1.MarsEditのツールバーのMediaをクリックする。

2.右下のStyleのEditでstyleを編集。
MediaManager

3.+をクリックしてstyleを追加。
MediaMarkup

4.Openingに以下を入力。(widthなど適当に修正してください)

<a title=”#alttext#” href=”#fileurl#”><img title=”#displayname#” src=”#fileurl#” alt=”#alttext#” width=”240″ /></a>
MediaManeger2

この例だと横240px、縦は自動になっています。
縦バージョン、横バージョンの2種類作ったらもっと便利かもしれませんね。
Nameは適当につけてください。

これで一応「クリックして拡大」はクリアできました。
ただ、参考リンクにもあるようにサムネイル画像を作っているわけではなく縮小しているだけのようです。
画像をアップロードした際、自動的に作られる縮小画像を使えればもっとよいのですが、
そううまくはいかないみたいですね。
でも、とりあえず当初の目的は達成したので、しばらくこの感じでいこうと思います。

追記
FacebookでiPhone研究室さんにアドバイスいただきました。
Opening の例にある「width=”240″」 の様にサイズを決めうちしないで、class=”small” の様に設定して、
css で img.class でサイズなどを調整するようにすれば、テーマを変更したくなったとき、
過去記事の画像サイズも簡単に変更できるとのことです。
テーマはこれからも変わっていくので、後々のことを考えるとこちらの方が良いと思います。
(私もこれから変更しようと思います)
iPhone研究室さん、アドバイスありがとうございました。

参考
MarsEdit で画像を投稿するとき、サムネールをクリックで拡大表示する動作(lightboxなど)に対応させるのは意外に簡単 | iPhone 研究室(iPadもね)
MarsEditを使わない理由はなくなった! MarsEditで投稿する画像をLightboxに対応させる方法 | 猫のゆりかご

広告