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

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

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

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

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

価格: ¥4,000

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

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

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

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

ShadowboxJSとは??

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

Th スクリーンショット 2014 03 14 7 53 35

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

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

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

ShadowboxJSのインストールと設定

参考にさせて頂いた記事

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

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

Th スクリーンショット 2014 03 14 5 51 35

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

Th スクリーンショット 2014 03 14 5 53 14 2

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

Th スクリーンショット 2014 03 14 5 53 33

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

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

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

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

Th スクリーンショット 2014 03 14 7 29 06

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

Th スクリーンショット 2014 03 14 7 29 54

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

Th スクリーンショット 2014 03 14 7 29 42

私はFileZillaを使いました。

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

Th スクリーンショット 2014 03 14 7 31 29

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

Th スクリーンショット 2014 03 14 7 32 03

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

無事日本語化できました!なんか日本語だと何かと安心ですね(笑)

Th スクリーンショット 2014 03 14 7 33 07

MarsEditでShadowboxJSを使うための設定

参考にさせて頂いた記事

MarsEditでLightBoxを導入(sodora Et Cetera)

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

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

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

Th スクリーンショット 2014 03 14 5 57 15

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

Th スクリーンショット 2014 03 14 5 57 35

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

Th スクリーンショット 2014 03 14 5 57 55 2

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

5c4cf86df7a33f38523daedd70d074fd.png

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

これで準備完了です!!

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

Th スクリーンショット 2014 03 14 5 58 47

あとは画像を挿入するときに、先程Mediaを選択した右下の所にある、StyleからShadowboxJSを選んで画像を挿入すればOK!!

Th スクリーンショット 2014 03 14 5 59 00

まとめ〜画像をポップアップで拡大することで見やすさUP!

画像をクリックしたときに大きくできると、特にスクリーンショットにSkitchなどで説明の文字を入れたとき、見やすくなって便利です。

ピント合ってるかなあ?とかよく撮れたなあ…とか、もう少しこうやって撮ればよかったなあなど、写真撮影後の考察もできます。

一つ一つ自分が使いやすい環境が整ってきてとても嬉しいですね。ブログを書く作業がとても楽しくなりました!!

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

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でEDiT NEW LiFE.をフォローしよう!

Sponsored Link

LEAVE A REPLY

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)