BlogエディタのMarsEditでFancybox用のタグを自動的に入力する方法

WordPress上でライトボックス風に画像をポップアップしてくれるプラグイン『Fancybox』。コイツを上手く使うには画像のタグに特定のコードを入れる必要がある。

おいらの場合はBlogエディタからしか投稿していないのでエディタ上で毎回コードを入れるのが面倒。Mac環境で愛用しているMarsEditで画像を掲載するときにコードを入れられるように設定してみた。

MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more.
Red Sweater Software
ジャンル： ソーシャルネットワーキング – 仕事効率化
リリース日： 2010-12-15
価格： 4,800円
posted with sticky on 2015.10.12

 

Fancybox自体はこのブログを立ち上げたときから導入済みでMarsEditも設定していた。エントリにしようと思ってたんだけど、中々かけないうちにかなり時間が経ってしまった…。

設置してから結構時間が経ったけど、備忘録としてエントリにしてみた。

MarsEditの設定

1. MarsEditを立ち上げて『New Post』をクリックする。
2. 入力ウィンドウの『Media』アイコンをクリックする。
   
3. Media Managerが開いたら設定用に適当な画像を選択してStyleのプルダウンメニューでCustomizeを選択する。
   
4. テンプレートの一覧が開くので、左したの『＋』ボタンをクリックしてテンプレートを新規作成する。
   
5. 『Name』にテンプレート名を入力して『Opening Markup』にタグを入力してOKボタンを押す。
   
   入力するコードは以下の通り。
   <a title="#alttext#" href="#fileurl#" rel="fancybox"><img title="#displayname#" src="#fileurl#" alt="#alttext#" width="680" height="auto" /></a>
6. Fancyboxでポップアップさせたい画像の場合はStyleで5.で設定したテンプレート名を選択してやればOK。
   

これで設定はOKかな。