【MarsEdit】画像をLightBox風にポップアップさせるShadowboxJSを使うための方法

MarsEditを使い始めて４か月…その間いろいろな方のMarsEditの使い方の記事を読み、真似をしてカスタマイズし大分快適に使いやすくなってきました。

MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more.

カテゴリ: ソーシャルネットワーキング

価格: ￥4,000

前回は、SEOプラグイン、AllinSEOPackのキーワードなどの設定をMarsEditからできるところまでできました

本日のメニュー

1 MarsEditでも、LightBox風に画像をポップアップさせたい！！
2 ShadowboxJSとは？？
3 ShadowboxJSのインストールと設定
4 ShadowboxJSの日本語化にもチャレンジ！
5 MarsEditでShadowboxJSを使うための設定
6 MediaMarkUpTemplatesの追加〜アップロードする画像のStyleをカスタマイズして追加する
7 まとめ〜画像をポップアップで拡大することで見やすさUP！

MarsEditでも、LightBox風に画像をポップアップさせたい！！

もう一つMarsEditでやってみたかったことがあるんです。

それは、私が使っているWordPressのプラグイン「ShadowboxJS」をMarsEditからの投稿で適用すること…

ShadowboxJSとは？？

ShadowboxJSはLightBox風に画像をポップアップしてくれるプラグインです。↓こんなイメージです。クリックすると画像が大きく飛び出るやつ…

せっかくプラグインではできるこの機能が、MarsEditで普通に画像を挿入してブログに送ると、画像がポップアップしてくれないんです！

写真好きな私としては、これはとても残念なこと…きれいに撮れた写真、せっかくだから大きくしてみたいんです！他にも、スクリーンショットに文字を入れて加工した時、ポップアップで大きくした方が、説明の文字が見やすいというメリットもあります。

ですから、LightBox風のポップアップ機能はどうしてもやりたかったのです…

ShadowboxJSのインストールと設定

参考にさせて頂いた記事

画像や動画などをポップアップで表示する「Shadowbox JS」

ShadowboxJSはWordPressのプラグインの新規追加でプラグイン名で検索し、インストール、有効化します。

設定はダッシュボードの「設定」→「ShadowboxJS」からできます。

設定画面です。英語表記ですが、有効化すればほぼデフォルトで使うことができます。難しい設定はありません。

ShadowboxJSの日本語化にもチャレンジ！

このままでも十分使うことはできますが、日本語化して下さっている方がいらっしゃいましたので日本語化しました。

WordPressのプラグイン「Shadowbox JS」の日本語化ファイルを作ったので公開します

こちらのサイトから、日本語化ファイルとダウンロードします。

ダウンロードしたファイルを解凍します。

その中の、ShadowboxｰJS-ja-moというファイルをFTPソフトを使ってアップロードします。

私はFileZillaを使いました。

場所はplugins/shadowbox-js/localization/です。

アップロードできました。

これで設定画面をもう一度見てみましょう。

無事日本語化できました！なんか日本語だと何かと安心ですね（笑）

MarsEditでShadowboxJSを使うための設定

参考にさせて頂いた記事

MarsEditで画像を投稿するとき、サムネールをクリックすると拡大表示する動作（LightBoxなど）に対応させるのは意外と簡単（iPhone研究室）

MarsEditでLightBoxを導入(sodora Et Cetera)

MediaMarkUpTemplatesの追加〜アップロードする画像のStyleをカスタマイズして追加する

メディアマネージャーを立ち上げて、どれでもいいので画像を選択します。

選択した状態で右下の「Style」をクリック。

するとStyleのデフォルトで入っている設定がロールダウンして現れます。一番下の「Customize」をクリック。

さらに「+」ボタンでStyleを追加します。

このような画面が出てきます。

Name→ShadowboxJS（自分がわかる名前をつける）
Opening Mark Up→コマンドを入力（Width[hoge]やheightはクリックして大きくなる前の数値だそうです。自分のブログの記事横幅に合わせて（Chrome拡張機能のpagerulerなどのツールで測ることができます）設定しましょう。ちなみにDigipressのテーマでは、横幅のサイズ（width）は620〜630位です。高さはautoにしておきました。

&lt;a title="#alttext#" href="#fileurl#"&gt;
&lt;img title="#displayname#" alt="#alttext#" src="#fileurl#" width="hoge" height="auto" border="0" /&gt;
&lt;/a&gt;

これで準備完了です！！

このように追加されました！